AlgoCrack is a comprehensive, full-stack coding platform designed to provide a seamless user experience for writing, executing, and managing code submissions in real-time. Built with modern web technologies, it supports real-time code execution, user authentication, role-based access, and an admin dashboard for problem management and analytics.
-
Real-Time Code Execution:
Execute code in multiple languages directly in the browser with instant results. -
Monaco Editor Integration:
Provides an advanced, VS Code-like in-browser code editor with syntax highlighting and IntelliSense. -
PrismJS Syntax Highlighting:
Enhanced highlighting for submitted code snippets and saved solutions. -
User Profiles:
Detailed profile pages where users can upload dynamic profile and cover images via Cloudinary. -
Submission Tracking:
Keep a detailed history of all your code submissions and track your progress over time. -
Authentication & Authorization:
- Secure JWT-based login and session management.
- Role-based access control to differentiate between normal users and admins.
-
Admin Dashboard:
Manage coding problems, review user activities, and access detailed analytics on platform usage and submissions. -
State Management with Redux:
Efficient and scalable state management reducing API calls and improving UX responsiveness. -
Responsive UI:
Built with Tailwind CSS and enhanced with Framer Motion for smooth animations and transitions. -
Media Upload via Cloudinary:
Efficient and scalable uploading and hosting of user profile and cover images. -
Deployment:
- Backend hosted on Render for reliability.
- Frontend hosted on Vercel for fast CDN delivery and smooth user experience.
| Frontend | Backend | DevOps & Tools |
|---|---|---|
| ReactJS | Node.js | Render (Backend host) |
| Redux (State Management) | Express.js | Vercel (Frontend host) |
| Tailwind CSS (Styling) | MongoDB | Cloudinary (Media) |
| Framer Motion (Animations) | JWT (Auth) | GitHub (Code Repo) |
| React Query (API Caching) | Judge0 Api | |
| Monaco Editor (Code Editor) | ||
| PrismJS (Syntax Highlighting) |
Add screenshots below to illustrate key features such as:
- Landing/Home Page
- Code Editor with Monaco Editor
- Profile Page with Image Upload
- Admin Dashboard and Analytics
- Submission List and Code Output
Embed a walkthrough/demo video below.
-
How to Add:
Upload your demo video to YouTube or another public platform and embed the video link here.Example (YouTube Markdown Embed):
[(https://www.youtube.com/watch?v=C0J3nvFO2Ok&autoplay=1)]
- Backend GitHub Repository
- Frontend GitHub Repository
Replace#with the actual URLs of your GitHub repos.
- JWT Authentication: Ensures stateless, secure user sessions.
- Role-Based Access Control: Only users with admin roles can access sensitive routes and management dashboards.
- Secure API: All endpoints are protected via middleware validating authentication and authorization.
- Password Security: User passwords are hashed using industry standards before database storage.
git clone <backend-repo-url>
git clone <frontend-repo-url>
Navigate into each repository folder and install dependencies:
cd backend
npm install
cd ../frontend
npm install
Create .env files in both backend and frontend with the following variables.
PORT=5000 MONGODB_URI= JWT_SECRET= CLOUDINARY_CLOUD_NAME= CLOUDINARY_API_KEY= CLOUDINARY_API_SECRET=
REACT_APP_API_BASE_URL=http://localhost:5000/api
text
Adjust URLs and keys according to your environment and deployment.
In separate terminal windows or tabs:
- Start Backend:
cd backend npm run dev
- Start Frontend:
cd frontend npm start
The frontend will usually run on http://localhost:3000 and the backend on the port specified in your .env.
controllers/– Route controllers managing request logicmodels/– Mongoose schemas and modelsroutes/– API endpoints (users, auth, problems, submissions)middleware/– Authentication and authorization middlewareutils/– Helper functions (e.g., Cloudinary uploader)server.js– Application entry point
src/components/– Reusable UI components (Editor, Dashboard, Profile)src/pages/– Page-level components (Home, Login, Admin)src/redux/– Redux slices and store setupsrc/api/– API client configurations using React Querysrc/styles/– Tailwind CSS configurations and custom stylessrc/App.js– Root component with routing
- Passwords are never stored in plain text; they use bcrypt hashing.
- JWT tokens are signed with a strong secret and include expiration.
- API endpoints are protected with authentication and role checks.
- File uploads are validated before processing with Cloudinary.
- Rate limiting can be added to prevent brute force attacks (recommended for production).
Ankur Mukherjee
https://www.linkedin.com/in/ankur73 | Your Personal Website
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions to AlgoCrack are welcome! If you have ideas, bug fixes, or features, please:
- Fork the repositories.
- Create a new branch (
git checkout -b feature/your-feature). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/your-feature). - Open a Pull Request and describe your changes.
Please make sure your code follows existing style guidelines and passes all tests.
- Monaco Editor Documentation
- PrismJS Syntax Highlighting
- Tailwind CSS Docs
- React Query
- Cloudinary Upload API
Thank you for checking out AlgoCrack! Happy coding! 🚀