AlgoVista 🚀

An Interactive Learning Platform for Data Structures and Algorithms

AlgoVista is a comprehensive web application designed to help students and developers master Data Structures and Algorithms (DSA) through interactive learning, visual representations, and hands-on practice.

🌟 Features

Core DSA Topics

• Linked Lists - Singly, Doubly, and Circular implementations
• Stacks - LIFO operations with practical examples
• Graphs - Traversal algorithms (BFS, DFS) with visual representations
• Hashing - Hash tables, collision handling, and applications
• Searching Algorithms - Binary Search and Linear Search implementations

Interactive Learning Experience

• 📚 Comprehensive Theory - Detailed explanations for each topic
• 🎯 Pre & Post Tests - Assess your knowledge before and after learning
• 🎨 Visual Representations - Interactive graphical demonstrations
• 💻 Code Implementation - Real-world code examples
• 🧩 Step-by-step Tutorials - Learn algorithms with guided walkthroughs

User Experience

• Clean, responsive design with Tailwind CSS
• Intuitive navigation with topic-specific sidebars
• Mobile-friendly interface
• Fast loading with optimized React components

🛠️ Tech Stack

• Frontend: React 18.3.1
• Routing: React Router DOM 6.26.2
• Styling: Tailwind CSS 3.4.13
• Charts: Chart.js 4.4.5 & React Chart.js 2
• Icons: Heroicons 2.1.5
• UI Components: Headless UI 2.1.9
• Build Tool: React Scripts 5.0.1

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/MasterBhuvnesh/AlgoVista.git
   cd AlgoVista

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000 to view the application

Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Launches the test runner
• npm run eject - Ejects from Create React App (one-way operation)

📁 Project Structure

AlgoVista/
├── public/
│   ├── index.html
│   └── icon.png
├── src/
│   ├── components/          # Reusable React components
│   │   ├── Questions.jsx    # Quiz component
│   │   ├── SingleQuestion.jsx
│   │   └── quiz.css
│   ├── pages/              # Main pages and topic-specific content
│   │   ├── graph/          # Graph-related components
│   │   ├── stack/          # Stack-related components
│   │   ├── linkedlist/     # Linked List components
│   │   ├── searching/      # Search algorithm components
│   │   └── hashing/        # Hashing components
│   ├── sidebar/            # Navigation sidebars
│   ├── quiz_data/          # Quiz questions (pre/post tests)
│   ├── data/              # Sample data and examples
│   ├── App.js             # Main application component
│   ├── index.js           # Application entry point
│   └── index.css          # Global styles
├── package.json
└── README.md

🎓 Learning Path

1. Start with Fundamentals

   • Choose a topic from the main dashboard
   • Read the theory and objectives

2. Take the Pre-Test

   • Assess your current knowledge
   • Identify areas for improvement

3. Learn with Visuals

   • Explore interactive graphical representations
   • Understand algorithm step-by-step execution

4. Practice Implementation

   • Study code examples
   • Understand time and space complexity

5. Validate Learning

   • Take the post-test to measure progress
   • Compare with pre-test results

🧪 Quiz System

• Pre-Tests: Evaluate existing knowledge before learning
• Post-Tests: Assess understanding after completing the topic
• Randomized Questions: 5 questions selected randomly from a larger pool
• Instant Feedback: Immediate results with correct/incorrect highlighting
• Retry Option: Multiple attempts to improve scores

🎨 Visual Features

• Interactive graph traversal animations
• Stack operations visualization
• Linked list manipulation demonstrations
• Search algorithm step-by-step execution
• Hash table collision resolution techniques

👥 Contributors

This project is a collaborative effort by five talented developers:

• Abhay Mishra
• Aryan Bokde
• Abhinav Anurag
• Anurag Pathak
• Bhuvnesh Verma - Project Lead

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

Contribution Guidelines

• Follow the existing code style and structure
• Add appropriate comments and documentation
• Test your changes thoroughly
• Update README if needed

📝 TODO

• Add header and footer links
• Modify quiz page for different quiz types
• Create contact us page
• Add more DSA topics (Trees, Heaps, Dynamic Programming)
• Implement user authentication
• Add progress tracking
• Mobile app version

🐛 Bug Reports & Feature Requests

Found a bug or have a feature request? Please create an issue on our GitHub Issues page.

📄 License

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

🙏 Acknowledgments

• Thanks to all contributors who helped build this platform
• Inspired by the need for better DSA learning resources
• Built with ❤️ for the programming community

📞 Contact

For questions, suggestions, or collaborations:

• Repository: AlgoVista
• Project Lead: Bhuvnesh Verma

---

⭐ Star this repository if you find it helpful!

Made with ❤️ by the AlgoVista Team