Skip to content

TheHadiAhmadi/site-builder

Repository files navigation

Site Builder

Site Builder Logo

Overview

Site Builder is a project that enables users to create simple websites without any programming knowledge. Whether you're a beginner or a seasoned web designer, Site Builder simplifies the process of building, managing, and customizing your website through an easy-to-use drag-and-drop interface.

Features

  • Drag-and-Drop Interface: Create pages effortlessly using our intuitive drag-and-drop builder.
  • Templates: Choose from a variety of templates to kickstart your website.
  • Page Management: Create, update, and delete pages with ease.
  • SEO Management: Optimize your pages for search engines directly within the builder.
  • Sections & Blocks: Add, edit, and customize sections and blocks on your pages.
  • AI-Assisted Module Creation: Use AI to generate and update blocks.
  • Dynamic Pages: Create dynamic content-driven pages with ease.
  • Collection Management: Manage content collections and integrate them into your pages.

Getting Started

0. Using npm script

To create site using TailCMS without cloning the repository you can do this:

npx tailcms@next init <folder>

the script will initialize a project and you can start working with it by running these commands:

cd <folder>
npm install
npm start

Now the project should be available at http://localhost:3000

1. Initial Setup

  1. Clone the repository:

    git clone https://github.com/TheHadiAhmadi/site-builder.git
    cd site-builder
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm start
  4. Open your browser and navigate to http://localhost:3000 to start building your site.

2. Using Templates

  • You can select a template during the setup process and customize it based on your needs.

3. Creating and Managing Pages

  • Pages sidebar item is dedicated to page management, you can create new page, edit and preview pages.
  • Each page can have one or more Sections
  • Each section can contain one or more Blocks.
  • Block is the TailwindCSS based template which supports props.
  • You can add or update Blocks from page editor using AI.

4. AI-Assisted Features

  • Create Block: Use AI to generate a new block.
  • Update Block: Update existing blocks using AI recommendations.
  • Page SEO Helper: You can generate SEO Tags for page using AI.

5. Dynamic Pages and Collections

  • Dynamic Pages: Create pages that automatically update based on dynamic content.
  • Collections: Manage content collections and integrate them into your pages.
  • Use Collection in Blocks: Set collection properties within block settings for dynamic content.

Screenshots

Page editing Page Settings Update Module with AI Data Table Dark Mode

Upcoming Features

  • Authentication
  • File Management
  • Content Sort
  • Content Pagination

Contributing

We welcome contributions! Please read our Contributing Guide to learn about how you can get involved.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Contact

For questions, suggestions, or support, please open an issue on GitHub or contact me at thehadiahmadi@gmail.com.