Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abhishekrawe/web-builder

Web Builder is a web application that allows users to quickly and easily create simple websites by dragging and dropping various elements. With elements like Name, Description, Image, Form (Name, Number), and Spacer, you can build a simple website, preview it, and access it directly
https://github.com/abhishekrawe/web-builder

builder clerkauth dnd-kit nextjs prisma-orm reactjs sadcn tailiwindcss typescript webbuilder websitebuilder

Last synced: 1 day ago
JSON representation

Host: GitHub
URL: https://github.com/abhishekrawe/web-builder
Owner: abhishekrawe
Created: 2024-08-04T00:54:53.000Z (6 months ago)
Default Branch: master
Last Pushed: 2024-08-22T07:35:31.000Z (6 months ago)
Last Synced: 2024-08-22T08:47:46.825Z (6 months ago)
Topics: builder, clerkauth, dnd-kit, nextjs, prisma-orm, reactjs, sadcn, tailiwindcss, typescript, webbuilder, websitebuilder
Language: TypeScript
Homepage: https://web-builder-phi.vercel.app/
Size: 280 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Web Builder

## 🎊Some Glimpse of the App🎊

[https://github.com/user-attachments/assets/53990fdd-79cf-454e-bb5a-4fb63ab1c6e5](https://github.com/user-attachments/assets/a6999e3d-f51f-4e2c-9c8c-af58c41afed4)

## Getting Started

To get started with Web Builder locally, follow these steps:

### Clone the Repository

1. **Clone the repository**:
```sh
git clone https://github.com/yourusername/web-builder.git
```

### Frontend Setup

2. **Navigate to the project directory**:
```sh
cd web-builder
```
3. **Install dependencies using Yarn**:
```sh
yarn install
```
4. **Start the development server**:
```sh
yarn run dev
```

### Creating and Editing Forms

5. **Access the application**:
Open your web browser and go to `http://localhost:3000`.

6. **Create a Form**:
- Click on "Create a Form" or select an existing template to edit.
- You will be redirected to `http://localhost:3000/builder/{id}`.

7. **Drag and Drop Elements**:
- Drag and drop elements like Title, Description, Image, Form fields (Name, Number), and Spacer onto your form.
- Customize the properties of each element by clicking on them and editing the properties panel. Press "Enter" after making any changes to apply them.

8. **Preview Your Site**:
- Once you are satisfied with your form, click the "Preview" button to see how your site will look.
- Make any additional adjustments as needed.

By following these steps, you can quickly set up Web Builder locally, create and customize your forms, and preview your sites.

---

### Backend Setup
for Running this Project you need to add these environmnet variable in .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

POSTGRES_PRISMA_URL="your_prisma_url"
POSTGRES_URL_NON_POOLING="Your_url"

### How to Setup prisma
```
npx prisma studio
```
```
Go to localhost:5000
```

## Tech Stack

- **Next.js 13** with App Router
- **Dnd-kit** library
- **Server Actions**
- **TypeScript**
- **Tailwind CSS / Shadcn UI**
- **Vercel PostgreSQL**
- **Prisma** as ORM

## Features

- **Cross Platform**: Works seamlessly across different devices.
- **Responsive**: Adapts to various screen sizes for an optimal viewing experience.
- **Drag and Drop Designer**: Create forms effortlessly with a stunning drag-and-drop interface.
- **Layout Fields**: Title, SubTitle, Spacer, Separator, Paragraph.
- **Form Fields**: Text, Number, Select, Date, Checkbox, Textarea.
- **Customizable Fields**: Easily add and customize new fields.
- **Form Preview Dialog**: Preview forms before finalizing.
- **Light/Dark Mode Toggle**: Switch between light and dark modes for a comfortable user experience.

## Future Scope

- Add more elements to the drag-and-drop interface.
- Enhance flexibility by allowing specific width adjustments on the screen.
- Add more properties to elements for better customization.
- Integrate AI tools to generate basic templates with essential elements.

Enjoy building your websites with **Web Builder**!

## Contributing

We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to learn how you can help.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Contact

For any inquiries, please contact us at [[email protected]](mailto:[email protected]).

---

Enjoy building your websites with **Web Builder**!