A modern drag‑and‑drop website builder
Thunder is a modern, intuitive website builder with drag‑and‑drop functionality, empowering users to create professional websites in minutes.
- 🖱️ Drag-and-Drop Builder – Intuitive editor for seamless site creation.
- 🎨 Template Gallery – Choose from 50+ responsive templates.
- 📱 Cross-Device Preview – Real-time previews for desktop, tablet, and mobile.
- 🌈 Style Customizer – Full CSS & theme variable support.
- 🌍 One-Click Deployment – Deploy to a custom domain instantly.
- 🤝 Team Collaboration – Real-time co-editing for teams.
- 🕒 Version History – Roll back changes at any time.
- 📊 Integrated Analytics – Track performance within the builder.
| Category | Technologies |
|---|---|
| Frontend | React + Vite, TypeScript, TailwindCSS |
| Backend | Node.js, Express, Socket.IO |
| Authentication | Clerk |
| Deployment | Vercel, Render |
| Testing | Jest, Cypress, Postman |
frontend/
├─ .next/
│ └─ trace
├─ src/
│ ├─ Builder/
│ │ └─ PreviewModal.tsx
│ ├─ components/
│ │ ├─ checkout.tsx
│ │ ├─ CodeEditor.tsx
│ │ ├─ FileExplorer.tsx
│ │ ├─ FileViewer.tsx
│ │ ├─ Footer.tsx
│ │ ├─ lightning.tsx
│ │ ├─ Loader.tsx
│ │ ├─ PreviewFrame.tsx
│ │ ├─ Pricing.tsx
│ │ ├─ setting.tsx
│ │ ├─ StepsList.tsx
│ │ ├─ TabView.tsx
│ │ └─ terminal.tsx
│ ├─ hooks/
│ │ └─ useWebContainer.ts
│ ├─ pages/
│ │ ├─ _document.tsx
│ │ ├─ Builder.tsx
│ │ └─ Home.tsx
│ ├─ types/
│ │ └─ index.ts
│ ├─ App.tsx
│ ├─ config.ts
│ ├─ index.css
│ ├─ main.tsx
│ ├─ steps.ts
│ └─ vite-env.d.ts
└─ important assets and documentations
be/
├─ src/
│ ├─ defaults/
│ │ ├─ node.ts
│ │ └─ react.ts
│ ├─ constants.ts
│ ├─ index.ts
│ ├─ prompts.ts
│ └─ stripindents.ts
└─ important assests and documenations
For detailed setup instructions, see our Development Setup Guide.
-
Node.js v18.0.0+
-
npm v8.0.0+
-
Git (latest)
- Clone and setup
git clone https://github.com/subh37106/thunder.git
cd thunder
npm install
## 2. Frontend setup
```bash
cd frontend
npm install
npm run dev
## 3. Backend setup (if needed)
```bash
cd be
npm install
npm run start
## 📖 Usage
Thunder makes it easy to create professional websites with no coding experience. Follow these steps to get started:
Access the Builder: Visit thunder-muneer.vercel.app and sign in with Clerk authentication.
Choose a Template: Select from 50+ responsive templates in the Template Gallery.
Customize Your Site: Use the drag-and-drop editor to add components, adjust styles, and preview across devices.
Deploy: Click the "Deploy" button to publish your site to a custom domain.
Collaborate: Invite team members for real-time co-editing.
Track Performance: Use integrated analytics to monitor site performance.
For detailed guides, visit thunder-docs.vercel.app.
## 🤝 Contributing
We welcome contributions to Thunder! To contribute:
Fork the Repository:
```bash
git clone https://github.com/<your-username>/thunder.git
Set Up Locally: Follow the Installation instructions.
Create a Feature Branch:
```bash
git checkout -b feature/your-feature
Make Changes: Follow coding standards (TypeScript, TailwindCSS, ESLint).
Test: Run npm run test (Jest) and npm run cypress (Cypress) for code changes.
Submit a Pull Request: Push your branch and create a PR with a clear description.
Engage: Respond to feedback from maintainers.
For questions, contact alimuneerali245@gmail.com or open an issue.
## 📜 License
This project is distributed under the **MIT License**.
See [LICENSE](LICENSE) for details.
---
## 💬 Support
For help, suggestions, or issues:
- 📧 Email: **alimuneerali245@gmail.com**
- 🐞 [Open an Issue](https://github.com/Muneerali199/thunder/issues)
- 💬 Join our *Discord* (coming soon 🚀)
---
👨💻 Crafted with ❤️ by **Muneer Ali**
📖 Docs: thunder-docs.vercel.app
🐞 Report Bug: [Issues](https://github.com/Muneerali199/thunder/issues)