# 🚀 Bolt.new

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
[![Next.js](https://img.shields.io/badge/Next.js-15.1.7-black?logo=next.js)](https://nextjs.org/)
[![Convex](https://img.shields.io/badge/Convex-1.19.2-blue?logo=convex)](https://www.convex.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4.1-38B2AC?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![Google AI](https://img.shields.io/badge/Google%20AI-0.22.0-4285F4?logo=google&logoColor=white)](https://ai.google.dev/)
[![GitHub Stars](https://img.shields.io/github/stars/Saksham-Goel1107/bolt.new?style=social)](https://github.com/Saksham-Goel1107/bolt.new)
[![GitHub Issues](https://img.shields.io/github/issues/Saksham-Goel1107/bolt.new)](https://github.com/Saksham-Goel1107/bolt.new/issues)

## 📋 Overview

Bolt is an AI-powered code generation platform that helps you quickly create web applications through natural language prompts. With an interactive chat interface and real-time code preview, Bolt streamlines the development process from idea to implementation.

![Bolt Preview](https://via.placeholder.com/800x400?text=Bolt+Preview)

## ✨ Features

- 🤖 **AI-Powered Code Generation** - Transform natural language descriptions into functional code
- 🔄 **Real-time Code Preview** - Instantly see your code in action with SandpackReact integration
- 💬 **Interactive Chat Interface** - Refine your ideas through conversation with the AI
- 🌐 **Google Authentication** - Secure and convenient login process
- 📝 **Workspace Management** - Create and manage multiple coding projects
- 🎨 **Modern UI** - Clean, responsive interface built with Tailwind CSS
- 🌙 **Dark/Light Mode** - Choose your preferred theme for coding comfort

## 🛠️ Tech Stack

- **Frontend**: Next.js, React, TypeScript, Tailwind CSS
- **Backend**: Convex for data management and API
- **AI**: Google Generative AI
- **Editor**: Sandpack React for code editing and preview
- **Authentication**: Google OAuth
- **Styling**: Tailwind CSS with theming support

## 🚀 Getting Started

### Prerequisites

- Node.js (v18 or higher)
- npm or yarn
- Convex account
- Google Developer account (for OAuth)

### Installation

1. Clone the repository:

```bash
git clone https://github.com/Saksham-Goel1107/bolt.new.git
cd bolt.new
```

2. Install dependencies:

```bash
npm install
# or
yarn install
```

3. Configure environment variables:

Create a `.env.local` file in the root directory with:

```
NEXT_PUBLIC_CONVEX_URL=your_convex_url
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_AI_API_KEY=your_google_ai_api_key
```

4. Start the development server:

```bash
npm run dev
# or
yarn dev
```

5. Open [http://localhost:3000](http://localhost:3000) in your browser.

## 📱 Usage

1. **Login** using your Google account
2. **Create a new workspace** by entering a natural language description of your project
3. **Refine your idea** through the chat interface
4. **View and edit** generated code in real-time
5. **Preview** your application in the integrated preview pane

## 🌐 Deployment

Deploy Bolt to Vercel with one click:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FSaksham-Goel1107%2Fbolt.new)

## 📚 Documentation

For detailed documentation on components and APIs, please visit [the documentation](https://github.com/Saksham-Goel1107/bolt.new/wiki).

## 🧪 Running Tests

```bash
npm run test
# or
yarn test
```

## 🤝 Contributing

Contributions are always welcome!

1. Fork the repository
2. Create a 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

Please make sure to update tests as appropriate.

## 📄 License

[MIT](https://choosealicense.com/licenses/mit/)

## 👨‍💻 Author

**Saksham Goel**

[![GitHub](https://img.shields.io/badge/GitHub-Saksham--Goel1107-181717?logo=github)](https://github.com/Saksham-Goel1107)
[![Portfolio](https://img.shields.io/badge/Portfolio-Visit-brightgreen)](https://github.com/Saksham-Goel1107)
[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?logo=linkedin)](https://linkedin.com/in/saksham-goel)

## 🙏 Acknowledgments

- [Next.js](https://nextjs.org/) for the React framework
- [Convex](https://www.convex.dev/) for the backend solution
- [Google Generative AI](https://ai.google.dev/) for AI capabilities
- [Sandpack React](https://sandpack.codesandbox.io/) for the interactive code editor
- [Tailwind CSS](https://tailwindcss.com/) for styling