DASH - Interactive Code Editor with AI Integration

A powerful web-based development environment that combines real-time code editing with AI assistance, built with Next.js, React, and WebContainer API.

🌟 Features

• Live Code Editor: Built with Monaco Editor for a VS Code-like experience
• Real-time Preview: Instant preview of your React applications
• AI Integration: Powered by Pollinations AI for intelligent code suggestions
• WebContainer Integration: Run Node.js applications directly in the browser
• Modern UI: Built with Tailwind CSS and shadcn/ui components
• Dark/Light Mode: Full theme support with system preference detection

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone https://github.com/amardeeplakshkar/DASH.git
cd DASH

2. Install dependencies:

pnpm install
# or
npm install

3. Start the development server:

pnpm dev
# or
npm run dev

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

🛠️ Tech Stack

• Framework: Next.js 15
• UI Library: React 19
• Styling: Tailwind CSS
• Components: shadcn/ui
• Editor: Monaco Editor
• Runtime: WebContainer API
• AI Integration: Pollinations React

📁 Project Structure

DASH/
├── app/                  # Next.js app directory
│   ├── (routes)/        # Application routes
│   ├── globals.css      # Global styles
│   └── layout.tsx       # Root layout
├── components/          # React components
│   ├── ui/             # UI components
│   └── context/        # React context providers
├── lib/                # Utility functions
└── public/             # Static assets

🎯 Key Components

• ChatComponent: AI-powered chat interface for code generation
• SdkComponent: WebContainer-based code editor and preview
• FileGroupContext: Manages file state across components
• ThemeProvider: Handles application theming

🔧 Configuration

The project includes several configuration files:

• next.config.ts: Next.js configuration
• tailwind.config.ts: Tailwind CSS configuration
• tsconfig.json: TypeScript configuration
• postcss.config.mjs: PostCSS configuration

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Next.js team for the amazing framework
• Vercel for hosting and deployment
• shadcn for the beautiful UI components
• WebContainer team for the browser-based runtime

📞 Contact

@AmardeepDevs

Project Link: https://github.com/amardeeplakshkar/DASH