Project Overview

This project is an interactive interview preparation tool built using React.
It allows users to practice HTML, CSS, JavaScript, and React interview questions in a structured and efficient way.
The system includes search, filtering, bookmarking, progress tracking, and show/hide answers, all inside a clean and responsive interface.

Screenshots

Key Features

1. Search and Filter System
   • Filter by category (HTML, CSS, JavaScript, React)
   • Filter by difficulty (Easy, Medium, Hard)
   • Real-time search
2. Detailed Answers
   • Over 150 questions
   • Clear explanations
3. Bookmark System
   • Mark questions as favorites
   • Separate bookmarked section
   • Data saved in LocalStorage
4. Show / Hide Answers
   • Answers hidden initially
   • Toggle visibility
5. Study Tools
   • Play, pause, and reset timer
   • Tracks study time
6. Progress and Statistics
   • Total questions
   • Viewed questions
   • Number of bookmarks
7. Responsive Interface
   • Works on desktop and mobile
   • Clean, modern layout

Functionality

1. Data Loading
2. Filters
   • Category, difficulty, and search work together
   • Controlled with React state and useEffect
3. Bookmarking
   • Bookmark icon adds or removes a question
   • Data stored in LocalStorage
   • Bookmarks remain after page refresh
4. Show / Hide Answers
   • Each question has a toggle state
   • Allows clean and distraction-free studying
5. Timer
   • Implemented using setInterval
   • Play, pause, and reset functions
6. Progress Tracking

Technology Used

• React.js
• JavaScript (ES6+)
• HTML5
• CSS3
• Bootstrap (optional)
• Lucide-react Icons
• LocalStorage

Why This Project Is Useful

• Helps students prepare for frontend interviews
• Organizes questions for fast revision
• Demonstrates strong React skills
• Shows understanding of state, hooks, and dynamic filtering
• Works as a practical portfolio project

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.