My Pages

Build a mini website of custom HTML pages within Prep Tracker. Perfect for storing algorithm visualizations, cheat sheets, interactive demos, or any HTML-based interview prep material you want to keep organized and share with friends.

Creating Pages

Go to My Pages and click + New Page. You have two options:

Paste or Upload HTML

1. In the editor, click the Paste / Upload tab
2. Either:
   • Paste HTML directly (up to 800 KB)
   • Upload an .html or .htm file
3. Pages are fully sandboxed — your HTML runs safely in an iframe
4. Add an optional title; if left blank, pages save as "Untitled"

From Google Drive URL

1. Click the From URL tab
2. Paste a Google Drive link to an HTML file
3. The file must be shared publicly ("Anyone with the link can view")
4. Prep Tracker fetches the file and caches it in your browser for 24 hours

The app works around Google Drive's embedding restrictions by proxying the file through a server-side endpoint, so your Drive link stays fresh without storing content in Firebase.

Organizing with Groups

Keep pages tidy by grouping them:

Create a Group

Click + New Group at the top of My Pages. Groups can be made public or private.

Assign Pages to Groups

From a card:

• Click the + group button (or group pill if assigned)
• A dropdown appears with all your groups
• Toggle multiple groups on/off — pages can belong to several groups at once
• Click outside to close

From the editor:

• While editing a page, the group selector shows tag-style buttons
• Click to toggle each group on/off, or create a new group inline

Filter by Group

Use the filter tabs below the group list to view:

• All pages
• Ungrouped pages
• Any specific group name

Sharing Pages

Make a Page Public

Click the 🔒 Private / 🌐 Public button on the card. Public pages can be shared with friends.

Share a Link

Click the 🔗 button on any public page to copy a shareable link. The recipient must be signed in to Prep Tracker to view the page.

View Shared Pages

When someone shares a page with you:

• Open the link and sign in to Prep Tracker if prompted
• The page renders full-screen automatically
• If the page is private, a lock icon appears instead

Previewing Pages

Inline Preview

From My Pages, click on a card or the Preview hover label to expand an inline viewer below the grid. The page renders in an embedded iframe with:

• Launch button (🚀) — open full-screen
• Share button (🔗) — copy link (public pages only)
• Edit button (✏) — modify the page
• Close button (✕) — collapse the preview

Launch Full-Screen

Click the 🚀 button on a card, or click 🚀 Launch inside the inline preview. This maximizes the page and hides Prep Tracker's UI entirely. Press Esc or click the ✕ Exit button to return.

Browser Caching

For pages loaded from Google Drive URLs:

• First load: Prep Tracker fetches the file from Drive (may take a few seconds)
• Subsequent loads (24 hours): Loaded from your browser's localStorage — instant
• Cache expires: After 24 hours, the file is re-fetched from Drive
• If you change the Drive link: The old cached version is discarded; the new file is fetched

This keeps Drive links fresh without storing large HTML files in Firestore.

Tips

• Max file size: 800 KB per page (stays well under Firestore's 1 MB document limit)
• Privacy: Group visibility does NOT control page visibility — use the Public/Private toggle for that
• Multi-group setup: A page can belong to multiple groups; filtering by "Design" will show all pages in the Design group regardless of their other group memberships
• Safe HTML: All pages run in a sandboxed iframe with strict security rules — they can't access your account or other pages
• Friends can't edit: Shared pages are read-only for friends; only you can edit your pages