🚀 Interactive Coding Challenge Platform for Learning & Debugging Skills
Code Debugging Challenges is an interactive educational tool designed to enhance debugging skills through coding challenges.
It provides students and developers with a dynamic platform to identify and describe bugs in code snippets across multiple programming languages, with real-time feedback and performance tracking.
| 🎯 Core Functionality | 🔧 Technical Features |
|---|---|
| ✅ Multi-Language Support: JavaScript, Java, Python, C | ✅ Syntax Highlighting: Powered by Shiki with GitHub themes |
| ✅ Interactive Challenges: Identify bugs in code snippets | ✅ Responsive Design: Mobile and desktop support with Chakra UI |
| ✅ Hint System: Up to 3 hints per challenge | ✅ Real-time Feedback: Success/error toasts with dismissal |
| ✅ Accuracy Tracking: Monitor correct answers and success rate | ✅ Modern UI: Dark theme with purple accents, 2xl border radius |
| ✅ Result Dialog: Displays final accuracy upon completion | ✅ Error Handling: Robust answer validation and state management |
- Challenge Display: Presents code snippets with bugs for users to identify.
- Answer Submission: Allows users to describe bugs, checked against an array of valid answers.
- Hint System: Provides up to 3 hints per challenge to assist users.
- Accuracy Tracker: Calculates and displays the percentage of correct answers.
- Result Dialog: Shows final accuracy and options to play again or return home after completing 5 challenges.
🛠️ Development Environment
 Node.js Required for running the application |
 React Framework for building the UI |
📁 Required Dependencies
@chakra-ui/react → UI components and styling
shiki → Syntax highlighting for code blocks
react-router-dom → Navigation for Home button
react-icons → Icons for buttons and UI elements
git clone https://github.com/icodecedd/debugging-dojo.git
cd debugging-dojo# Install all required npm packages
npm install# Start the development server
npm start || npm run dev- Open your browser and navigate to
http://localhost:5173. - Start solving coding challenges by identifying bugs in the provided code snippets.
We enthusiastically welcome contributions from the community! Here's how you can help improve this project:
| 🐛 Bug Reports | 📖 Documentation | 💻 Code Contributions | 🎨 Enhancements |
|---|---|---|---|
| Report issues and bugs | Improve README content | Add new challenges | Enhance UI/UX |
| Suggest improvements | Add code comments | Optimize answer checking | Add animations |
| Test on different browsers | Create tutorials | Improve performance | Add new languages |
- Fork the repository
- Create a feature branch (
git checkout -b feature-name) - Commit your changes (
git commit -m 'Add new feature') - Push to your branch (
git push origin feature-name) - Open a Pull Request
