AlmaBase Assessment

Overview

AlmaBase Assessment is a robust React page builder application designed to provide users with an intuitive and feature-rich platform for creating dynamic pages effortlessly. Leveraging a combination of powerful libraries, AlmaBase Assessment empowers developers to build interactive and visually appealing web pages with ease.

Libraries Used

1. Craft.js

Craft.js serves as the backbone of AlmaBase Assessment, offering a versatile set of tools for constructing drag-and-drop page editors. This library facilitates the creation of dynamic user interfaces, allowing users to seamlessly design and customize their pages.

• Documentation: Craft.js Documentation
• Installation: npm install @craftjs/core or yarn add @craftjs/core

2. Heroicons

AlmaBase Assessment integrates Heroicons, a collection of high-quality SVG icons available under the MIT license. These icons enhance the visual appeal of the application, providing a wide range of options for iconography.

• Documentation: Heroicons Documentation
• Installation: npm install @heroicons/react or yarn add @heroicons/react

3. Copy to Clipboard

The Copy to Clipboard library simplifies the process of copying text to the clipboard, offering a straightforward solution for users to duplicate content generated within the page builder.

• Documentation: Copy to Clipboard Documentation
• Installation: npm install copy-to-clipboard or yarn add copy-to-clipboard

4. lzutf8

For efficient UTF-8 encoding and decoding, AlmaBase Assessment utilizes the lzutf8 library. This lightweight yet powerful library contributes to the optimization of data handling within the application.

• Documentation: lzutf8 Documentation
• Installation: npm install lzutf8 or yarn add lzutf8

5. Tailwind CSS

Tailwind CSS, a utility-first CSS framework, is integrated into AlmaBase Assessment to provide a comprehensive set of low-level utility classes for designing the application's user interface.

• Documentation: Tailwind CSS Documentation
• Installation: Follow the installation instructions in the documentation.

Folder Structure

Explore the folder structure of the AlmaBase Assessment project. Click here to view the Miro board illustrating the folder structure.

User Interface

Desktop View

Tablet View

Mobile View

Load Modal

Style Modal

Selected Element

Features

1. Drag and Drop Components:

   • Easily drag and drop components onto the canvas to build your page.

2. Customize Components:

   • Customize the components according to your specific requirements.

3. Clipboard Actions:

   • Utilize the provided buttons or shortcuts for actions like copying elements to the clipboard.

4. Explore Integrated Libraries:

   • Explore the various features provided by the integrated libraries, such as Craft.js, Heroicons, Copy to Clipboard, lzutf8, and Tailwind CSS, to enhance your page-building experience, including updating and deleting components.

5. Update and Delete:

   • Seamlessly update and delete components as needed during the page-building process.

Live Demo

Check out the live demo of AlmaBase Assessment: Live Demo

Getting Started

To get started with AlmaBase Assessment, follow these steps:

1. Clone the repository:

   git clone https://github.com/03brainy-clicks/almabase.git

2. Navigate to the project directory:

   cd almabase

3. Install dependencies:

   npm install

   or

   yarn install

4. Start the development server:

   npm start

   or

   yarn start

5. Open your browser and visit http://localhost:3000 to view the app.

Usage

1. Drag and drop components onto the canvas to build your page.
2. Customize the components as needed.
3. Utilize the provided buttons or shortcuts for actions like copying to the clipboard.
4. Explore the various features provided by the integrated libraries to enhance your page-building experience, including updating and deleting components.

Feel free to delve into the source code, make modifications, and adapt AlmaBase Assessment to meet your specific requirements.

Repository Link

For the latest updates, issues, and contributions, please visit the AlmaBase Assessment GitHub Repository.

License

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