Frontend Interview Prep App

A full-stack application built with Next.js, Supabase, and Tailwind CSS to help developers prepare for frontend interviews through interactive flashcards and coding challenges.

Features

🎯 Interactive Flashcards

• Review fundamental frontend concepts
• Toggle between question and answer
• Filter by difficulty (Easy, Medium, Hard)
• Filter by tags (JavaScript, React, CSS, etc.)
• Search functionality

💻 Code Challenges

• Practice coding problems with Monaco Editor
• Real-time code editing with syntax highlighting
• Mock test runner with sample inputs/outputs
• Difficulty-based filtering
• View solutions after attempts

🔐 Authentication

• User registration and login via Supabase Auth
• Protected routes and user sessions
• Email verification workflow

🎨 Modern UI

• Responsive design with Tailwind CSS
• Clean and intuitive interface
• Loading states and error handling
• Mobile-friendly navigation

📊 Ad Integration

• Google AdSense integration with responsive ad units
• Strategic ad placement between content
• Graceful fallbacks for development environment
• Non-intrusive ad experience

Tech Stack

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS
• Backend: Supabase (PostgreSQL, Auth, Real-time)
• Code Editor: Monaco Editor
• Deployment: Vercel + Supabase
• Icons: Lucide React

Database Schema

Flashcards Table

• id (UUID, Primary Key)
• question (Text)
• answer (Text)
• tags (Text Array)
• difficulty (Enum: easy, medium, hard)
• created_at, updated_at (Timestamps)

Challenges Table

• id (UUID, Primary Key)
• title (Text)
• description (Text)
• difficulty (Enum: easy, medium, hard)
• starter_code (Text)
• solution (Text)
• test_cases (JSONB Array)
• created_at, updated_at (Timestamps)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account

1. Clone the Repository

git clone <your-repo-url>
cd fe-prep
npm install

2. Set Up Supabase

1. Create a new Supabase project at supabase.com
2. Go to Settings → API to get your project URL and anon key
3. Copy .env.local.example to .env.local:

cp .env.local.example .env.local

4. Update .env.local with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here
NEXT_PUBLIC_ADSENSE_CLIENT_ID=ca-pub-your-adsense-publisher-id

2.1. Set Up Google AdSense (Optional)

1. Create a Google AdSense account at adsense.google.com
2. Get your publisher ID (starts with ca-pub-)
3. Update the NEXT_PUBLIC_ADSENSE_CLIENT_ID in your .env.local
4. Create ad units in your AdSense dashboard and replace the placeholder ad slot IDs in the code
5. AdSense ads will only show in production - in development, you'll see placeholder boxes

Note: The app works perfectly without AdSense configuration - ads will show as placeholder boxes during development.

3. Set Up Database

Run the SQL commands in supabase-schema.sql in your Supabase SQL editor to create:

• Tables for flashcards and challenges
• Sample data
• Row Level Security policies
• Database indexes

4. Run the Development Server

npm run dev

Open http://localhost:3000 to view the app.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── auth/              # Authentication pages
│   ├── flashcards/        # Flashcards page
│   ├── challenges/        # Code challenges page
│   └── page.tsx           # Home page
├── components/            # Reusable UI components
│   ├── ui/               # Base UI components (Button, Card, etc.)
│   ├── layout.tsx        # Main app layout
│   ├── flashcard.tsx     # Flashcard component
│   ├── challenge.tsx     # Challenge component
│   ├── code-editor.tsx   # Monaco editor wrapper
│   └── filter-bar.tsx    # Filtering component
├── lib/                  # Utility functions and config
│   ├── supabase/         # Supabase client config
│   └── utils.ts          # Utility functions
└── types/                # TypeScript type definitions
    └── database.ts       # Database and app types

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Connect your GitHub repo to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push to main

Supabase Configuration

Make sure your Supabase project is configured with:

• Row Level Security enabled
• Public read access policies for flashcards/challenges tables
• Auth settings configured for your domain

Development

Adding New Flashcards

Add entries to the flashcards table via Supabase dashboard or SQL:

insert into flashcards (question, answer, tags, difficulty) values
('Your question here', 'Your answer here', '{"tag1", "tag2"}', 'medium');

Adding New Challenges

Add entries to the challenges table:

insert into challenges (title, description, difficulty, starter_code, solution, test_cases) values
('Challenge Title', 'Description...', 'hard', 'function starter() {}', 'function solution() {}', 
 '[{"input": "example", "expected_output": "result", "description": "test case"}]');

Customizing UI

• Modify components in src/components/
• Update styling with Tailwind classes
• Customize colors and themes in tailwind.config.js

Features to Add

• User progress tracking
• Difficulty progression system
• Code challenge submission history
• More programming languages support
• Timed practice sessions
• Community-contributed content
• Analytics dashboard

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is open source and available under the MIT License.

Support

For issues and questions:

• Check existing GitHub issues
• Create a new issue with detailed description
• Include error messages and environment details