$ Project.log
InterviewForge
$ cat description.md
# InterviewForge A web application that helps students and job-seekers prepare for interviews at top-tier tech companies. Browse companies, explore job tracks, view interview processes round-by-round, read practice questions with answer hints, and access curated learning resources — all in one place. ## Features - **16 top tech companies** — Google, Amazon, Meta, Apple, Netflix, Microsoft, NVIDIA, OpenAI, Uber, Salesforce, Adobe, Tesla, Spotify, Airbnb, Stripe, and ByteDance - **80 job tracks** — Software Engineering, Product Management, Data Science & AI, Design, SRE, Hardware Engineering, and more - **417 interview rounds** with acceptance rates, durations, and formats - **1,143 practice questions** tagged by difficulty (Easy / Medium / Hard) and topic, each with an answer hint - **974 curated learning resources** — YouTube channels, articles, books, and documentation links - **Interview Experiences** — users who've interviewed at a company can share their outcome, role, difficulty rating, and write-up; displayed on each company page - **Live search** — filter companies by name, tagline, or description - **Lazy loading** — data is fetched only when needed via IntersectionObserver - **Hash-based routing** — deep-linkable URLs for companies and tracks - **Responsive design** — works from mobile to desktop - **Glassmorphism dark theme** with animated gradient orbs and skeleton loading states ## Tech Stack | Layer | Technology | |-------|-----------| | Frontend | React 18, TypeScript, Vite | | Styling | Tailwind CSS 3, custom CSS (glassmorphism, animations) | | Icons | Lucide React | | Backend / Database | Supabase (PostgreSQL) | | Fonts | Inter, Plus Jakarta Sans, JetBrains Mono | ## Project Structure ``` src/ ├── App.tsx # Root component, hash-based router ├── index.css # Global styles, theme tokens, animations ├── main.tsx # Vite entry point ├── components/ │ ├── HomePage.tsx # Company grid with search │ ├── CompanyDetail.tsx # Company info + track list + experiences │ ├── TrackDetail.tsx # Interview rounds, questions, resources │ ├── ExperiencesSection.tsx # Shared interview experiences + submit form │ ├── CompanyLogo.tsx # Company initial letter in brand color │ ├── Skeletons.tsx # Loading placeholders ├── lib/ │ ├── supabase.ts # Supabase client │ ├── types.ts # TypeScript interfaces │ ├── hooks.ts # useLazyLoad, useInView hooks │ ├── icons.ts # Track icon mapping supabase/ └── migrations/ ├── 20260713233412_create_interview_prep_schema.sql └── 20260714001251_create_experiences_table.sql ``` ## Database Schema Six tables with cascading foreign keys: ``` companies 1───* tracks 1───* rounds 1───* questions └───* resources └───* experiences ``` - **companies** — name, slug, tagline, description, accent color, acceptance rate, employees, founded year, HQ - **tracks** — job track per company (e.g. Software Engineering, Product Management) - **rounds** — ordered interview steps per track with duration, format, and pass-through rate - **questions** — practice questions per round with difficulty, topic, and answer hint - **resources** — curated links (YouTube, articles, books, docs) per round - **experiences** — user-submitted interview reports per company (author, role, outcome, date, rounds count, difficulty rating, free-text write-up) Row Level Security is enabled on all tables with public read access (`TO anon, authenticated`). ## Getting Started ### Prerequisites - Node.js 18+ - npm ### Install & Run ```bash npm install npm run dev ``` The app will be available at the local dev URL Vite prints. ### Build ```bash npm run build npm run typecheck ``` ## How It Works 1. **Home page** fetches all companies from Supabase, displays them in a searchable card grid. Each card shows the company initial in its brand color, tagline, acceptance rate, employee count, HQ, and founding year. 2. **Company detail** shows the full company description and a list of job tracks. Each track has an icon and description. 3. **Track detail** displays the interview process as a timeline of rounds. Each round expands to reveal practice questions (with toggleable answer hints) and curated learning resources. 4. **Company detail** also shows an Interview Experiences section where anyone can submit their interview story (no login required) or browse what others have shared — including outcome, role, difficulty rating, and a full write-up. All data is fetched lazily — the Supabase query for a section only runs when that section scrolls into view. ## License This project is for educational purposes.
$ tech --stack
$ links --show
$ event --source
