Frontend Interview Prep

A complete frontend interview preparation guide with 650+ questions and answers across 15 topics — from HTML & Browser fundamentals to React, Next.js, TypeScript, System Design, and more.

Built as a modern Next.js web app with searchable Q&A cards, per-topic browsing, and a polished dark UI.

---

Topics Covered

#	Topic	Description
1	HTML & Browser Fundamentals	DOM, rendering pipeline, semantic HTML, accessibility, CSP
2	CSS	Cascade, specificity, box model, Flexbox, Grid, responsive design, animations
3	JavaScript Fundamentals	Types, scope, closures, hoisting, the event loop, async patterns
4	JS Objects & Advanced Concepts	Prototypes, memory management, garbage collection, Promises, async/await
5	JS Collections & Modules	Map, Set, WeakMap, WeakSet, ESM, CommonJS, dynamic imports, tree shaking
6	TypeScript	Interfaces, types, generics, utility types, narrowing, conditional types
7	Authentication & JWT	Auth vs authorization, sessions, JWT, OAuth, PKCE, token management
8	Frontend Security	XSS, CSRF, clickjacking, secure storage, cookie security, rate limiting
9	React.js	Components, hooks, virtual DOM, reconciliation, state management, performance
10	Next.js	App Router, server/client components, SSR/SSG/ISR, hydration, deployment
11	Testing	Unit, integration, E2E, Jest, RTL, Cypress, Playwright, coverage
12	Frontend Performance	Core Web Vitals, bundle optimization, lazy loading, caching, CDN, build tools
13	Frontend System Design (Senior)	Architecture, component design, real project questions
14	Practical Preparation Checklist	Hands-on projects to build before your interview
15	Final Interview Tips	Strategy and mindset advice for acing your interview

---

Features

• 650+ questions with answers — every question paired with a clear, concise explanation
• 15 topic pages — each with grouped sections and expandable Q&A accordions
• Per-topic search — filter questions within a topic by keyword
• Global search — search across all questions and answers at once
• Responsive design — optimized for mobile, tablet, and desktop
• Dark theme — easy on the eyes with a modern, polished aesthetic
• Fast — statically generated pages for instant loading

---

Tech Stack

• Next.js (App Router) — framework & static generation
• React — UI library
• TypeScript — type safety
• Tailwind CSS — styling
• shadcn/ui — UI components (Accordion, Input, etc.)
• Lucide React — icons

---

Getting Started

Prerequisites

• Node.js 18.17+ (or 20+)
• npm (or yarn / pnpm)

Installation

# Clone the repository
git clone https://github.com/YOUR_USERNAME/frontend-interview-prep.git
cd frontend-interview-prep

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:3000.

Build for Production

# Create an optimized production build
npm run build

# Start the production server
npm start

---

Project Structure

.
├── app/
│   ├── layout.tsx              # Root layout (header, footer, theme)
│   ├── page.tsx                 # Home page (topic grid)
│   ├── not-found.tsx            # 404 page
│   ├── search/
│   │   └── page.tsx             # Global search page
│   └── topic/
│       └── [slug]/
│           └── page.tsx         # Topic detail page (per-topic Q&A)
├── components/
│   ├── topic-icon.tsx           # Icon mapper for topics
│   ├── topic-view.tsx           # Client-side Q&A accordion + search
│   └── ui/                      # shadcn/ui components
├── data/
│   ├── index.ts                 # Combines all topics, exports helpers
│   └── topics/
│       ├── html-browser.ts      # HTML & Browser Q&A data
│       ├── css.ts               # CSS Q&A data
│       ├── javascript.ts        # JavaScript Q&A data
│       ├── js-objects.ts        # JS Objects & Advanced Concepts Q&A
│       ├── js-collections.ts    # Collections & Modules Q&A
│       ├── typescript.ts        # TypeScript Q&A data
│       ├── authentication.ts   # Auth & JWT Q&A data
│       ├── security.ts          # Security Q&A data
│       ├── react.ts             # React Q&A data
│       ├── nextjs.ts            # Next.js Q&A data
│       ├── testing.ts           # Testing Q&A data
│       ├── performance.ts       # Performance Q&A data
│       ├── system-design.ts     # System Design Q&A data
│       ├── practical.ts         # Practical checklist Q&A
│       └── tips.ts              # Final tips Q&A data
├── lib/
│   ├── types.ts                 # TypeScript interfaces (Topic, QA, etc.)
│   └── utils.ts                 # Utility functions (cn helper)
└── ...

---

How the Data Works

All questions and answers are stored as plain TypeScript objects in data/topics/. Each topic file exports a Topic object:

export const myTopic: Topic = {
  slug: 'my-topic',
  title: 'My Topic',
  shortTitle: 'My Topic',
  description: 'A brief description shown on the home page card.',
  icon: 'Globe',           // Must match a key in components/topic-icon.tsx
  gradient: 'from-sky-500 to-blue-600',  // Tailwind gradient classes
  sections: [
    {
      title: 'Section Name',
      questions: [
        { q: 'The question?', a: 'The answer.' },
      ],
    },
  ],
};

The topic is automatically picked up when added to the topics array in data/index.ts.

---

Contributing

Contributions are welcome! Whether it's fixing a typo, improving an answer, adding a new question, or suggesting a new topic — every contribution helps.

Ways to Contribute

• Fix typos or clarify answers — if something is unclear or incorrect, submit a fix
• Add new questions — expand a topic with additional Q&A pairs
• Add a new topic — propose a new topic area not yet covered
• Improve the UI/UX — design tweaks, accessibility improvements, animations
• Report issues — open an issue for bugs, inaccuracies, or suggestions

Step-by-Step

1. Fork the repository
2. Clone your fork:

   git clone https://github.com/YOUR_USERNAME/frontend-interview-prep.git
   cd frontend-interview-prep

3. Create a branch for your changes:

   git checkout -b fix/typo-in-css-answers

4. Make your changes (see the specific guides below)
5. Verify the build passes:

   npm run build

6. Commit with a clear message:

   git commit -m "Fix: clarify margin collapse explanation in CSS topic"

7. Push to your fork:

   git push origin fix/typo-in-css-answers

8. Open a Pull Request — describe what you changed and why

Adding or Editing Questions

1. Open the relevant topic file in data/topics/ (e.g. react.ts)
2. Find the section you want to edit, or add a new section
3. Add/edit a question object:

   {
     q: 'What is your question?',
     a: 'A clear, concise answer. Keep it to 2-4 sentences for readability.',
   }

4. Save the file and verify with npm run build

Adding a New Topic

1. Create a new file in data/topics/ (e.g. data/topics/webassembly.ts)
2. Follow the Topic interface from lib/types.ts:

   import { Topic } from '../../lib/types';
   
   export const webAssembly: Topic = {
     slug: 'webassembly',
     title: 'WebAssembly',
     shortTitle: 'WebAssembly',
     description: 'WebAssembly concepts and use cases.',
     icon: 'Cpu',  // Add the icon to components/topic-icon.tsx
     gradient: 'from-purple-500 to-pink-600',
     sections: [
       {
         title: 'Basics',
         questions: [
           { q: 'What is WebAssembly?', a: '...' },
         ],
       },
     ],
   };

3. If you used a new icon, add it to the iconMap in components/topic-icon.tsx
4. Register the topic in data/index.ts:

   import { webAssembly } from './topics/webassembly';
   // ...
   export const topics: Topic[] = [
     // ...
     webAssembly,
   ];

5. Run npm run build to verify

Guidelines

• Answers should be concise — 2-4 sentences, clear and to the point
• Questions should be practical — things actually asked in interviews
• No copy-pasting from other prep sites — write original answers in your own words
• Test your changes — run npm run build before submitting a PR
• One topic per PR — keep pull requests focused for easier review

Code Style

• Use TypeScript for all new files
• Follow the existing formatting (no Prettier config is enforced, but match surrounding code)
• Use import { X } from '@/path' alias imports (configured in tsconfig.json)

---

License

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

---