PyCodeChallenger is a modern, interactive web application designed to help me and fellow Python developers master the fundamentals of Python through hands-on coding challenges. Built with React, TypeScript, and Tailwind CSS, this platform offers a smooth and responsive learning experience with Python code execution powered by Pyodide. It's completely free, requires no sign-up, and is perfect for practicing Python anytime, anywhere.
- 🎯 Structured Learning: Progress through carefully crafted Python challenges from beginner to advanced levels
- ⚡ Instant Feedback: Get immediate results with comprehensive test cases and detailed explanations
- 🐍 Real Python Execution: Run actual Python code in the browser using Pyodide
- 🏆 Track Progress: Monitor your improvement and celebrate completed challenges
- 🌙 Dark/Light Mode: Toggle between themes for comfortable coding sessions
- 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- 💾 Progress Persistence: Your completed challenges are saved locally
- Frontend: React, TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Build Tool: Vite
- Code Editor: Monaco Editor (VS Code editor in the browser) with Python syntax highlighting
- Python Runtime: Pyodide (Python running in WebAssembly)
- State Management: React Hooks (useState, useEffect)
- Node.js (version 16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/rafiframadhana/py-code-challenger.git
cd py-code-challenger- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
- Arrays: Array manipulation, iteration, and common methods
- Functions: Function declaration, parameters, and return values
- Loops: for, while, and do-while loops
- Conditionals: if/else statements and switch cases
- Objects: Object creation, property access, and methods
- String Manipulation: String methods and pattern matching
- Error Handling: Try/catch blocks and error management
- Recursion: Recursive algorithms and problem-solving
- Algorithms: Sorting, searching, and optimization
- Data Structures: Working with complex data structures
- Start Coding: Click "Start Coding Challenges" on the landing page
- Choose a Challenge: Select from the sidebar organized by difficulty and topic
- Write Your Code: Use the built-in code editor to implement your solution
- Test Your Solution: Run your code against test cases for instant feedback
- Track Progress: Completed challenges are marked and saved automatically
- Syntax highlighting for JavaScript
- Auto-completion and IntelliSense
- Real-time error detection
- Resizable panels for optimal workflow
- Local storage persistence
- Visual indicators for completed challenges
- Progress reset functionality
- Challenge completion statistics
- Mobile-friendly interface
- Adaptive layouts for different screen sizes
- Touch-friendly controls
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Rafif Ramadhana
- GitHub: @rafiframadhana
- Portfolio: rafiframadhana.site
Happy Coding! 🎉