Live Demo: https://dsa-study-hub.vercel.app

DSA Study Hub is an interactive educational web application designed to help students master Data Structures and Applications (DSA). It features a modern, responsive interface where users can view C source code for standard laboratory programs and run interactive simulations of those algorithms directly in the browser.

An integrated portfolio section to showcase My details.

View C code and run simulations (like Stack Operations) instantly.

Interactive Path Finder

Interactive Sorting Algorithms Visualization

Visualizing Tree Traversals and Graph Algorithms

• Interactive Program Simulators: Visualize and interact with algorithms logic (e.g., Stack operations, Graph traversals) without needing a C compiler.
• Code Repository: Access full, copy-ready C source code for 12+ standard DSA programs.
• Modern Cyberpunk UI/UX:
  • Immersive Theming: Fully customized sci-fi aesthetic with neon glow effects, floating background nodes, and sleek micro-animations using Tailwind CSS.
  • Dark/Light Mode toggle for comfortable reading.
  • Responsive Design for all devices.
  • Copy-to-Clipboard functionality for all code snippets.
  • Custom Error Handling: Thematic "System Breach" 404 error page to maintain immersion.
• Portfolio Section: Integrated "About Me" section for instructor/student details.

• Framework: Next.js (v16, Pages Router)
• Frontend: React (v19)
• Language: TypeScript
• Backend: Express.js with MongoDB (Mongoose)
• Message Queue: KafkaJS
• Auth: JWT, Google OAuth, Magic Links
• Styling: Tailwind CSS
• Icons: Lucide React
• Infrastructure: Docker Compose (App + MongoDB + Kafka)

The application includes simulations and source code for the following topics:

1. Weekly Calendar: Struct usage and dynamic memory allocation.
2. String Operations: Pattern matching and replacement.
3. Stack Operations: Push, pop, and palindrome check.
4. Expression Conversion: Infix to Postfix conversion.
5. Recursion:
   • 5A: Postfix Evaluation.
   • 5B: Tower of Hanoi.
6. Circular Queue: Array-based implementation.
7. Singly Linked List (SLL): Student data management.
8. Doubly Linked List (DLL): (Placeholder).
9. Polynomials: Addition and evaluation using Linked Lists.
10. Binary Search Tree (BST): Creation, traversal (Inorder/Preorder/Postorder), and search.
11. Graph Algorithms: BFS (Breadth-First Search) and DFS (Depth-First Search).
12. Hashing: Hash table implementation with linear probing.

Follow these steps to run the project locally on your machine.

• Node.js (v18 or higher)
• pnpm (Performant NPM)

1. Clone the repository:

   git clone https://github.com/yourusername/dsa-study-hub.git
   cd dsa-study-hub

2. Install dependencies:

   pnpm install
   cd server && pnpm install && cd ..

3. Set up environment variables:

   cp .env.example .env
   # Edit .env with your own credentials

4. Run the development server:

   pnpm run dev

5. Open in Browser: Click the link shown in the terminal (usually http://localhost:3000) to view the app.

Our development journey with DSA Study Hub has been a rich learning experience, blending core algorithmics with modern full-stack practices. Here are the key technical insights and breakthroughs we've achieved:

• Hardened Security Middleware: Learned to implement custom Next.js middleware to patch critical security vulnerabilities (such as CVE #16, #17, and #19) related to request smuggling and CSRF bypasses.
• Safe Multi-Language Code Execution: Developed a secure server-side sandbox to compile and execute arbitrary user-submitted code (C, C++, Java, Python). This involved managing temporary file environments and handling child_process spawns with strict timeout and resource limits.
• Full-Stack Orchestration: Mastered the integration of a Next.js (Pages Router) frontend with a persistent Express/MongoDB backend, utilizing JWT-based session management and CSRF-seeding for enhanced security.
• Interactive Algorithm Logic: Transformed complex, static C-language data structures into dynamic, state-driven React/TypeScript visualizers (including Sorting, Pathfinding, Knapsack, and Tree/Graph traversal).
• Synergistic Visual Documentation: Adopted a "Documentation-as-Code" approach by integrating architecture diagrams directly into the repository, ensuring system designs evolve alongside implementation.
• Automated Developer Storytelling: Leveraged GitHub Metrics to showcase project impact and technical proficiency, overcoming SVG rendering challenges through streamlined workflow optimization.
• Advanced Thematic UI/UX Design: Successfully built and orchestrated a cohesive, complex cyberpunk design system using Tailwind CSS. This involved engineering global ambient background animations, custom glassmorphism panels, and harmonizing color palettes (migrating off default themes to custom glowing cyan and emerald) across 15+ independent interactive visualizer components.

Contributions are welcome! If you have better C code examples or want to improve the simulations:

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
3. Commit your Changes (git commit -m 'Add some AmazingFeature').
4. Push to the Branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

This project is licensed under the GPL License - see the GPL LICENSE file for details.