Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/htirawi/frontend-interview-prep

🎯 Master 400+ senior-level interview questions for Angular, React, Next.js & Redux. Professional study platform featuring beautiful UI, progress tracking, practice modes, and PWA support. Built with React 19, TypeScript & Tailwind CSS.
https://github.com/htirawi/frontend-interview-prep

angular frontend interview-prep interview-questions learning-platform pwa react react19 redux senior-developer study-tool tailwindcss typescript vite

Last synced: 18 days ago
JSON representation

🎯 Master 400+ senior-level interview questions for Angular, React, Next.js & Redux. Professional study platform featuring beautiful UI, progress tracking, practice modes, and PWA support. Built with React 19, TypeScript & Tailwind CSS.

Awesome Lists containing this project

README 

          
# Frontend Interview Prep



A professional, multi-framework interview preparation application built with React, TypeScript, and Tailwind CSS. Practice with **500+ curated questions** across Angular, React, Next.js, Redux, and Random topics.



## 🚀 Features



- **Multi-Framework Support**: Practice questions for Angular (227), React (80), Next.js (50), Redux (100), and Random topics (52)

- **Interactive Quiz System**: Dynamic quiz interface with multiple question types (multiple choice, fill-in-blank, true/false, multiple checkbox)

- **Enhanced Question Cards**: Rich markdown rendering with syntax highlighting and comparison tables

- **Study Features**: Bookmarks, notes, progress tracking, and study timer

- **Study Analytics**: Comprehensive performance tracking and analytics dashboard

- **Offline Support**: Progressive Web App with offline capabilities

- **Responsive Design**: Optimized for desktop and mobile devices

- **Dark Mode**: Toggle between light and dark themes

- **PWA Support**: Install as a Progressive Web App

- **Keyboard Shortcuts**: Navigate efficiently with keyboard controls

- **Code Quality**: Comprehensive pre-push validation system

- **Architecture**: Clean separation of concerns with custom hooks and services

- **Path Aliases**: Modern import organization with TypeScript path mapping



## 🛠️ Tech Stack



- **Frontend**: React 19, TypeScript, Tailwind CSS

- **Build Tool**: Vite

- **Testing**: Vitest, Testing Library

- **Code Quality**: ESLint, Prettier, Husky, Pre-push validation

- **Architecture**: Custom hooks, services, context API

- **Deployment**: Vercel, Netlify ready



## 📁 Project Structure



```

src/

├── components/          # Reusable UI components

│   ├── common/          # Shared components (LazyLoader, MarkdownRenderer, etc.)

│   ├── features/        # Feature-specific components (StudyAnalytics, StatsPanel)

│   ├── forms/           # Form components (SearchBar, FilterPanel, QuestionRating)

│   ├── interactive-quiz/ # Interactive quiz system components

│   ├── layout/          # Layout components (Sidebar, etc.)

│   ├── navigation/      # Navigation components (FrameworkSelector, etc.)

│   ├── quiz/            # Quiz components (QuizTimer, QuizProgress, etc.)

│   ├── study/           # Study mode components

│   └── tables/          # Table components (ComparisonTable, RegularTable)

├── pages/              # Main application pages

│   ├── ModeSelection.tsx

│   ├── FrameworkSelection.tsx

│   ├── InterviewPage.tsx

│   ├── InteractiveQuizPage.tsx

│   └── QuizSelection.tsx

├── data/               # Question data and framework definitions

│   ├── angular-enhanced.ts    # 227 Angular questions

│   ├── react-enhanced.ts      # 80 React questions

│   ├── nextjs-enhanced.ts     # 50 Next.js questions

│   ├── random-enhanced.ts     # 52 Random topic questions

│   ├── redux.ts               # 100 Redux questions

│   └── interactive-quiz.ts    # Interactive quiz data

├── services/           # Business logic services

│   ├── InteractiveQuizService.ts

│   ├── QuestionService.ts

│   ├── QuizService.ts

│   └── PerformanceService.ts

├── hooks/              # Custom React hooks

│   ├── useFrameworkManager.ts

│   ├── useStudyAnalytics.ts

│   └── useKeyboardShortcuts.ts

├── contexts/           # React context providers

│   ├── ThemeContext.tsx

│   └── SidebarContext.tsx

├── types/              # TypeScript type definitions

│   ├── interactive-quiz.ts

│   ├── quiz-results.ts

│   ├── study-components.ts

│   └── ui.ts

├── core/               # Core functionality

│   └── components/     # Core components (ErrorBoundary, etc.)

├── shared/             # Shared utilities and components

├── utils/              # Utility functions

└── styles/             # Global styles and animations



docs/                   # Documentation

├── guides/             # Setup and usage guides

├── management/         # Project management docs

└── status/             # Project status and completion docs



scripts/                # Development and deployment scripts

├── pre-push-validation.js  # Comprehensive validation script

└── README.md               # Scripts documentation

```



## 🚀 Quick Start



1. **Install dependencies**:



   ```bash

   pnpm install

   ```



2. **Start development server**:



   ```bash

   pnpm dev

   ```



3. **Build for production**:

   ```bash

   pnpm build

   ```



## 🎯 Usage



### **Study Mode**



1. **Select Framework**: Choose from Angular (227), React (80), Next.js (50), Redux (100), or Random topics (52)

2. **Practice Questions**: Navigate through questions with keyboard shortcuts

3. **Track Progress**: Bookmark questions and add personal notes

4. **Study Modes**: Sequential, random, or bookmarked-only practice



### **Interactive Quiz Mode**



1. **Choose Quiz Type**: Select framework and difficulty level

2. **Multiple Question Types**:

   - Multiple Choice (single answer)

   - Multiple Checkbox (multiple answers)

   - Fill in the Blank

   - True/False

3. **Real-time Feedback**: Immediate scoring and progress tracking

4. **Performance Analytics**: Detailed breakdown of performance by question type

5. **Study Recommendations**: Personalized suggestions for improvement



## 📚 Question Content



### **Angular (227 Questions)**



- Core concepts, components, services, routing

- Forms (template-driven and reactive)

- Component communication and lifecycle hooks

- Authentication & authorization with JWT

- Angular 16-19 features (Signals, Control Flow, SSR improvements)

- Performance optimization and testing



### **React (80 Questions)**



- Hooks, state management, and lifecycle

- Server Components and Concurrent Features

- Error boundaries and context API

- Performance optimization and testing

- Advanced patterns and best practices



### **Next.js (50 Questions)**



- App Router vs Pages Router

- SSG, SSR, ISR, and CSR strategies

- Image optimization and performance

- API routes and middleware

- Deployment and production optimization



### **Redux (100 Questions)**



- State management patterns

- Redux Toolkit and modern practices

- Middleware and async operations

- Testing and debugging



### **Random Topics (52 Questions)**



- Git workflows and advanced commands

- CSS units, Grid, Flexbox, and animations

- SASS features and best practices

- TypeScript advanced features

- Web APIs and modern JavaScript

- Build tools (Webpack, Vite, ESBuild)

- Docker and containerization



## ⌨️ Keyboard Shortcuts



- `←` `→` Navigate between questions

- `A` Toggle answer visibility

- `B` Bookmark/unbookmark question



## 🧪 Testing



```bash

# Run tests

pnpm test



# Run tests with UI

pnpm test:ui



# Run tests with coverage

pnpm test:coverage

```



## 🔧 Development



### **Code Quality & Validation**



This project includes a comprehensive pre-push validation system that ensures code quality before changes reach the repository.



#### **Pre-Push Validation Script**



```bash

# Run comprehensive validation (automatically runs on git push)

pnpm pre-push



# Individual validation checks

pnpm check:any          # Find any types in source code

pnpm check:unused       # Find unused variables

pnpm check:console      # Find console.log statements

```



#### **Standard Development Commands**



```bash

# Lint code

pnpm lint



# Lint with strict rules (zero warnings)

pnpm lint:strict



# Fix linting issues

pnpm lint:fix



# Format code

pnpm format



# Type check

pnpm type-check



# Validate everything

pnpm validate

```



### **Pre-Push Validation Features**



The validation system automatically checks:



- ✅ **TypeScript Compilation**: Ensures no type errors

- ✅ **ESLint Quality**: Enforces coding standards

- ✅ **Prettier Formatting**: Consistent code formatting

- ✅ **Production Build**: Verifies build success

- ✅ **Test Suite**: Runs all tests

- ✅ **Any Type Detection**: Finds `any` types (excluding example code)

- ✅ **Unused Variables**: Identifies unused variables and imports

- ✅ **Console Statements**: Detects `console.log` usage



### **Architecture Improvements**



The codebase has been refactored with modern React best practices:



- **Path Aliases**: Clean imports using `@components`, `@services`, `@types`, etc.

- **Custom Hooks**: `useFrameworkManager`, `useQuestionNavigation`, `useProgressManager`, `useStudyAnalytics`

- **Services**: `FrameworkService`, `QuestionService`, `InteractiveQuizService` for business logic

- **Context API**: `SidebarContext`, `ThemeContext` for state management

- **Type Safety**: Comprehensive TypeScript types and interfaces

- **Component Composition**: Reusable table components and utilities

- **Performance**: Lazy loading, code splitting, and optimized bundles

- **Offline Support**: Service worker integration for offline functionality



## 📚 Documentation



- **[📖 Complete Documentation](./docs/README.md)** - Comprehensive documentation index

- [Architecture](./docs/development/ARCHITECTURE.md) - System design and architecture

- [Features](./docs/development/FEATURES.md) - Detailed feature documentation

- [Deployment](./docs/deployment/DEPLOYMENT.md) - Deployment guides

- [Project Structure](./docs/development/PROJECT-STRUCTURE.md) - Detailed project organization



## 🆕 Recent Updates



### **v2.1 - Production Ready & Modern Architecture**



- ✅ **Path Aliases**: Modern import organization with TypeScript path mapping

- ✅ **Console Log Cleanup**: Removed all console.log statements from production code

- ✅ **Interactive Quiz System**: Complete quiz interface with multiple question types

- ✅ **Study Analytics**: Comprehensive performance tracking and analytics dashboard

- ✅ **Offline Support**: Progressive Web App with service worker integration

- ✅ **Component Organization**: Clean folder structure with feature-based organization

- ✅ **Type Safety**: Enhanced TypeScript types and interfaces

- ✅ **Performance**: Lazy loading and code splitting optimizations



### **v2.0 - Pre-Push Validation System**



- ✅ **Comprehensive validation**: Pre-push hooks with TypeScript, ESLint, Prettier checks

- ✅ **Code quality enforcement**: Automatic detection of `any` types and unused variables

- ✅ **Architecture refactoring**: Custom hooks, services, and context API

- ✅ **Enhanced question content**: 500+ questions across all frameworks

- ✅ **Table components**: Beautiful comparison tables for difference questions

- ✅ **Type safety**: Comprehensive TypeScript types and interfaces



### **Question Additions**



- **Angular**: Added 67 new questions (Forms, Component Communication, Auth, Angular 16-19)

- **React**: Added 53 new questions (Advanced hooks, Server Components, Concurrent Features)

- **Next.js**: Added 40 new questions (App Router, Performance, Deployment)

- **Random**: Added 52 new questions (Git, CSS, SASS, TypeScript, Web APIs, Build Tools)



## 🤝 Contributing



1. Fork the repository

2. Create a feature branch

3. Make your changes

4. **Run pre-push validation**: `pnpm pre-push`

5. Ensure all checks pass

6. Submit a pull request



### **Development Workflow**



```bash

# Before making changes

git checkout -b feature/your-feature



# Make your changes, then validate

pnpm pre-push



# Commit and push (validation runs automatically)

git add .

git commit -m "feat: your changes"

git push

```



## 🎯 Benefits of Pre-Push Validation



- **🛡️ Quality Assurance**: Prevents bad code from reaching the repository

- **⚡ Faster Development**: Automated checks instead of manual code review

- **🔄 Consistency**: Ensures all team members follow the same standards

- **🐛 Early Bug Detection**: Catches issues before they become problems

- **📚 Learning**: Developers learn best practices through validation feedback

- **🚀 Production Ready**: Ensures code is always deployable



## 📊 Project Statistics



- **Total Questions**: 500+ across 5 categories

- **Code Quality**: 95/100 production readiness score

- **Test Coverage**: Comprehensive test suite

- **Type Safety**: 100% TypeScript coverage

- **Performance**: Optimized for fast loading and smooth UX



## 📄 License



MIT License - see [LICENSE](./LICENSE) for details.



## 👨‍💻 Author



**Hussein Tirawi** - [GitHub](https://github.com/htirawi)



---



Built with ❤️ for the frontend developer community.



_Last updated: January 2025 - Pre-Push Validation System v2.0_