Bolt is a full-stack AI-powered website builder that lets you generate, edit, preview, download, and deploy modern websites with a single prompt. The project is split into two main parts:

• backend — Node.js/Express API for AI generation and Netlify deployment
• frontend/website-maker — React + Vite web app for user interaction

• AI Website Generation: Describe your website, and AI generates HTML, CSS, and JS.
• Live Editing: Edit the generated code in a beautiful, multi-tab editor.
• Instant Preview: See your changes live as you type.
• Download as ZIP: Download your site as a ready-to-use ZIP file.
• One-click Deploy: Deploy your site to Netlify with a single click.

.
├── backend/
│   ├── .env
│   ├── package.json
│   ├── server.js
│   └── .netlify/
│       └── netlify.toml
└── frontend/
    └── website-maker/
        ├── package.json
        ├── index.html
        ├── src/
        │   ├── App.jsx
        │   ├── main.jsx
        │   └── ...
        └── ...

• Node.js (v18+ recommended)
• npm
• Netlify CLI (npm install -g netlify-cli)
• OpenAI API key (for backend .env)

1. Install dependencies:

   cd backend
   npm install

2. Configure environment:

   • Create a .env file in backend/:

     OPENAI_API_KEY=sk-...
     

   • (Already present in your workspace.)

3. Start the backend server:

   npm start

   • Runs on http://localhost:4000
   • Endpoints:
     • POST /generate-site — Generates website code from prompt
     • POST /deploy — Deploys generated site to Netlify

4. Netlify Setup:

   • Ensure your Netlify site ID and token are set in server.js.
   • Netlify CLI must be installed and authenticated (netlify login).

1. Install dependencies:

   cd frontend/website-maker
   npm install

2. Start the development server:

   npm run dev

   • Runs on http://localhost:5173 (default Vite port)

3. Usage Flow:

   • Enter a prompt describing your desired website.
   • Click "Build with AI" to generate the site.
   • Edit HTML, CSS, or JS in the editor tabs.
   • Preview updates live.
   • Download your site as a ZIP or deploy it live to Netlify.

1. User enters a prompt in the frontend.
2. Frontend sends the prompt to POST /generate-site on the backend.
3. Backend calls OpenAI to generate HTML, CSS, JS, and returns them as JSON.
4. Frontend displays the generated code and live preview.
5. User can edit the code, download as ZIP, or deploy live.
6. Deploy: Frontend sends files to POST /deploy on the backend, which uploads to Netlify and returns a live URL.

• AI Prompting: Modify the system prompt in server.js for different generation styles.
• Deployment: Update Netlify credentials in server.js as needed.

• Frontend uses Vite + React + Tailwind CSS.
• Backend uses Express, node-fetch, and dotenv.
• Ensure CORS is enabled for local development.

• Build frontend:

  npm run build

• Serve static files or deploy as needed.

• Never commit your .env or API keys to public repositories.
• Restrict Netlify tokens and OpenAI keys.

MIT

Made with ⚡ by Gaurav