A modern drag-and-drop website builder built with Next.js (Pages Router) and React.
This project allows users to authenticate, access a dashboard, and create websites visually by dragging and dropping pre-defined templates (headers, text blocks, buttons, forms, elements, hero, etc.).
- 🔐 Authentication UI (Login & Register pages)
- 🧱 Website Builder Interface
- Sidebar with categorized templates
- Drag & Drop editor canvas
- Live properties panel to edit text, images, etc.
- 🎨 Modern and responsive design powered by Tailwind CSS
- ⚙️ Built with Next.js, React, and TypeScript
- 🧠 Smooth animations with Framer Motion
| Category | Tool | Description |
|---|---|---|
| Framework | Next.js | React-based framework for fullstack web apps |
| UI Library | React | Core UI library |
| Styling | Tailwind CSS | Utility-first CSS framework |
| Animations | Framer Motion | Modern animation library |
| Drag & Drop | @dnd-kit/core | Lightweight drag-and-drop library |
| Icons | Lucide React & React Icons | Icon sets |
| 3D / Effects | Three.js | 3D and animation library (for backgrounds or effects) |
| State Management | Zustand (optional addition) | Lightweight global store |
| Type Checking | TypeScript | Type-safe development |
| Build Tools | PostCSS + Autoprefixer | CSS processing and browser compatibility |
git clone https://github.com/MeriemHanafi/GDG-Website-builder-app.git cd GDG-Website-builder-app 2️⃣ Install Dependencies Make sure you have Node.js (>=18) and npm installed.
bash: npm install 3️⃣ Run the Development Server npm run dev The app will be available at 👉 http://localhost:3000
🧪 Development Scripts Command Description npm run dev Start the development server npm run build Build the production version npm run start Run the production build locally