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)
git clone https://github.com/subh37106/thunder.git
cd thunder
npm installcd frontend
npm install
npm run devcd be
npm install
npm run startThunder 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.
We welcome contributions to Thunder! To contribute:
Fork the Repository:
git clone https://github.com/<your-username>/thunder.git
Set Up Locally: Follow the Installation instructions.
Create a Feature Branch:
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.
This project is distributed under the MIT License.
See LICENSE for details.
For help, suggestions, or issues:
- 📧 Email: alimuneerali245@gmail.com
- 🐞 Open an Issue
- 💬 Join our Discord (coming soon 🚀)
👨💻 Crafted with ❤️ by Muneer Ali
📖 Docs: thunder-docs.vercel.app 🐞 Report Bug: Issues