Making Data Structures & Algorithms accessible through interactive visualizations

A modern, interactive web application built with Next.js that helps students learn and understand Data Structures & Algorithms through step-by-step visualizations. No more struggling with abstract concepts - see algorithms in action!

• Interactive Visualizations: Watch algorithms execute step-by-step with real-time animations
• Multiple Algorithm Support: Currently supports Binary Search, Merge Sort, and Quick Sort
• Modern UI/UX: Beautiful, responsive design with dark/light mode support
• Educational Focus: Clear complexity analysis and algorithm categorization
• Mobile Responsive: Works seamlessly across all devices

Learning Data Structures & Algorithms can be challenging, especially when trying to understand how algorithms work internally. This project aims to bridge that gap by providing:

• Visual Learning: See exactly how algorithms manipulate data
• Step-by-Step Execution: Understand each step of the algorithm
• Real-time Feedback: Interactive controls to pause, play, and step through algorithms
• Educational Resources: Comprehensive explanations and complexity analysis

• Framework: Next.js 15.5.4 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animations: Motion (Framer Motion)
• UI Components: Radix UI + Custom Components
• Theme: next-themes for dark/light mode
• Icons: Lucide React

client/
├── app/                          # Next.js App Router
│   ├── (root)/                   # Route group
│   │   ├── page.tsx             # Homepage with algorithm cards
│   │   ├── layout.tsx           # Root layout
│   │   ├── about/               # About page
│   │   ├── binary-search/       # Binary Search visualizer
│   │   ├── merge-sort/          # Merge Sort visualizer
│   │   └── quick-sort/          # Quick Sort visualizer
│   ├── actions.ts               # Server actions
│   ├── layout.tsx               # Root app layout
│   └── globals.css              # Global styles
├── components/                   # React components
│   ├── ui/                      # Reusable UI components
│   ├── AlgoCard.tsx             # Algorithm card component
│   ├── BinarySearch.tsx         # Binary Search visualizer
│   ├── MergeSort.tsx            # Merge Sort visualizer
│   ├── QuickSort.tsx            # Quick Sort visualizer
│   ├── Navbar.tsx               # Navigation component
│   ├── Footer.tsx               # Footer component
│   └── theme-provider.tsx       # Theme context provider
├── constants/                    # Application constants
│   ├── algorithms.ts            # Algorithm definitions
│   └── data.ts                  # Sample data
├── types/                       # TypeScript type definitions
│   └── types.ts                 # Algorithm interface
├── lib/                         # Utility functions
│   └── utils.ts                 # Common utilities
└── utils/                       # Additional utilities
    └── data.ts                  # Data generation utilities

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/KamrAnDarmAn/StepWise.git
   cd StepWise

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

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

• Binary Search - O(log n) time complexity
• Merge Sort - O(n log n) time complexity
• Quick Sort - O(n log n) average case

• Bubble Sort
• Insertion Sort
• Selection Sort
• Heap Sort
• Breadth-First Search (BFS)
• Depth-First Search (DFS)
• Dijkstra's Algorithm
• And many more!

We welcome contributions from the community! This project is designed to help future DSA students, and your contributions can make a real difference.

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/your-feature-name

3. Make your changes
4. Test your changes

   npm run lint
   npm run build

5. Commit your changes

   git commit -m "Add: your feature description"

6. Push to your branch

   git push origin feature/your-feature-name

7. Open a Pull Request

• New Algorithm Visualizations: Add new sorting, searching, or graph algorithms
• UI/UX Improvements: Enhance the user interface and experience
• Performance Optimizations: Improve animation performance and responsiveness
• Documentation: Improve code documentation and README
• Bug Fixes: Fix existing issues and improve stability
• Accessibility: Make the app more accessible to all users
• Mobile Experience: Enhance mobile responsiveness

When adding a new algorithm:

1. Create the algorithm component in components/
2. Add algorithm definition to constants/algorithms.ts
3. Create the route page in app/(root)/algorithm-name/
4. Add proper TypeScript types if needed
5. Include complexity analysis (time and space)
6. Add sample data for visualization
7. Test thoroughly with different input sizes

• Use TypeScript for type safety
• Follow React best practices
• Use Tailwind CSS for styling
• Write meaningful commit messages
• Add comments for complex logic
• Ensure responsive design

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

The project uses a consistent design system with:

• Colors: Neutral palette with dark/light mode support
• Typography: Clean, readable fonts
• Spacing: Consistent spacing scale
• Components: Reusable UI components
• Animations: Smooth, purposeful animations

We're planning to add support for multiple languages to make the platform accessible globally. If you'd like to contribute translations, please reach out!

• Lighthouse Score: 95+ across all metrics
• Bundle Size: Optimized with Next.js
• Animations: Smooth 60fps animations
• Mobile: Fully responsive design

Found a bug? Please create an issue with:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Screenshots if applicable
• Browser/device information

Have an idea for a new feature? We'd love to hear it! Please create an issue with:

• Clear description of the feature
• Use case and benefits
• Any mockups or examples

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

• Contributors: Thank you to all contributors who help make this project better
• Community: The DSA learning community for inspiration and feedback
• Open Source: Built with amazing open-source tools and libraries

• Project Maintainer: [KamrAn DarmAn]
• Email: [[email protected]]
• GitHub: @KamrAnDarmAn

If you find this project helpful, please give it a star! It helps others discover the project and motivates us to keep improving it.

Made with ❤️ for the DSA learning community

"The best way to learn algorithms is to see them in action!"