Tagline: Sharpen your JavaScript skills — one random question at a time.
A modern, interactive web application for practicing JavaScript concepts through randomized coding challenges. Perfect for developers looking to improve their JavaScript knowledge with hands-on practice.
- Random Question Generator: Practice with questions covering arrays, scope, closures, promises, and more
- Difficulty Levels: Choose from Beginner, Intermediate, or Advanced challenges
- Category Filtering: Focus on specific topics like Functions, Objects, Async/Await, etc.
- Interactive Code Editor: Powered by Monaco Editor with syntax highlighting and auto-formatting
- Real-time Code Execution: Run your JavaScript code safely in a sandboxed environment
- Instant Feedback: Compare your output with expected results
- Smart Hint System: Get contextual hints when you're stuck
- Detailed Explanations: Understand the "why" behind each answer
- Progress Tracking: Monitor your score and current streak
- Gamification: Streak counters and score tracking to keep you motivated
- Dark/Light Mode: Toggle between themes for comfortable coding
- Responsive Design: Works seamlessly on desktop, tablet, and mobile
- Clean Interface: Distraction-free environment focused on learning
| Purpose | Technology |
|---|---|
| Frontend | React 18 + Vite |
| Code Editor | Monaco Editor (VS Code's editor) |
| Styling | Material UI + Custom CSS |
| Icons | Lucide React |
| Code Execution | Safe JavaScript eval with custom console |
| Build Tool | Vite |
- Node.js 16+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd js-challenge-lab
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173(or the port shown in your terminal)
npm run buildThe built files will be in the dist directory, ready for deployment.
- Variables: Basic variable assignment and primitives
- Arrays: Array methods, manipulation, and iteration
- Strings: String methods and manipulation
- Objects: Object properties, methods, and references
- Functions: Function declarations, expressions, and scope
- Scope: Variable scope, hoisting, and closure concepts
- Closures: Advanced closure patterns and use cases
- Promises: Asynchronous programming with Promises
- Async/Await: Modern async programming patterns
- Prototypes: Prototype chain and inheritance
- Operators: Type coercion and operator behavior
- Boolean: Truthy/falsy values and boolean logic
- Array Methods: map, filter, reduce, and other array methods
- Destructuring: Object and array destructuring patterns
- Select Your Level: Choose from Beginner, Intermediate, or Advanced
- Pick a Category: Focus on specific JavaScript concepts or select "All"
- Read the Question: Understand what the code should output
- Write/Modify Code: Use the Monaco editor to write your solution
- Run Your Code: Click "Run Code" to execute and see results
- Get Feedback: Compare your output with the expected result
- Learn More: Use hints and explanations to understand concepts
- Track Progress: Monitor your score and maintain your streak!
src/
├── components/
│ ├── CodeEditor.jsx # Monaco editor wrapper
│ ├── QuestionDisplay.jsx # Question rendering component
│ ├── ResultDisplay.jsx # Results and feedback component
│ └── ProgressBar.jsx # Progress tracking (optional)
├── data/
│ └── questions.js # Question database
├── App.jsx # Main application component
├── index.css # Global styles and Tailwind imports
└── main.jsx # React application entry point
Edit src/data/questions.js to add new challenges:
{
id: 15,
difficulty: "intermediate",
category: "Arrays",
question: "What will be the output of the following code?",
starterCode: `const arr = [1, 2, 3];
console.log(arr.push(4));`,
expectedOutput: "4",
hint: "The push method returns the new length of the array.",
explanation: "Array.push() adds elements to the end and returns the new length."
}The app uses Tailwind CSS with custom color schemes defined in tailwind.config.js. You can customize:
- Color palette
- Dark mode behavior
- Component styling
- Responsive breakpoints
The code execution system uses a safe new Function() approach with a mocked console object. For production use, consider additional security measures.
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Add your changes and new questions
- Commit your changes:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
- Add more JavaScript questions and categories
- Implement user accounts and progress saving
- Add support for TypeScript challenges
- Create a leaderboard system
- Add question difficulty ratings from users
- Implement spaced repetition algorithm
This project is open source and available under the MIT License.
- Built with React and Vite
- Code editor powered by Monaco Editor
- Styled with Material UI and Custom CSS
- Icons from Lucide
Happy Coding! 🎉 Start sharpening your JavaScript skills today with JS Challenge Lab!
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.