Google Developer Groups on Campus - University of San Carlos
Visualize, interact, and understand complex data structures and algorithms with our next-gen step-by-step visualizer.
- Step-by-Step Visualization: Play, pause, step forward/back, and reset execution.
- Interactive Controls: Adjust speed, randomize inputs, and load examples.
- Dedicated Algorithm Pages: Focused environment for each algorithm (Sorting, Searching, Graphs, etc.).
- Consistent UI: Standardized "Page Contract" ensuring a familiar experience across all visualizations.
- Community Driven: Built and maintained by the GDG-USC community.
- Framework: React + Vite
- Language: TypeScript
- UI Components: shadcn/ui
- Styling: Tailwind CSS + Google Brand Colors
- Typography: Excalifont (Hand-drawn aesthetic)
- Node.js (v20.19+ or v22.12+)
- Bun (Preferred package manager)
bun installbun devThe application will be available at http://localhost:5173.
We welcome contributions from the community! This project uses Husky and Commitlint to ensure code quality.
- Conventional Commits: All commit messages must follow the Conventional Commits standard.
- ✅
feat: add bubble sort visualization - ✅
fix: resolve mobile layout issue - ❌
added stuff
- ✅
- Linting & Formatting: Code is automatically linted and formatted on commit using
eslintandprettier. - Type Checking: A strict type check runs before you push (
pre-pushhook).
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name. - Make your changes.
- Commit your changes:
git commit -m "feat: your feature". - Push to the branch:
git push origin feature/your-feature-name. - Submit a Pull Request.
For more detailed information, please refer to the documentation:
- Architecture & Information Architecture
- Branding & Design Guidelines
- Design System
- Project Source of Truth
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by the GDG on Campus - University of San Carlos Community