Skip to content

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

🧠 Code Visualizer Web App

An interactive Code Visualization Web App designed to help learners understand how algorithms work step-by-step through clear visual animations. This project aims to make complex algorithms easier to grasp by turning code logic into visual experiences.


✨ Features

  • 📊 Visualizes algorithms step-by-step
  • 🎯 Beginner-friendly UI
  • ⚡ Built with modern frontend tools (Vite)
  • 🧩 Easily extensible — add your own algorithms
  • 🌐 Runs completely in the browser

🛠️ Tech Stack

  • Frontend: HTML, CSS, JavaScript / TypeScript
  • Build Tool: Vite
  • Styling: PostCSS
  • Version Control: Git & GitHub

📂 Project Structure

CODE_VISUALIZER/
├── src/                  # Source code
├── guidelines/           # Contribution & algorithm guides
├── index.html            # App entry point
├── package.json          # Project configuration
├── vite.config.ts        # Vite configuration
├── postcss.config.mjs    # PostCSS configuration
├── ADDING_ALGORITHMS_GUIDE.md
├── CONTRIBUTIONS.md
├── README.md
└── .gitignore

🚀 Getting Started

Follow these steps to run the project locally.

1️⃣ Prerequisites

Make sure you have installed:

  • Node.js (LTS)
  • Git

Check versions:

node -v
npm -v

2️⃣ Clone the Repository

git clone https://github.com/uzman2406/CODE_VISUALIZER.git
cd CODE_VISUALIZER

3️⃣ Install Dependencies

npm install

4️⃣ Run the Development Server

npm run dev

Open your browser and visit:

http://localhost:5173

➕ Adding Algorithms

🚨 Important: All contributors must follow the official guide when adding new algorithms.

📄 Refer to:

ADDING_ALGORITHMS_GUIDE.md

Any algorithm added without following this guide will not be accepted.


🤝 Contributing

Contributions are welcome and appreciated! 🎉

Please read the contribution rules before submitting a Pull Request:

📄 CONTRIBUTIONS.md

Contribution Flow

  1. Fork the repository

  2. Create a new branch:

    git checkout -b feature/your-feature-name
  3. Make your changes

  4. Test the project locally

  5. Commit with a clear message

  6. Push to your fork

  7. Open a Pull Request


📜 Guidelines & Rules

  • Follow clean coding practices
  • Write readable and maintainable code
  • Do not commit node_modules/ or venv/
  • One feature or fix per pull request
  • Respect all contributors

Detailed rules are available in CONTRIBUTIONS.md.


📄 License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this project with proper attribution.


About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages