Algorithm Design Canvas

A modern, open-source platform that transforms algorithm design from a mental process into a structured, visual workspace. Built on the principles from hiredintech's Algorithm Design Canvas, this tool helps developers, students, and interviewees better plan, document, and share their algorithmic solutions.

Live App · Report Bug · Request Feature

🌟 Features

• 📝 Interactive Canvas Interface

  • Structured sections for constraints, ideas, test cases, and code
  • Real-time editing and auto-saving
  • Clean, intuitive UI with dark/light mode support

• 💾 Data Management

  • Automatic local storage with offline support
  • Multiple canvas management
  • Last edited canvas tracking

• 🛠️ Developer Experience

  • Modern React with TypeScript
  • Tailwind CSS for styling
  • TanStack Router for navigation
  • Vercel Analytics and Speed Insights

• 🚀 Coming Soon

  • Real-time synchronization
  • Multi-user collaboration
  • Canvas sharing and export

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or pnpm

Installation

1. Clone the repository

   git clone https://github.com/kimbasn/algorithm-design-canvas.git
   cd algorithm-design-canvas

2. Install dependencies

   npm install
   # or
   pnpm install

3. Start the development server

   npm run dev
   # or
   pnpm dev

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

Building for Production

npm run build
# or
pnpm build

🏗️ Tech Stack

• Frontend Framework: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Routing: TanStack Router
• Form Handling: React Hook Form + Zod
• UI Components: Radix UI + shadcn/ui
• State Management: React Context
• Analytics: Vercel Analytics
• Performance: Vercel Speed Insights
• Build Tool: Vite

🤝 Contributing

We welcome contributions! Please follow these steps:

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

Development Guidelines

• Follow the existing code style
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

📝 License

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

🙏 Acknowledgments

• hiredintech for the Algorithm Design Canvas concept
• shadcn/ui for the beautiful UI components
• All contributors who have helped shape this project

📧 Contact

Kimba SABI N'GOYE - @linkedin - <kimbasabingoye at gmail . com>

Project Link: https://github.com/kimbasn/algorithm-design-canvas