{"id":48587170,"url":"https://github.com/htirawi/frontend-interview-prep","last_synced_at":"2026-04-08T18:14:03.215Z","repository":{"id":317462859,"uuid":"1067516194","full_name":"htirawi/frontend-interview-prep","owner":"htirawi","description":"   🎯 Master 400+ senior-level interview questions for Angular, React, Next.js \u0026 Redux. Professional study platform featuring beautiful UI, progress tracking, practice modes, and PWA support. Built with React 19, TypeScript \u0026 Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-10-01T03:33:02.000Z","size":483,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-01T03:35:01.477Z","etag":null,"topics":["angular","frontend","interview-prep","interview-questions","learning-platform","pwa","react","react19","redux","senior-developer","study-tool","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/htirawi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-01T01:16:51.000Z","updated_at":"2025-10-01T03:33:06.000Z","dependencies_parsed_at":"2025-10-01T03:35:22.300Z","dependency_job_id":null,"html_url":"https://github.com/htirawi/frontend-interview-prep","commit_stats":null,"previous_names":["htirawi/angular-interview-prep"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/htirawi/frontend-interview-prep","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htirawi%2Ffrontend-interview-prep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htirawi%2Ffrontend-interview-prep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htirawi%2Ffrontend-interview-prep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htirawi%2Ffrontend-interview-prep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/htirawi","download_url":"https://codeload.github.com/htirawi/frontend-interview-prep/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htirawi%2Ffrontend-interview-prep/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31567687,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","frontend","interview-prep","interview-questions","learning-platform","pwa","react","react19","redux","senior-developer","study-tool","tailwindcss","typescript","vite"],"created_at":"2026-04-08T18:14:02.358Z","updated_at":"2026-04-08T18:14:03.203Z","avatar_url":"https://github.com/htirawi.png","language":"TypeScript","readme":"# Frontend Interview Prep\n\nA 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.\n\n## 🚀 Features\n\n- **Multi-Framework Support**: Practice questions for Angular (227), React (80), Next.js (50), Redux (100), and Random topics (52)\n- **Interactive Quiz System**: Dynamic quiz interface with multiple question types (multiple choice, fill-in-blank, true/false, multiple checkbox)\n- **Enhanced Question Cards**: Rich markdown rendering with syntax highlighting and comparison tables\n- **Study Features**: Bookmarks, notes, progress tracking, and study timer\n- **Study Analytics**: Comprehensive performance tracking and analytics dashboard\n- **Offline Support**: Progressive Web App with offline capabilities\n- **Responsive Design**: Optimized for desktop and mobile devices\n- **Dark Mode**: Toggle between light and dark themes\n- **PWA Support**: Install as a Progressive Web App\n- **Keyboard Shortcuts**: Navigate efficiently with keyboard controls\n- **Code Quality**: Comprehensive pre-push validation system\n- **Architecture**: Clean separation of concerns with custom hooks and services\n- **Path Aliases**: Modern import organization with TypeScript path mapping\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 19, TypeScript, Tailwind CSS\n- **Build Tool**: Vite\n- **Testing**: Vitest, Testing Library\n- **Code Quality**: ESLint, Prettier, Husky, Pre-push validation\n- **Architecture**: Custom hooks, services, context API\n- **Deployment**: Vercel, Netlify ready\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/          # Reusable UI components\n│   ├── common/          # Shared components (LazyLoader, MarkdownRenderer, etc.)\n│   ├── features/        # Feature-specific components (StudyAnalytics, StatsPanel)\n│   ├── forms/           # Form components (SearchBar, FilterPanel, QuestionRating)\n│   ├── interactive-quiz/ # Interactive quiz system components\n│   ├── layout/          # Layout components (Sidebar, etc.)\n│   ├── navigation/      # Navigation components (FrameworkSelector, etc.)\n│   ├── quiz/            # Quiz components (QuizTimer, QuizProgress, etc.)\n│   ├── study/           # Study mode components\n│   └── tables/          # Table components (ComparisonTable, RegularTable)\n├── pages/              # Main application pages\n│   ├── ModeSelection.tsx\n│   ├── FrameworkSelection.tsx\n│   ├── InterviewPage.tsx\n│   ├── InteractiveQuizPage.tsx\n│   └── QuizSelection.tsx\n├── data/               # Question data and framework definitions\n│   ├── angular-enhanced.ts    # 227 Angular questions\n│   ├── react-enhanced.ts      # 80 React questions\n│   ├── nextjs-enhanced.ts     # 50 Next.js questions\n│   ├── random-enhanced.ts     # 52 Random topic questions\n│   ├── redux.ts               # 100 Redux questions\n│   └── interactive-quiz.ts    # Interactive quiz data\n├── services/           # Business logic services\n│   ├── InteractiveQuizService.ts\n│   ├── QuestionService.ts\n│   ├── QuizService.ts\n│   └── PerformanceService.ts\n├── hooks/              # Custom React hooks\n│   ├── useFrameworkManager.ts\n│   ├── useStudyAnalytics.ts\n│   └── useKeyboardShortcuts.ts\n├── contexts/           # React context providers\n│   ├── ThemeContext.tsx\n│   └── SidebarContext.tsx\n├── types/              # TypeScript type definitions\n│   ├── interactive-quiz.ts\n│   ├── quiz-results.ts\n│   ├── study-components.ts\n│   └── ui.ts\n├── core/               # Core functionality\n│   └── components/     # Core components (ErrorBoundary, etc.)\n├── shared/             # Shared utilities and components\n├── utils/              # Utility functions\n└── styles/             # Global styles and animations\n\ndocs/                   # Documentation\n├── guides/             # Setup and usage guides\n├── management/         # Project management docs\n└── status/             # Project status and completion docs\n\nscripts/                # Development and deployment scripts\n├── pre-push-validation.js  # Comprehensive validation script\n└── README.md               # Scripts documentation\n```\n\n## 🚀 Quick Start\n\n1. **Install dependencies**:\n\n   ```bash\n   pnpm install\n   ```\n\n2. **Start development server**:\n\n   ```bash\n   pnpm dev\n   ```\n\n3. **Build for production**:\n   ```bash\n   pnpm build\n   ```\n\n## 🎯 Usage\n\n### **Study Mode**\n\n1. **Select Framework**: Choose from Angular (227), React (80), Next.js (50), Redux (100), or Random topics (52)\n2. **Practice Questions**: Navigate through questions with keyboard shortcuts\n3. **Track Progress**: Bookmark questions and add personal notes\n4. **Study Modes**: Sequential, random, or bookmarked-only practice\n\n### **Interactive Quiz Mode**\n\n1. **Choose Quiz Type**: Select framework and difficulty level\n2. **Multiple Question Types**:\n   - Multiple Choice (single answer)\n   - Multiple Checkbox (multiple answers)\n   - Fill in the Blank\n   - True/False\n3. **Real-time Feedback**: Immediate scoring and progress tracking\n4. **Performance Analytics**: Detailed breakdown of performance by question type\n5. **Study Recommendations**: Personalized suggestions for improvement\n\n## 📚 Question Content\n\n### **Angular (227 Questions)**\n\n- Core concepts, components, services, routing\n- Forms (template-driven and reactive)\n- Component communication and lifecycle hooks\n- Authentication \u0026 authorization with JWT\n- Angular 16-19 features (Signals, Control Flow, SSR improvements)\n- Performance optimization and testing\n\n### **React (80 Questions)**\n\n- Hooks, state management, and lifecycle\n- Server Components and Concurrent Features\n- Error boundaries and context API\n- Performance optimization and testing\n- Advanced patterns and best practices\n\n### **Next.js (50 Questions)**\n\n- App Router vs Pages Router\n- SSG, SSR, ISR, and CSR strategies\n- Image optimization and performance\n- API routes and middleware\n- Deployment and production optimization\n\n### **Redux (100 Questions)**\n\n- State management patterns\n- Redux Toolkit and modern practices\n- Middleware and async operations\n- Testing and debugging\n\n### **Random Topics (52 Questions)**\n\n- Git workflows and advanced commands\n- CSS units, Grid, Flexbox, and animations\n- SASS features and best practices\n- TypeScript advanced features\n- Web APIs and modern JavaScript\n- Build tools (Webpack, Vite, ESBuild)\n- Docker and containerization\n\n## ⌨️ Keyboard Shortcuts\n\n- `←` `→` Navigate between questions\n- `A` Toggle answer visibility\n- `B` Bookmark/unbookmark question\n\n## 🧪 Testing\n\n```bash\n# Run tests\npnpm test\n\n# Run tests with UI\npnpm test:ui\n\n# Run tests with coverage\npnpm test:coverage\n```\n\n## 🔧 Development\n\n### **Code Quality \u0026 Validation**\n\nThis project includes a comprehensive pre-push validation system that ensures code quality before changes reach the repository.\n\n#### **Pre-Push Validation Script**\n\n```bash\n# Run comprehensive validation (automatically runs on git push)\npnpm pre-push\n\n# Individual validation checks\npnpm check:any          # Find any types in source code\npnpm check:unused       # Find unused variables\npnpm check:console      # Find console.log statements\n```\n\n#### **Standard Development Commands**\n\n```bash\n# Lint code\npnpm lint\n\n# Lint with strict rules (zero warnings)\npnpm lint:strict\n\n# Fix linting issues\npnpm lint:fix\n\n# Format code\npnpm format\n\n# Type check\npnpm type-check\n\n# Validate everything\npnpm validate\n```\n\n### **Pre-Push Validation Features**\n\nThe validation system automatically checks:\n\n- ✅ **TypeScript Compilation**: Ensures no type errors\n- ✅ **ESLint Quality**: Enforces coding standards\n- ✅ **Prettier Formatting**: Consistent code formatting\n- ✅ **Production Build**: Verifies build success\n- ✅ **Test Suite**: Runs all tests\n- ✅ **Any Type Detection**: Finds `any` types (excluding example code)\n- ✅ **Unused Variables**: Identifies unused variables and imports\n- ✅ **Console Statements**: Detects `console.log` usage\n\n### **Architecture Improvements**\n\nThe codebase has been refactored with modern React best practices:\n\n- **Path Aliases**: Clean imports using `@components`, `@services`, `@types`, etc.\n- **Custom Hooks**: `useFrameworkManager`, `useQuestionNavigation`, `useProgressManager`, `useStudyAnalytics`\n- **Services**: `FrameworkService`, `QuestionService`, `InteractiveQuizService` for business logic\n- **Context API**: `SidebarContext`, `ThemeContext` for state management\n- **Type Safety**: Comprehensive TypeScript types and interfaces\n- **Component Composition**: Reusable table components and utilities\n- **Performance**: Lazy loading, code splitting, and optimized bundles\n- **Offline Support**: Service worker integration for offline functionality\n\n## 📚 Documentation\n\n- **[📖 Complete Documentation](./docs/README.md)** - Comprehensive documentation index\n- [Architecture](./docs/development/ARCHITECTURE.md) - System design and architecture\n- [Features](./docs/development/FEATURES.md) - Detailed feature documentation\n- [Deployment](./docs/deployment/DEPLOYMENT.md) - Deployment guides\n- [Project Structure](./docs/development/PROJECT-STRUCTURE.md) - Detailed project organization\n\n## 🆕 Recent Updates\n\n### **v2.1 - Production Ready \u0026 Modern Architecture**\n\n- ✅ **Path Aliases**: Modern import organization with TypeScript path mapping\n- ✅ **Console Log Cleanup**: Removed all console.log statements from production code\n- ✅ **Interactive Quiz System**: Complete quiz interface with multiple question types\n- ✅ **Study Analytics**: Comprehensive performance tracking and analytics dashboard\n- ✅ **Offline Support**: Progressive Web App with service worker integration\n- ✅ **Component Organization**: Clean folder structure with feature-based organization\n- ✅ **Type Safety**: Enhanced TypeScript types and interfaces\n- ✅ **Performance**: Lazy loading and code splitting optimizations\n\n### **v2.0 - Pre-Push Validation System**\n\n- ✅ **Comprehensive validation**: Pre-push hooks with TypeScript, ESLint, Prettier checks\n- ✅ **Code quality enforcement**: Automatic detection of `any` types and unused variables\n- ✅ **Architecture refactoring**: Custom hooks, services, and context API\n- ✅ **Enhanced question content**: 500+ questions across all frameworks\n- ✅ **Table components**: Beautiful comparison tables for difference questions\n- ✅ **Type safety**: Comprehensive TypeScript types and interfaces\n\n### **Question Additions**\n\n- **Angular**: Added 67 new questions (Forms, Component Communication, Auth, Angular 16-19)\n- **React**: Added 53 new questions (Advanced hooks, Server Components, Concurrent Features)\n- **Next.js**: Added 40 new questions (App Router, Performance, Deployment)\n- **Random**: Added 52 new questions (Git, CSS, SASS, TypeScript, Web APIs, Build Tools)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. **Run pre-push validation**: `pnpm pre-push`\n5. Ensure all checks pass\n6. Submit a pull request\n\n### **Development Workflow**\n\n```bash\n# Before making changes\ngit checkout -b feature/your-feature\n\n# Make your changes, then validate\npnpm pre-push\n\n# Commit and push (validation runs automatically)\ngit add .\ngit commit -m \"feat: your changes\"\ngit push\n```\n\n## 🎯 Benefits of Pre-Push Validation\n\n- **🛡️ Quality Assurance**: Prevents bad code from reaching the repository\n- **⚡ Faster Development**: Automated checks instead of manual code review\n- **🔄 Consistency**: Ensures all team members follow the same standards\n- **🐛 Early Bug Detection**: Catches issues before they become problems\n- **📚 Learning**: Developers learn best practices through validation feedback\n- **🚀 Production Ready**: Ensures code is always deployable\n\n## 📊 Project Statistics\n\n- **Total Questions**: 500+ across 5 categories\n- **Code Quality**: 95/100 production readiness score\n- **Test Coverage**: Comprehensive test suite\n- **Type Safety**: 100% TypeScript coverage\n- **Performance**: Optimized for fast loading and smooth UX\n\n## 📄 License\n\nMIT License - see [LICENSE](./LICENSE) for details.\n\n## 👨‍💻 Author\n\n**Hussein Tirawi** - [GitHub](https://github.com/htirawi)\n\n---\n\nBuilt with ❤️ for the frontend developer community.\n\n_Last updated: January 2025 - Pre-Push Validation System v2.0_\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtirawi%2Ffrontend-interview-prep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtirawi%2Ffrontend-interview-prep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtirawi%2Ffrontend-interview-prep/lists"}