Skip to content

Latest commit

 

History

History
148 lines (103 loc) · 3.52 KB

README.md

File metadata and controls

148 lines (103 loc) · 3.52 KB

Next.js Website Builder

Overview

This project is a sophisticated website builder application built with Next.js, React, and TypeScript. It offers a drag-and-drop interface for creating and customizing websites, with features like responsive design, theming, and real-time previews.

Features

  1. Drag-and-Drop Interface

    • Intuitive element placement and manipulation
    • Support for text, images, videos, and buttons

  2. Responsive Design

    • Preview modes for desktop, tablet, and mobile
    • Adaptive grid layout system

  3. Theme Management

    • Global styling options
    • Custom color schemes and typography

  4. Multi-Page Support

    • Create and manage multiple pages within a project
    • Dynamic routing and navigation

  5. Real-time Preview

    • Live preview of website changes
    • Device-specific previews

  6. Advanced Element Properties

    • Detailed control over element styling and positioning
    • Custom property panels for each element type

  7. Template System

    • Save and load custom templates
    • Pre-defined starter templates

  8. Undo/Redo Functionality

    • Full history management for user actions

  9. Section Management

    • Add and customize multiple sections per page
    • Section-specific background controls

  10. Performance Optimizations

    • Efficient state management with React Context
    • Optimized rendering with React hooks

  11. Extensible Architecture

    • Modular component structure for easy feature additions
    • Clear separation of concerns in code organization

Project Structure

src/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── preview/
│ └── [slug]/
│ └── page.tsx
├── components/
│ ├── Builder/
│ ├── Elements/
│ ├── LoadTemplate/
│ ├── Navigation/
│ └── Preview/
├── context/
├── hooks/
├── styles/
├── types/
└── utils/
  • app/: Next.js 14.2.5 app directory structure
  • components/: Reusable React components
  • context/: React Context for state management
  • hooks/: Custom React hooks
  • styles/: Global styles and theme definitions
  • types/: TypeScript type definitions
  • utils/: Utility functions and helpers

Setup and Running the Project

  1. Clone the repository

    git clone https://github.com/sachin1245/website-builder.git
cd website-builder

2. **Install dependencies**

   ```bash
   npm install
   ```

3. **Run the development server**

   ```bash
   npm run dev
   ```

4. **Build for production**

   ```bash
   npm run build
   ```

5. **Start the production server**

   ```bash
   npm start
   ```

## Technologies Used

- Next.js 14 (with App Router)
- React 18
- TypeScript
- Tailwind CSS
- React DnD (for drag-and-drop functionality)
- UUID (for unique identifier generation)

## Architecture Highlights

- **State Management**: Utilizes React Context for global state, with optimized updates to prevent unnecessary re-renders.
- **Component Design**: Implements a modular component structure, allowing for easy extension and maintenance.
- **Custom Hooks**: Leverages custom hooks for shared logic, such as drag-and-drop functionality and element management.
- **Responsive Design**: Employs a custom grid system and layout calculations for true responsive behavior.
- **Type Safety**: Utilizes TypeScript throughout the project for enhanced code quality and developer experience.

## License

This project is licensed under the MIT License - see the LICENSE file for details.