> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Writeology

<Check>
  Beginner Level : Simple templates for new users with little to no Bubble experience.
</Check>

<Frame>
  <img src="https://mintcdn.com/hatchimike/joImHwvvD9BpwnTM/images/MockupPersonalBlog.jpg?fit=max&auto=format&n=joImHwvvD9BpwnTM&q=85&s=653a2291b0efc7ac7c999d869a451c78" alt="Mockup Personal Blog" width="1600" height="960" data-path="images/MockupPersonalBlog.jpg" />
</Frame>

## Overview

Our personal blog template is the perfect solution for those who want to share their passion, thoughts or expertise with the world. Carefully designed, it incorporates essential features for easy management and an excellent user experience :

Admin Dashboard : An intuitive dashboard lets you easily manage your content, settings, and user interactions. Everything is at hand for a smooth management of your blog.

Responsive Design : This template adapts perfectly to all devices, ensuring an optimal user experience for your visitors to use a desktop, tablet or smartphone.

Support & Documentation : Access responsive support and comprehensive documentation that will guide you through all the features of the template, helping you troubleshoot and optimize your blog usage.

This personal blog template is more than just a blogging platform; it’s a powerful tool to connect with your audience and share your vision effectively.

## Functionalties

<AccordionGroup>
  <Accordion title="Fully responsive">
    The application is designed to adapt seamlessly to all screen sizes and devices, ensuring a consistent and optimized user experience on desktop, tablet, and mobile.
  </Accordion>

  <Accordion title="Dashboard Admin">
    A dedicated administrative interface that allows full control over data, users, and key application settings through a centralized management panel.
  </Accordion>

  <Accordion title="CRUD Workflows">
    Structured workflows that handle creating, reading, updating, and deleting data efficiently, ensuring reliable and scalable data management.
  </Accordion>

  <Accordion title="Modern Design">
    A clean and contemporary interface built with intuitive layouts, balanced spacing, and a strong visual hierarchy to enhance usability and user engagement.
  </Accordion>

  <Accordion title="Dynamic Contents">
    Content that updates automatically based on user interactions or database changes, providing a personalized and interactive experience.
  </Accordion>

  <Accordion title="Reactive Support">
    A responsive support system that ensures quick issue resolution and continuous assistance to maintain smooth application performance.
  </Accordion>

  <Accordion title="Workflow Structure">
    A clearly organized workflow architecture using logical grouping and visual categorization to improve readability, scalability, and long term maintainability.
  </Accordion>
</AccordionGroup>

## Pages

<AccordionGroup>
  <Accordion title="index" />

  <Accordion title="article">
    The page that details each article with elements from the Article Data Types
  </Accordion>

  <Accordion title="blog_categories">
    The page that presents the articles by the category that was selected
  </Accordion>

  <Accordion title="search_page">
    The page that presents the articles by the key word that was selected
  </Accordion>

  <Accordion title="contact">
    The page that allow the users to contact you
  </Accordion>

  <Accordion title="admin">
    The page that will allow you to create and modify articles
  </Accordion>

  <Accordion title="404">
    Totally personalized error page
  </Accordion>
</AccordionGroup>

## Reusable Elements

A collection of shared components built to be used across multiple pages, helping maintain design consistency while making updates and scaling more efficient.

<Note>
  A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit.
</Note>

<AccordionGroup>
  <Accordion title="Header">
    This reusable element is located at the top of each page and contains the template logo, the different article categories, a contact button to redirect the users on the contact page, a home button to allow the users to go back to the the home page and a hidden Menu icon which appears depending on the size of the page.
  </Accordion>

  <Accordion title="Footer">
    This reusable element is located at the bottom of each page and contains the newsletter subscription system
  </Accordion>
</AccordionGroup>

## Workflows

This structure uses folders and colors to organize workflows clearly, improve readability, and ensure consistent logic management across the application.

<Note>
  In Bubble, workflows define how an application behaves. They are triggered by events and run actions that manage data, navigation, and user interactions.
</Note>

### Folders

Folders are structured by functional category, with each folder grouping workflows related to a specific domain of the application. This approach ensures that every type of logic has its dedicated space, making the overall workflow architecture clearer, more organized, and easier to maintain.

<AccordionGroup>
  <Accordion title="Database">
    This folder contains workflows responsible for creating, updating, deleting, and managing data within the application. It centralizes all logic that interacts directly with the database to ensure structured and consistent data handling.
  </Accordion>

  <Accordion title="Navigation">
    This folder groups workflows that control page transitions, redirects, and user journeys. It defines how users move through the application and ensures a clear and predictable flow.
  </Accordion>

  <Accordion title="Plugins">
    This folder includes workflows that depend on external plugins or third party integrations. It isolates plugin related logic to keep the core application structure clean and organized.
  </Accordion>

  <Accordion title="Visuals">
    This folder contains workflows that affect the user interface, such as showing or hiding elements, triggering animations, or dynamically updating what the user sees. It manages front end behavior without altering stored data.
  </Accordion>

  <Accordion title="Custom States">
    This folder groups workflows that manage temporary front end data stored in custom states. It is used to control dynamic interactions and interface logic without impacting the database.

    <Note>
      Custom states are variables that you can save on any element on the page, including the page itself. They let you store data temporarily that is reset when the page is reloaded. This is useful when you need your app to remember some information that you don’t need to store permanently in the database.
    </Note>
  </Accordion>

  <Accordion title="Emails">
    This folder includes workflows dedicated to sending automated or transactional emails. It centralizes communication logic to ensure consistency and easier maintenance.
  </Accordion>

  <Accordion title="APIs">
    This folder contains workflows that handle external API calls and data exchanges with outside services. It organizes integration logic and keeps external communication clearly separated from internal processes.
  </Accordion>
</AccordionGroup>

### Colors

Colors are used as visual indicators to distinguish workflow types and intentions. Each color corresponds to a specific category of action, allowing quick recognition of the workflow’s purpose and improving readability across the entire logic structure.

<AccordionGroup>
  <Accordion title="Blue">
    Blue is used for workflows involving navigation, such as redirects to other pages or links.
  </Accordion>

  <Accordion title="Green">
    Green indicates workflows involving the database, such as creating or updating data in the database or the registration/connection system.
  </Accordion>

  <Accordion title="Red">
    Red indicates workflows that have an impact on deleting data or resetting values.
  </Accordion>

  <Accordion title="Orange">
    Orange is reserved for visual elements, such as showing or disappearing pop-ups, floating groups, and other such interactive elements.
  </Accordion>

  <Accordion title="Purple">
    This color is reserved for elements related to APIs and Plugins.
  </Accordion>

  <Accordion title="Cyan">
    The Cyan color indicates specific interactions triggered by custom events or custom states.
  </Accordion>

  <Accordion title="Brown">
    Brown is use for email send
  </Accordion>
</AccordionGroup>

## Datatypes

The database consists of different **data types** that you as the developer plan and set up. Data types are like containers that hold specific types of information and each data type is made up of **fields** where that information is stored.

### User

| Field Name | Type    | Note                                                 |
| ---------- | ------- | ---------------------------------------------------- |
| First Name | `text`  | Contains the first name of the user who is logged in |
| Last Name  | `text`  | Contains the name of the user who is logged in       |
| Photo      | `image` | Contains the photo of the user who is logged in      |

### Article

| Field Name | Type         | Note                                   |
| ---------- | ------------ | -------------------------------------- |
| Category   | `Categories` | Contains the category of the article   |
| Content    | `text`       | Contains the content of the article    |
| Thumbnail  | `image`      | Contains the main image of the article |
| Title      | `text`       | Contains the title of the article      |

### Newsletter Subscription

| Field Name | Type   | Note                                            |
| ---------- | ------ | ----------------------------------------------- |
| Email      | `text` | Contains the email of the person who registered |
| Name       | `text` | Contains the name of the person who registered  |

## Option Sets

This section covers option sets, used to store a static list of options in a database-like structure

<Note>
  Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that’s rarely updated.
</Note>

### Category

This option set defines the different blog article categories available in the application. It ensures consistent classification of content and makes it easier to filter, organize, and display posts dynamically.

| Attributes | Type | Note                                                                                             |
| ---------- | ---- | ------------------------------------------------------------------------------------------------ |
| Display    | text | Display values correspond to the different blog article categories available in the application. |

* Tips
* Resources
* Guides

### Dashboard Admin

This option set defines the different navigation tabs within the admin dashboard. It is used to control internal navigation and manage which section, such as editing or newsletter management, is displayed to the user.

| Attributes | Type | Note                                                                                             |
| ---------- | ---- | ------------------------------------------------------------------------------------------------ |
| Display    | text | Display values correspond to the different blog article categories available in the application. |

* Account
* Create Article
* Articles
* Newsletter

## Plugins

An overview of the external plugins integrated into the application to extend its native capabilities and enhance specific features or functionalities.

<Warning>
  You might need to install these plugins when using the template.
</Warning>

### Iconify

<Badge color="green">Free</Badge>

<Card icon="plug-circle-bolt" href="https://bubble.io/plugin/iconify-1604083196447x185573648335896580" title="Iconify">
  Unofficial Iconify plugin. Add any Icon from [http://iconify.design](http://iconify.design) to you application, change it's color\*, flip it, rotate it\*, resize it, just do what you want.
</Card>

### Reveal & Hide Password

<Badge color="green">Free</Badge>

<Card icon="plug-circle-bolt" href="https://bubble.io/plugin/reveal--hide-password-1531310660066x700901076712292400" title="Reveal & Hide Password">
  Toggle password visibility in Bubble input fields using a reveal/hide icon. Supports icon size, color, position, default visibility state, multiple inputs, and dynamic control with minimal setup.
</Card>

### Rich Text Editor

<Badge color="green">Free</Badge>

<Card icon="plug-circle-bolt" href="https://bubble.io/plugin/rich-text-editor-1580238841425x582072028873097200" title="Rich Text Editor">
  Enable your users to write rich, formatted text in an input. Compatible with text elements and email.
</Card>

## Refund Policy

<Card href="/refund-policy" title="Refund Policy">
  This policy defines the conditions under which refunds may be requested for our products. It distinguishes between templates distributed through the Bubble Marketplace and the Brikl Chrome Extension, specifying the applicable deadlines, eligibility requirements, and usage-related limitations for each.
</Card>

## Support

Your satisfaction is our priority. Do not hesitate to contact us if you have any questions or problems.

[support@brikl.co](mailto:support@brikl.co)

[https://www.brikl.co/](https://www.brikl.co/)
