AlgoVisual

AlgoVisual

A Digital Garden for Algorithms - An interactive educational website where users can read explanations of algorithms and visualize them in real-time through React components.

🌟 Features

• Interactive Visualizations: Step through sorting algorithms like Bubble Sort with real-time visual feedback
• Content Collections: MDX-powered articles with structured metadata (difficulty, tags, publish date)
• Islands Architecture: React components loaded only where needed for optimal performance
• Type-Safe: Full TypeScript support with Zod schemas for content validation
• Responsive Design: Clean, modern UI with CSS variables for easy theming
• SEO Optimized: Built with Astro for fast static generation and excellent SEO

🛠 Tech Stack

• Framework: Astro (latest version)
• Content: MDX with Content Collections
• Styling: Vanilla CSS with CSS Variables
• Interactivity: TypeScript & React (Islands)
• Package Manager: npm

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/Manavarya09/AlgoVisual.git
   cd AlgoVisual
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open http://localhost:4321 in your browser.

Build for Production

npm run build
npm run preview

📁 Project Structure

src/
├── content/
│   ├── algorithms/
│   │   └── bubble-sort.mdx    # Sample algorithm article
│   └── config.ts              # Content collection schemas
├── components/
│   └── Interactive/
│       └── SortingVisualizer.tsx  # React sorting visualizer
├── layouts/
│   └── Layout.astro           # Main HTML wrapper
└── pages/
    └── algorithms/
        └── [...slug].astro    # Dynamic routing for articles

📖 Usage

Adding New Algorithms

1. Create a new .mdx file in src/content/algorithms/:

   ---
   title: "New Algorithm"
   difficulty: Medium
   tags: ['sorting', 'efficient']
   publishDate: 2024-01-01
   ---
   
   # Algorithm Explanation
   
   <SortingVisualizer algorithm="New Algorithm" speed={500} client:load />
   

2. The page will be automatically available at /algorithms/new-algorithm.

Creating Interactive Components

Components in src/components/Interactive/ are React components that can be used in MDX files:

• Use client:load directive for full interactivity
• Props are type-checked with TypeScript
• Components are isolated to prevent unnecessary JavaScript loading

🎨 Theming

The project uses CSS variables for easy theming. Modify :root in src/layouts/Layout.astro:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --accent-color: #007acc;
  --border-color: #e0e0e0;
}

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Content Guidelines

• Use clear, educational language
• Include time/space complexity analysis
• Provide interactive visualizations where possible
• Tag appropriately for discoverability

📄 License

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

🙏 Acknowledgments

• Built with Astro
• Powered by React for interactivity
• Content managed with MDX

---

Happy learning! 🎓