c-playground-web-edition.vercel.app
A modern web-based interactive C programming learning platform with games, tutorials, calculators, and user management. This is the web version of the original C desktop application, rebuilt with modern web technologies.
CPlayground Web Edition is a complete rewrite of my original C-based desktop application into a modern web platform. The original C version (available in another repository) was a command-line application that provided:
- User authentication with SHA-256 hashing
- C programming tutorials
- Interactive games (Number guessing, Tic-Tac-Toe)
- Basic calculators
- User profile management
This web version takes all the core functionality and enhances it with:
- Modern web interface with responsive design
- Interactive code editor with syntax highlighting
- Enhanced games with AI opponents
- Comprehensive tutorials with quizzes
- Advanced calculators (Matrix, Quadratic solver)
- User profiles with XP and achievements
- Admin dashboard for user management
- Secure user registration and login
- SHA-256 password hashing using Web Crypto API
- Persistent sessions with localStorage
- Email registration support
- Real-time syntax highlighting for C code
- Code execution simulation
- Output panel mimicking terminal behavior
- Save and run functionality
- Number Guessing Game: Guess numbers with hints and statistics
- Tic-Tac-Toe with AI: Play against smart AI with multiple difficulty strategies
- Real-time game statistics tracking
- Win/loss tracking integrated with user profiles
- C Programming Tutorials:
- C Language Basics
- Pointers & Memory Management
- Data Structures
- Interactive Quizzes: Test your knowledge with immediate feedback
- Code Examples: Ready-to-use C code snippets
- Basic Calculator: Arithmetic operations
- Quadratic Equation Solver: Shows discriminant and complex roots
- Matrix Calculator: 2x2 matrix operations (addition & multiplication)
- Personal statistics dashboard
- XP and leveling system
- Achievement tracking
- Activity history
- Editable user bio
- User management system
- Platform statistics dashboard
- Data export functionality
- User activity monitoring
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/cplayground-web.git cd cplayground-web -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run buildThe build files will be in the dist directory.
cplayground-web/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── CodeEditor.tsx # Code editor interface
│ │ ├── LoginForm.tsx # Authentication forms
│ │ ├── SignupForm.tsx
│ │ ├── GamePanel.tsx # Games interface
│ │ ├── TutorialPanel.tsx # Learning materials
│ │ ├── CalculatorPanel.tsx # Calculator suite
│ │ ├── ProfilePanel.tsx # User profiles
│ │ └── AdminPanel.tsx # Admin dashboard
│ ├── types/ # TypeScript definitions
│ ├── utils/ # Utility functions
│ ├── App.tsx # Main application component
│ ├── index.css # Global styles
│ └── main.tsx # Application entry point
├── index.html # HTML template
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
├── tailwind.config.js # Tailwind CSS config
└── vite.config.ts # Vite configuration
Uses CodeMirror to provide a real code editing experience with syntax highlighting, line numbers, and bracket matching.
Implements the same SHA-256 hashing algorithm from the original C application, adapted for the web using the Web Crypto API.
The Tic-Tac-Toe AI uses a three-tier strategy:
- Try to win immediately
- Block opponent's winning moves
- Make strategic moves (center first, then corners)
Uses browser localStorage to mimic the file-based persistence from the original C application.
- Built as a single-file C program (
cplayground.c) - Terminal-based interface
- File-based data storage (
data/users.db) - SHA-256 implementation in pure C
- Compiled with GCC
- Frontend: React + TypeScript for type safety
- Styling: Tailwind CSS for rapid UI development
- Code Editor: CodeMirror for professional editing experience
- State Management: React hooks for component state
- Persistence: localStorage for client-side data storage
- Authentication: Web Crypto API for SHA-256 hashing
- Modern UI/UX: Gradients, animations, responsive design
- Interactive Elements: Hover effects, modals, tooltips
- Gamification: XP system, achievements, level progression
- Admin Tools: User management, data export, statistics
- Learning Materials: Interactive tutorials with quizzes
The application is fully responsive and works on:
- Desktop computers (≥1024px)
- Tablets (≥768px)
- Mobile phones (≥320px)
- Client-side SHA-256 password hashing
- Input validation on all forms
- Protected admin routes
- XSS prevention through React's built-in escaping
- No sensitive data in localStorage (only hashed passwords)
- Dark theme for reduced eye strain during coding sessions
- Terminal-inspired aesthetics to maintain the C programming feel
- Consistent color scheme with semantic colors:
- Blue: Information and actions
- Green: Success and positive feedback
- Red: Errors and warnings
- Purple: Features and special elements
- Minimalist interface focusing on functionality
Contributions are welcome! Please feel free to submit a Pull Request.
- 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.
- Original Inspiration: My C programming journey that led to the original CPlayground
- CodeMirror: For the excellent code editor component
- Lucide Icons: For the beautiful icon set
- Tailwind CSS: For making styling enjoyable
- React & TypeScript Communities: For amazing tools and documentation
Give a ⭐️ if this project helped you!
Built with ❤️ by [Alaa Younsi]
Transforming C code into a modern web experience
- CPlayground (Original C Version) - The original terminal-based C application
- Add backend API with Node.js/Express
- Implement real C code compilation
- Add multiplayer games
- Create mobile app versions
- Add more programming languages
- Implement social features
- Add code challenge competitions
Note: This is a frontend-only application. All data is stored locally in the browser. For a production version with backend support, additional development would be needed.