WebWeave

WebWeave is a powerful no-code website builder with a user-friendly drag-and-drop interface, allowing users to create, customize, and deploy websites effortlessly. Designed for flexibility and collaboration, WebWeave offers a range of features from live team editing to one-click hosting.

🌐 Features

• Drag and Drop Functionality: Easily move and position elements on the canvas.
• Email Authentication: Secure signup and login through email-based authentication.
• 100% Customizable Elements: Edit every detail of any element for complete control.
• Custom Elements and Code: Add custom HTML, CSS, and JavaScript to personalize your site.
• Template Imports: Import template codes to kickstart your project.
• Live Team Collaboration: Work with your team in real time to build and refine your website.
• One-Click Hosting on Vercel: Deploy your project instantly to Vercel with a single click.
• Code Export: Export the complete code of your website for further customization.
• AI Code Generation: Generate code snippets using AI directly within the editor.
• Responsive Design Testing: Check your site's responsiveness right in the editor.

🚀 Tech Stack

• Frontend: ReactJS
• Backend: Flask-RESTful, MongoDB

📦 Libraries Used

• Backend:

  • flask-restful: RESTful API design for Flask applications.
  • flask-jwt-extended: JWT-based authentication.
  • pymongo: MongoDB operations.
  • dotenv: Environment variable management.

• Frontend:

  • grapesjs: Drag-and-drop editor.
  • react-toastify: User-friendly notifications.
  • axios: HTTP client for API requests.
  • socket.io: Real-time collaboration and updates.

📸 Screenshots

📖 Getting Started

Prerequisites

• Node.js and npm
• Python and pip
• MongoDB

Installation

1. Clone the repository

   git clone https://github.com/shauryasf/webweave.git
   cd webweave

2. Backend Setup

   • Navigate to the backend folder:

     cd backend

   • Install dependencies:

     pip install -r requirements.txt

   • Create a .env file to store environment variables, such as your MongoDB connection string and JWT secret.

3. Frontend Setup

   • Navigate to the frontend folder:

     cd ../frontend

   • Install npm dependencies:

     npm install

4. Run the Application

   • Start the backend server:

     cd ../backend
     flask run

   • Start the frontend development server:

     cd ../frontend
     npm start

5. Website is live at: localhost:5000