SDEverse

Collaborative Platform for Data Structures & Algorithms Learning

Overview • Features • Quick Start • Tech Stack • Contributing • Contributors

---

Overview

SDEverse is an open-source collaborative platform designed to help Software Development Engineers master Data Structures and Algorithms (DSA). Built with modern web technologies, it provides an interactive learning environment with comprehensive resources, community-driven content, and practical coding implementations.

Built for developers, students, competitive programmers, and anyone preparing for technical interviews.

Key Capabilities

• Interactive Learning - Comprehensive DSA topics with visual explanations
• Multi-Language Support - Code implementations in C++, Python, Java, and JavaScript
• Community Contributions - User-driven content creation and review system
• Real-time Discussions - Comment system for collaborative learning
• Admin Dashboard - Content management and analytics
• Responsive Design - Seamless experience across all devices
• Modern UI/UX - Clean, intuitive interface with dark/light themes

Features

Learning & Content

• Comprehensive Algorithm Library - Sorting, searching, graph algorithms, dynamic programming, and more
• Data Structure Implementations - Arrays, linked lists, trees, graphs, heaps, hash tables, etc.
• Multi-Language Code Samples - View implementations in your preferred programming language
• Complexity Analysis - Time and space complexity for each algorithm and operation
• Real-world Applications - Practical use cases and problem-solving examples
• Visual Explanations - Step-by-step algorithm visualizations

Community & Collaboration

• Proposal System - Submit new algorithms and data structures for community review
• Comment Discussions - Engage with other learners on specific topics
• User Profiles - Track contributions and learning progress
• Review Workflow - Community-moderated content approval process
• Feedback System - Help improve the platform with suggestions

Technical Features

• Advanced Search - Find algorithms and data structures quickly
• Category Organization - Content organized by type and difficulty
• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Performance Optimized - Fast loading times and smooth interactions
• SEO Friendly - Optimized for search engine discoverability

Administrative Tools

• Content Management - Admin panel for managing algorithms and data structures
• User Management - User roles and permissions system
• Analytics Dashboard - Track platform usage and engagement
• Notification System - Keep users informed about updates and activities

Tech Stack

Important for Contributors: Understanding our tech stack helps you get started quickly!

Frontend

• Framework: React 19.1.0 with Vite
• State Management: Redux Toolkit with RTK Query
• Styling: Tailwind CSS 4.1.14
• Animations: Framer Motion 12.23.22
• Code Editor: Monaco Editor (VS Code editor)
• Markdown: React Markdown with syntax highlighting
• Math Rendering: KaTeX for mathematical expressions
• Icons: Lucide React, React Icons
• Charts: Recharts for data visualizations

Backend

• Runtime: Node.js with Express.js 5.1.0
• Database: MongoDB with Mongoose ODM
• Authentication: JWT with bcryptjs
• Validation: Express Validator
• CORS: Cross-origin resource sharing
• Environment: dotenv for configuration

Development Tools

• Build Tool: Vite for fast development and building
• Linting: ESLint for code quality
• Package Manager: npm
• Version Control: Git & GitHub
• Deployment: Vercel (frontend), Railway/Heroku (backend)

Key Libraries

Library	Purpose	Version
react	Frontend framework	^19.1.0
@reduxjs/toolkit	State management	^2.9.0
express	Backend framework	^5.1.0
mongoose	MongoDB ODM	^8.19.1
@monaco-editor/react	Code editor	^4.7.0
tailwindcss	CSS framework	^4.1.14
framer-motion	Animations	^12.23.22
react-markdown	Markdown rendering	^10.1.0

Architecture Overview

                    ┌─────────────────────────────────────┐
                    │         React Frontend              │
                    │                                      │
                    │  ┌──────────────┐  ┌──────────────┐  │
                    │  │    Pages     │  │  Components  │  │
                    │  │              │  │              │  │
                    │  └──────┬───────┘  └──────┬───────┘  │
                    │         │                 │          │
                    │  ┌──────┴─────────────────┴───────┐  │
                    │  │       Redux Store (RTK)        │  │
                    │  └────────────────┬───────────────┘  │
                    └───────────────────┼──────────────────┘
                                        │
                                        │ REST API (HTTPS)
                                        │ JWT Authentication
                                        │
                    ┌───────────────────▼──────────────────┐
                    │      Express.js Backend              │
                    │                                      │
                    │  ┌────────────┐   ┌──────────────┐  │
                    │  │   Routes   │   │ Controllers  │  │
                    │  │            │──▶│              │  │
                    │  └────────────┘   └──────┬───────┘  │
                    │                          │          │
                    │  ┌────────────┐          │          │
                    │  │Middleware  │          │          │
                    │  │(Auth, CORS)│          │          │
                    │  └────────────┘          │          │
                    └─────────────────────────┼───────────┘
                                              │
                                              ▼
                              ┌─────────────────────────┐
                              │   MongoDB Database      │
                              │                         │
                              │  • Users                │
                              │  • Algorithms           │
                              │  • DataStructures       │
                              │  • Proposals            │
                              │  • Comments             │
                              │  • Notifications        │
                              │  • Feedback             │
                              └─────────────────────────┘

Quick Start

For Users

Visit the Live Platform 🌟

1. Visit SDEverse
2. Create an account or login
3. Explore algorithms and data structures
4. Join discussions and contribute content

For Developers

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or cloud instance)
• Git

Backend Setup

# Clone repository
git clone https://github.com/Harshdev625/SDEverse.git
cd SDEverse/server

# Install dependencies
npm install

# Configure environment variables
cp .env.example .env
# Edit .env and set:
# - MONGO_URI=mongodb://localhost:27017/sdeverse
# - JWT_SECRET=your-secret-key
# - PORT=5000

# - CLOUDINARY_CLOUD_NAME=
# - CLOUDINARY_API_KEY=
# - CLOUDINARY_API_SECRET=

# Start development server
npm run dev

Frontend Setup

# Navigate to client directory
cd ../client

# Install dependencies
npm install

# Configure environment variables
cp .env.example .env
# Edit .env and set:
# - VITE_API_BASE_URL=http://localhost:5000/api

# Start development server
npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

Testing & Coverage

Run Frontend Tests

cd client
npm test
npm run test:coverage
npm run test:ui

Run Backend Tests

cd server
npm test
npm run test:coverage
npm run test:ui

Coverage HTML Reports (Browser Page)

• Frontend: client/coverage/index.html
• Backend: server/coverage/index.html

Run coverage first, then open these HTML files in your browser for detailed file-by-file results.

📁 Project Structure

SDEverse/
├── client/                   # React frontend
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── components/      # Reusable components
│   │   │   ├── code/        # Code display components
│   │   │   ├── forms/       # Form components
│   │   │   └── ui/          # UI components
│   │   ├── features/        # Redux slices & API
│   │   │   ├── algorithm/   # Algorithm management
│   │   │   ├── auth/        # Authentication
│   │   │   ├── user/        # User management
│   │   │   └── ...          # Other features
│   │   ├── pages/           # Page components
│   │   ├── utils/           # Utility functions
│   │   └── App.jsx          # Main app component
│   ├── package.json
│   └── vite.config.js       # Vite configuration
│
├── server/                  # Node.js backend
│   ├── controllers/         # Request handlers
│   ├── middleware/          # Express middleware
│   ├── models/              # MongoDB schemas
│   ├── routes/              # API routes
│   ├── utils/               # Utility functions
│   ├── server.js            # Server entry point
│   └── package.json
│
├── docs/                    # Documentation
├── .github/                 # GitHub templates & workflows
├── README.md               # This file
├── LICENSE                 # MIT license
├── CONTRIBUTING.md         # Contribution guidelines
└── CODE_OF_CONDUCT.md      # Community guidelines

📚 Documentation

🔌 API Endpoints

🔐 Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - User login
• GET /api/auth/profile - Get user profile
• PUT /api/auth/profile - Update user profile

📊 Algorithms

• `GET /api/algorith