The open-source hub for frontend interview experiences, curated jobs, and developer resources.
🌐 Live Site • ✨ Features • 🛠 Tech Stack • 🚀 Getting Started • 🤝 Contributing
Frontend developers preparing for interviews often rely on scattered LinkedIn posts, random Medium articles, and word-of-mouth. Frontend Junction brings it all together — real interview experiences from 100+ companies, curated blog content, and a community-driven platform where developers share what actually gets asked.
Live at frontend-junction.com
- 106+ Interview Experiences — Real stories from Google, Meta, Amazon, Flipkart, Stripe, Adobe, and 100+ more companies, with round-by-round breakdowns
- 23 Technical Blog Posts — In-depth articles on React patterns, system design, performance optimization, and modern CSS
- 103 Company Profiles — Dedicated pages per company with all related experiences and interview patterns
- AI-Powered Content Pipeline — Automated ingestion and summarization of interview experiences from Medium, Dev.to, and Hashnode using Google Gemini
- Full-Text Search & Filters — Search by company, year, tech stack, and outcome (selected/rejected)
- Community Submissions — Authenticated users can submit their own interview experiences
- Admin Dashboard — Content moderation, approval workflows, and analytics
- Blog with MDX — Rich content with code highlighting, embedded components, and SEO optimization
- SEO & Performance — ISR, sitemap generation, OpenGraph images, structured data, Lighthouse CI
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, Server Actions, ISR) |
| Language | TypeScript |
| Database | Supabase (PostgreSQL + Auth + Storage) |
| Styling | Tailwind CSS + Radix UI primitives |
| Animations | Framer Motion |
| Content | MDX via Velite |
| AI | Google Gemini (content processing pipeline) |
| CI/CD | GitHub Actions (lint, type check, security audit, bundle size, Lighthouse) |
| Auth | Supabase SSR Auth with middleware |
| Deployment | Vercel |
- Node.js 20.x
- npm
- Supabase account (for database & auth)
# Clone the repository
git clone https://github.com/deepu0/frontend-junction.git
cd frontend-junction
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Fill in the values from Supabase plus any pipeline, analytics, or deployment settings you need
# Run the development server
npm run devOpen http://localhost:3000 to see the app.
Run scripts/setup.sql in your Supabase SQL Editor. It creates the
pipeline + question-bank tables and the row-level-security policies the app relies on.
Then grant yourself admin access (used by /admin):
UPDATE auth.users
SET raw_app_meta_data = raw_app_meta_data || '{"role": "admin"}'::jsonb
WHERE email = '[email protected]';Admin role is read from Supabase app_metadata — there are no hardcoded admin emails.
| Variable | Description |
|---|---|
NEXT_PUBLIC_SUPABASE_URL |
Your Supabase project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase anonymous/public key |
SUPABASE_SERVICE_ROLE_KEY |
Server-only Supabase key for admin routes, data pipelines, and sitemap generation |
GEMINI_API_KEY |
Server-only Google Gemini API key for the content pipeline |
CRON_SECRET |
Server-only bearer token that authorizes the protected pipeline and seed API routes |
GOOGLE_SITE_VERIFICATION |
Optional Google Search Console verification token exposed in the page metadata |
NEXT_GOOGLE_ANALYTICS |
Optional Google Analytics measurement ID used to load the site tag |
NEXT_PUBLIC_TURNSTILE_SITE_KEY |
Optional public Cloudflare Turnstile site key used by bot-protected forms |
TURNSTILE_SECRET_KEY |
Optional server-only Cloudflare Turnstile secret used to verify bot-protected form submissions |
NEXT_PUBLIC_IS_DEV |
Optional non-production flag that relaxes cron protection for local pipeline testing |
NEXT_PUBLIC_LOGO_DEV_KEY |
Optional public Logo.dev token for company logos; the app falls back to a bundled demo key when unset |
npm run dev # Start development server
npm run build # Production build
npm run lint # Run ESLint
npm run check-types # TypeScript type checking
npm run check:size # Bundle size analysis
npm run check:unused # Find unused exports (Knip)frontend-junction/
├── app/ # Next.js App Router pages
│ ├── interview-experience/ # Experience listing & detail pages
│ ├── blog/ # Blog listing & posts
│ ├── companies/ # Company profiles
│ ├── admin/ # Admin dashboard
│ ├── api/ # API routes (experiences, pipeline, stats)
│ └── auth/ # Authentication flows
├── components/ # React components (23 components)
├── content/blog/ # MDX blog posts
├── data/ # Seed data & fixtures
├── actions/ # Server Actions
├── hooks/ # Custom React hooks
├── lib/ # Supabase clients, utilities
├── public/companies/ # 103 company logos
└── .github/workflows/ # CI/CD pipeline
We welcome contributions! Whether it's:
- 📝 Submitting interview experiences — Share your story to help others
- 🐛 Bug fixes — Found something broken? PRs welcome
- ✨ New features — Check the issues for what's planned
- 📖 Blog posts — Write about frontend topics in MDX
- 🌐 Translations — Help make the content accessible
See CONTRIBUTING.md for detailed guidelines.
- Salary insights and compensation data per company
- Interview preparation checklists by company
- Email notifications for new experiences at followed companies
- Community upvoting and commenting on experiences
- Mobile app (React Native)
- Internationalization (i18n)
| Metric | Count |
|---|---|
| Interview Experiences | 106+ |
| Blog Posts | 23 |
| Companies Covered | 103 |
| Pull Requests | 91+ |
| Commits | 127+ |
This project is licensed under The Unlicense — it's free and unencumbered software released into the public domain.
Deepak Sharma — Senior Frontend Engineer
If this project helps you land your next frontend role, consider giving it a ⭐