CrackTheCode - DSA Learning Platform

A comprehensive Data Structures and Algorithms learning platform featuring interactive visualizations, progress tracking, and a curated problem set. Built with Node.js, Express, MongoDB, and React.

Features

• Interactive Problem Solving: Browse and solve DSA problems across multiple categories
• Visual Learning: Real-time algorithm visualizations for arrays, trees, graphs, and sorting
• Progress Tracking: Monitor your learning journey with detailed statistics
• Difficulty Levels: Problems categorized as Easy, Medium, and Hard
• Personal Notes: Add notes to each problem for future reference
• User Authentication: Secure JWT-based authentication system

Tech Stack

Backend:

• Node.js & Express
• MongoDB with Mongoose
• JWT Authentication
• bcryptjs for password hashing

Frontend:

• React 18
• React Router for navigation
• Axios for API calls
• Canvas API for visualizations

Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/anushreejha/CrackTheCode
cd CrackTheCode

2. Setup Backend

cd server
npm install

Create .env file in server directory:

PORT=5000
MONGO_URI=mongodb://localhost:27017/crackthecode
JWT_SECRET=<your-api-key>

3. Setup Frontend

cd client
npm install

Create .env file in client directory:

REACT_APP_API_URL=http://localhost:5000/api

Running the Application

1. Start MongoDB (if running locally)

mongod

2. Start Backend Server

cd server
npm start

Server runs on http://localhost:5000

3. Start Frontend

cd client
npm start

Client runs on http://localhost:3000

Project Structure

CrackTheCode/
├── server/ # Backend application
│ ├── models/ # Mongoose schemas
│ ├── routes/ # API routes
│ ├── middleware/ # Custom middleware
│ ├── config/ # Configuration files
│ └── server.js # Entry point
├── client/ # Frontend application
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ ├── utils/ # Utility functions
│ │ └── App.js # Main app component
│ └── public/ # Static files
└── README.md

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user

Problems

• GET /api/problems - Get all problems (with filters)
• GET /api/problems/:id - Get single problem

Progress

• GET /api/progress - Get user progress
• POST /api/progress - Update problem progress

Usage

1. Register/Login: Create an account or login
2. Browse Problems: View problems filtered by difficulty and category
3. Solve Problems: Click on a problem to view details, hints, and solution
4. Visualize: Use interactive visualizations to understand algorithms
5. Track Progress: Mark problems as attempted or solved
6. Add Notes: Keep personal notes for each problem

Future Enhancements

• Code editor with syntax highlighting
• Test case execution
• Discussion forums
• Leaderboards
• More visualization types
• Mobile app