AllVisualizer is an open-source educational platform that transforms abstract concepts into intuitive visual experiences. Built with modern web technologies, it provides interactive visualizations across Computer Science, Mathematics, Physics, and Artificial Intelligence to enhance learning and comprehension.
Live Platform: https://allvisualizer.com
To democratize quality education by making complex concepts accessible through interactive visualization, enabling learners worldwide to develop deeper understanding through visual and hands-on learning experiences.
AllVisualizer is free to use and open source. To maintain and improve the platform, we display non-intrusive Google AdSense advertisements that help cover hosting costs and development expenses. This allows us to keep the platform accessible to everyone while ensuring long-term sustainability.
- Real-time algorithm execution with step-by-step breakdowns
- Dynamic mathematical transformations and graphing
- Physics simulations with adjustable parameters
- Neural network training visualization
- Data Structures & Algorithms: Sorting, searching, graph algorithms, dynamic programming
- Mathematics: Calculus, linear algebra, optimization, matrix operations
- Physics: Classical mechanics, Newton's laws, projectile motion
- Machine Learning: Neural networks, perceptron learning, backpropagation
- Complexity analysis and performance metrics
- Interactive problem-solving environments
- Community discussions powered by GitHub (Giscus integration)
- Mobile-responsive design for learning on any device
- Built with Next.js 14+ App Router for optimal performance
- TypeScript for type safety and developer experience
- Server-side rendering and static site generation
- Fully responsive design with Tailwind CSS
- Getting Started
- Project Structure
- Available Visualizations
- Technology Stack
- Configuration
- Contributing
- Roadmap
- License and Usage
- Support the Project
- Contact
- Node.js 18.0 or higher
- npm 9.0 or higher (or yarn 1.22+)
- Git
-
Clone the repository
git clone https://github.com/amancd/allvisualizer-v2.git cd allvisualizer-v2 -
Install dependencies
npm install
-
Configure environment variables (optional)
cp .env.example .env.local
Start the development server:
npm run devOpen http://localhost:3000 in your browser to see the application.
Build for production:
npm run build
npm startallvisualizer-v2/
├── app/ # Next.js App Router
│ ├── (routes)/
│ │ ├── about/ # About page
│ │ ├── contact/ # Contact page
│ │ ├── privacy-policy/ # Privacy policy
│ │ └── terms-and-conditions/ # Terms of service
│ ├── dsa-visualizer/ # DSA section
│ │ ├── [category]/ # Dynamic category pages
│ │ └── problems/ # Individual problems
│ │ ├── two-sum/
│ │ ├── reverse-linked-list/
│ │ └── best-time-to-buy-sell-stock/
│ ├── math-visualizer/ # Mathematics section
│ │ ├── calculus/
│ │ ├── linear-algebra/
│ │ └── problems/
│ │ ├── derivatives/
│ │ ├── chain-rule/
│ │ ├── integration-basics/
│ │ ├── matrix-operations/
│ │ ├── determinants/
│ │ └── optimization/
│ ├── physics-visualizer/ # Physics section
│ │ ├── mechanics/
│ │ └── simulations/
│ │ ├── projectile-motion/
│ │ └── newtons-laws/
│ ├── ai-ml-visualizer/ # AI/ML section
│ │ ├── neural-networks/
│ │ └── visualizations/
│ │ └── simple-perceptron/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── components/
│ ├── layout/
│ │ ├── Header.tsx # Navigation header
│ │ └── Footer.tsx # Site footer
│ ├── ui/
│ │ └── GiscusComments.tsx # GitHub discussions
│ └── visualizers/
│ └── TwoSumVisualizer.tsx # Reusable visualizers
├── config/
│ └── giscus.ts # Centralized config
├── public/ # Static assets
│ └── robots.txt
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies
- Arrays: Two Sum, Best Time to Buy and Sell Stock
- Linked Lists: Reverse Linked List
- More coming soon: Sorting algorithms, trees, graphs, dynamic programming
- Calculus: Derivatives, Chain Rule, Integration Basics, Optimization
- Linear Algebra: Matrix Operations, Determinants
- Classical Mechanics: Newton's Laws, Projectile Motion
- Neural Networks: Simple Perceptron, Backpropagation
- Framework: Next.js 14+ (App Router)
- Language: TypeScript 5.0+
- Styling: Tailwind CSS 3.0+
- UI Components: Custom React components
- Comments: GitHub Discussions via Giscus
- Analytics: Ready for integration
- SEO: Metadata API, sitemap generation
- Performance: Server-side rendering, static generation
- Linting: ESLint
- Formatting: Prettier (recommended)
- Version Control: Git
The project uses centralized Giscus configuration in /config/giscus.ts:
export const giscusConfig = {
repo: "amancd/allvisualizer-v2",
repoId: "YOUR_REPO_ID",
category: "Show and tell",
categoryId: "YOUR_CATEGORY_ID",
mapping: "pathname",
reactionsEnabled: "1",
emitMetadata: "0",
inputPosition: "bottom",
theme: "light",
lang: "en",
loading: "lazy"
};To set up:
- Enable GitHub Discussions on your repository
- Install Giscus app: https://github.com/apps/giscus
- Get your repository and category IDs from https://giscus.app
- Update the values in
/config/giscus.ts
Update site metadata in app/layout.tsx for SEO optimization.
We welcome contributions from the community! Here's how you can help:
- Use the GitHub Issues page
- Check if the issue already exists before creating a new one
- Include detailed steps to reproduce
- Provide screenshots if applicable
- Open an issue with the
enhancementlabel - Describe the feature and its use case
- Explain why it would benefit the project
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow TypeScript best practices
- Use meaningful variable and function names
- Add comments for complex logic
- Ensure responsive design
- Test on multiple browsers
- Run
npm run lintbefore committing
- Core platform architecture
- DSA visualizations (Arrays, Linked Lists)
- Math visualizations (Calculus, Linear Algebra)
- Physics simulations (Mechanics)
- AI/ML visualizations (Neural Networks)
- GitHub Discussions integration
- Mobile responsive design
- More DSA problems (Trees, Graphs, Dynamic Programming)
- Advanced calculus topics
- Additional physics simulations
- Deep learning visualizations
- User progress tracking
- Interactive code playground
- User authentication
- Personal learning paths
- Achievement system
- API for developers
- Mobile native apps
- Multilingual support
This project is licensed under the MIT License - see the LICENSE file for details.
Project Maintainer: Aman Singh
- GitHub: @amancd
- Project Repository: allvisualizer-v2
- Website: AllVisualizer
- Inspired by the need for better visual learning tools in STEM education
- Built with modern web technologies and best practices
- Community-driven development approach
Made with passion for education and open source
- Framework: Next.js 16+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Heroicons (via SVG)
- Community: Discord Integration
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).
You are free to:
- Share — copy and redistribute the material in any medium or format
- Adapt — remix, transform, and build upon the material for non-commercial purposes
- Use the code for learning, education, and personal projects
Under the following terms:
- Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made
- NonCommercial — You may not use the material for commercial purposes without explicit permission
If you wish to use AllVisualizer or its codebase for commercial purposes, please contact us at nkcoderz@gmail.com for licensing arrangements.
Why Non-Commercial? The platform is sustained through Google AdSense revenue to cover hosting and development costs. Allowing unrestricted commercial use would undermine this sustainability model and the platform's accessibility mission.
For full license details, see the LICENSE file or visit Creative Commons BY-NC 4.0.
AllVisualizer is free to use and will always remain accessible to learners worldwide. To sustain and improve the platform, we rely on:
- Google AdSense: Non-intrusive advertisements help cover hosting costs and development expenses
- Community Contributions: Bug reports, feature requests, and code contributions
- Use and Share: Share AllVisualizer with students, educators, and learners
- Contribute: Submit bug reports, feature requests, or pull requests
- Provide Feedback: Help us improve by sharing your learning experience
- Support Development: The ads displayed on the platform directly fund ongoing development
Every bit of support helps us maintain free, quality educational resources for everyone.
Project Maintainer: Aman Singh
- GitHub: @amancd
- Email: nkcoderz@gmail.com
- Website: https://allvisualizer.com
- Discord Community: Join our Discord
- Repository: allvisualizer-v2
Built with dedication for learners worldwide
Making complex concepts accessible through visualization