A interactive platform for learning and visualizing/interfacing algorithms and data structures. Perfect for understanding complex code through visual representation. The idea is to have an IDE, where you will be able to paste leetcode style problems(for now) and it should be able to parse them and visualize how the code is executing and what is occuring at each step for you.

• 🔍 Step-by-step code execution with visual feedback
• 📊 Real-time visualization of data structures
• 🎯 Breakpoint support
• 🔄 Variable inspection and state tracking
• 📝 Integrated code editor with syntax highlighting
• 🌗 Dark mode support

• Node.js 18 or higher
• npm 9 or higher

1. Clone the repository:

git clone https://github.com/yourusername/codeflow.git

1. Navigate to the project directory:

cd codeflow

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

The application will be available at http://localhost:5173

• Email: krishnna@example.com
• Password: Waynerooney10!

src/
├── components/           # React components
│   ├── debugger/        # Debugger-related components
│   ├── layout/          # Layout components
│   ├── problems/        # Problem-related components
│   └── visualizations/  # Visualization components
├── context/             # React context providers
├── data/               # Static data and configurations
├── hooks/              # Custom React hooks
├── pages/              # Page components
├── services/           # API services
├── test/               # Test files
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run tests
npm run test

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run coverage

# Run linter
npm run lint

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

• Follow TypeScript best practices
• Write tests for new features
• Use functional components and hooks
• Follow the existing project structure
• Document new features and changes

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