■ mymind — Every File Explained
A plain-English guide to every file in the repository
■ Entry Points — The Front Door
[Link]
The very first file a web browser opens. It is almost empty on purpose — just a blank page with a ■ brain
emoji as the browser-tab icon and a single line that says "go load the rest of the app." Think of it as the
lobby of a building.
src/[Link]
The doorman standing in the lobby. Its only job is to open the door and kick everything off — four lines of
code that mount the React app into the HTML page.
■ Login & Security — The Front Desk
src/[Link]
The security guard / receptionist. The moment you arrive, it checks whether you are already logged in and
either lets you straight in or shows the sign-in / sign-up form. It also handles every authentication screen:
sign in, sign up, email verification (6-digit OTP code), forgot password, reset-code entry, and setting a new
password.
■ The Main Application — The Whole Office
src/[Link]
The entire working application — the biggest, most important file. Everything you actually see and use
lives here: the masonry grid of cards, the sidebar menu (Home / Starred / Trash / Tags), the + button to
add something new, the search bar, forms for adding links / notes / files / images / quotes, the full
card-detail view, the tag manager, and toast notifications.
■ The AI Brain — The Smart Assistant
src/[Link]
Handles all the clever automation. When you save something, this file:
• For links: Visits the website and grabs the title, description, and preview screenshot — using YouTube
oEmbed, Vimeo oEmbed, or the general Microlink API as fallbacks.
• For PDFs: Renders the first page of the PDF as a small preview image via [Link].
• For images: Creates a thumbnail directly from the image file.
• AI tagging: Sends the content to Groq AI (fast / free) or Anthropic Claude to get smart tags and a
one-sentence summary.
• Graceful fallback: If AI is unavailable, still generates basic tags from the URL or MIME type.
■■ The Filing Clerk — Talking to the Database
src/[Link]
Every interaction with the cloud database (Supabase) passes through this file:
• Login / signup / logout — create accounts, sign in, sign out, OTP verification
• Cards — save, load, search, trash, restore, and permanently delete
• Starring — mark / unmark cards as favourites
• Tags — create, list, delete; attach or remove tags from cards
• File uploads — upload files / images to cloud storage and return secure signed URLs
• Real-time sync — listens for database changes so cards update automatically
■ The Decorator — Making It Look Nice
src/[Link]
Does not change any functionality — only makes everything feel smooth and polished:
• Cards fade and slide in when the grid loads (instead of just appearing)
• Sidebars slide in from the right with a spring physics effect
• Toast notifications bounce in and snap out
• The logo does an elastic bounce on page load (GSAP)
• Sidebar icons stagger-animate in one by one
• A 3D floating-particle field of 120 tiny drifting dots decorates the login screen ([Link])
■■ The Backup Labeler — Simple Tag Rules
src/[Link]
A rule-based fallback for when AI is unavailable. Uses simple domain/MIME logic: YouTube URLs →
'video', 'youtube'; GitHub URLs → 'code', 'github'; PDF files → 'pdf', 'document', etc. Also contains helper
utilities: timeAgo() ('3d ago'), formatBytes() ('2.4 MB'), getCardColor(), tagColor() (consistent colour per tag
name).
■ The Paint & Furniture — Visual Styling
src/[Link]
Defines every visual aspect of the app: colours, fonts, button shapes, dark background, hover glows,
spacing, card layout, sidebar layout, modal overlays, and all CSS animations. If you want to change what
the app looks like, this is the file to edit.
■ The Old Prototype — The Original Sketch
[Link]
An earlier, simpler version of the app built as a proof of concept. Key differences from the current app:
saves cards only in the browser (localStorage — data disappears if you clear the browser), uses a bigger
Groq model (llama-3.3-70b-versatile), and has no login system. Think of it as the rough sketch that came
before the final painting. It is not imported by the main app.
■■ The Database Blueprint — The Architect's Plan
supabase_setup.sql
A one-time setup script you paste into Supabase's SQL editor. It creates three tables:
• cards — stores every saved item (links, notes, images, files, quotes) with all metadata
• tags — stores all your labels with owner and optional colour
• card_tags — junction table linking tags to cards (many-to-many relationship)
Also enables Row-Level Security (so you can only see your own cards) and adds performance indexes for
fast filtering and searching.
■ The Package List — Ingredients
[Link]
The shopping list of every external tool the project needs. Key dependencies:
• react / react-dom — Core UI framework
• framer-motion — Smooth declarative animations
• gsap — Advanced timeline animations (logo / sidebar entrance)
• three + @react-three/fiber — 3D particle field on the login screen
• lucide-react — All icon buttons (search, star, trash, …)
• @supabase/supabase-js — SDK for talking to the Supabase cloud database
• @vitejs/plugin-react — Vite plugin that makes JSX and React hot-reload work
[Link]
The exact, auto-generated receipt of every package installed with pinned version numbers. Never edit this
by hand — it ensures every developer gets bit-for-bit identical dependencies.
■ The Secret Keys Template
.[Link]
A template showing what secret credentials you need before the app works. Copy it to .env and fill in real
values:
VITE_SUPABASE_URL — web address of your Supabase project
VITE_SUPABASE_ANON_KEY — public access key for the database
VITE_GROQ_API_KEY — API key for the Groq AI service (optional)
■■ Build & Deployment Config
[Link]
Tells Vite (the build tool) how to compile and bundle the app. Three lines — just says "this is a React
project, process JSX correctly."
[Link]
Tells TypeScript what strictness rules to apply when checking code for type errors. Keeps code quality
consistent.
[Link]
Three lines that give Vercel (the hosting service) one rule: "No matter what URL the user visits, always
serve the main app." This prevents 404 errors when someone bookmarks a deep link inside the app.
■ Documentation & Config
[Link]
A human-readable summary of which technologies the project uses and what database columns exist. Not
consumed by any code — purely for humans reading the project for the first time.
.gitignore
Tells git which files to never upload to GitHub: your secret .env file (passwords), the node_modules folder
(huge, can be reinstalled), and build output files.
public/[Link]
The tiny icon that appears in the browser tab — the ■ brain emoji as an SVG.
public/[Link]
A sprite sheet of vector icons used throughout the app interface.
File Dependency Map
[Link] → src/[Link] → src/[Link]
■■ (not logged in) → AuthScreen (inside [Link])
■■ (logged in) → src/[Link]
■■ src/[Link] (AI & previews)
■■ src/[Link] (save/load data)
■■ src/[Link] (backup tagging)
■■ src/[Link] (smooth effects)
supabase_setup.sql ← run once to create the database
[Link] ← old standalone prototype (not used by main app)