BASE is an intuitive web application that allows users to create, design, and manage different components of a website with minimal effort. By simply prompting the system, users can generate portions of the frontend, enabling the creation of an entire website with ease. Whether you're an experienced designer or just starting, BASE makes building websites accessible to everyone.
Inspired by the simplicity and intuitiveness of Figma, BASE aims to lower the entry barrier for website design. With a low skill floor and an easy-to-use interface, BASE enables users to create sophisticated website components without requiring extensive knowledge of coding or design.
- Intuitive tools: BASE empowers users to create visuals quickly and easily, just like Figma does for design.
- Low skill floor: No advanced design skills are needed to start using the platform, making it perfect for beginners.
- A tool for everyone: Whether you're a novice designer or a seasoned developer, BASE helps you build websites with minimal hassle.
- User-friendly experience: BASE simplifies the process of website creation, allowing anyone to build a website with confidence.
- Javascript
- React
- Python
- OpenAI API
- GPT-4o-mini
- Component Generation: Generate website components like headers, footers, and sidebars with just a prompt. The system translates the user input into actionable code to construct the frontend pieces.
- Real-time Preview: See changes in real-time, allowing you to fine-tune components as you design your website.
- Easy to Use: A simple and intuitive interface that doesn’t require extensive design or development knowledge to use.
- Element Manager: A powerful management system that helps control the structure of your website, allowing you to add, modify, or delete elements efficiently.
- Third-Party API Integrations: Enhance your website with additional functionality through third-party API integrations, extending the capabilities of your design.
-
Element Manager Creation
The core feature is an Element Manager that gives users control over the structure of their website. It will allow users to preview changes made to the components instantly. -
API Integrations
After the basic functionality of component creation is in place, BASE will support third-party API integrations to provide additional layers of functionality, making the application even more powerful and customizable. -
Future Enhancements
As BASE evolves, more features will be introduced to allow users to customize components further, with an increasing focus on responsive design and compatibility with various content management systems.
To use BASE, simply follow these steps:
- Start a New Project: Create a new project where you can begin designing your website.
- Prompt for Components: Use the interface to prompt for the components you want to add. You can specify things like headers, footers, sidebars, etc.
- Edit and Preview: As you add components, you’ll be able to see your changes in real time. Modify and adjust each component as needed.
- Export and Integrate: Once your components are complete, you can export the code or integrate the design into your existing website using the provided tools.
To set up BASE on your local machine, follow these instructions:
-
Clone the repository:
git clone https://github.com/yourusername/BASE.git
-
Navigate to directory:
cd BASE -
Install dependencies:
npm install --force
-
Deploy the application:
npm run start
With BASE, building websites is no longer a daunting task. Whether you're just starting or you're a seasoned pro, BASE's intuitive system allows you to focus on creativity, not complexity. Let your ideas come to life, one component at a time!
- Create a element manager to control structure with which elements are being added and allow users to preview changes.
- Allow third-party API integrations to add further layer of application.
Also, feel free to check out the BASE.pdf presentation for more information about our application.