Grace
About this template
Template Link on Bubble Marketplace
Photos
Introduction
The Grace template is a saas boilerplate professionally designed solution that provides developers with a versatile foundation to create applications for a wide range of professional services. Originally designed for senior care and assistance, this template can easily be adapted to suit various industries and business needs.
It includes built-in features like user login and logout, ensuring a seamless and professional experience for both administrators and end-users. The template’s responsiveness ensures that your product shines on any device, offering a user experience that matches the quality of your service.
Ideal for entrepreneurs, startups, content creators, or developers building products SaaS or MVP, Grace accelerates your journey from idea to deployment. This template allows you to allocate time and resources to building the core functionalities of your application.
This template is perfect for creating professional websites or applications across industries. Whether you're building a platform for senior living services, a corporate site, or a business management tool, the Grace template offers the flexibility and features you need.
Accelerate your development process with this adaptable, feature-rich template designed to meet the demands of modern professional services.
Key Features
Flexible Page Structure:
Includes essential pages such as Home, About, Services, Blog, Units, Pricing, Contact, Privacy, Terms, Login and Logout. These pages can be customized to align with different business goals and industries.
Powerful Admin Dashboard:
A comprehensive admin panel allows efficient management of clients, employees, and other critical data, simplifying operational workflows.
Developer-Friendly Design:
Built with usability in mind, the template lets developers focus on adding functionality while offering a polished, ready-to-use interface.
Modern and Adaptable Design:
The clean and professional aesthetic ensures compatibility with a variety of industries, from senior care to consulting, real estate, and beyond.
Customizability:
Easily modified to match your brand's unique identity, making it an ideal starting point for diverse business applications.
⚡Functional Pages
Home: A visually striking homepage to showcase your product or service.
About: Highlight your brand story and mission effectively.
Contact: Allow seamless communication with a dynamic contact form.
Blog: Engage users with articles and updates, complete with CMS integration.
Units: Present detailed information about individual units, services, or offerings, with visually appealing layouts to highlight key features and benefits.
Services: Showcase your range of services with clarity, using organized sections and visuals to emphasize their value and relevance to your audience.
Pricing: Present your pricing plans in a clean and intuitive layout.
Legals: Display terms, privacy policies, and other legal information effortlessly.
Dashboard: Manage customer and employee data and content dynamically, fully integrated CMS.
Portal: Where your customer will have access to all the features of the professional service.
⚡Why Choose Grace Template?
Time-Saving: Get started immediately with a pre-built, fully functional structure.
Customizable: Easily adapt the design to suit your branding and app needs.
User-Focused Design: Ensure your audience has a seamless experience on every page.
☝Notes
This template is not the final product. Any part of the application can be modified for different needs.
Setup Guide
This guide is the beginning of the documentation with the built-in Notes for the database. Will help you gain a better understanding of how the template and Bubble works.
⚡Starting with the Template
After purchasing or adding a template to your account, you will see a drop-down menu in the pop-up after clicking the "Create an app" button that allows you to choose a template as the basis for your new app.
After selecting a template you purchased or added to your account, fill in the other fields with the required data and press "Get started".
Wait for Bubble to load the application with all the data. After the application has loaded, you'll see the Bubble assistant on the left side for New Application. You can close it or follow the assistant steps to adjust different settings. Now you're ready to go and dive into Bubble no-code development toolset.
☝Important note: To ensure the design and structure of our template in the demo preview, some conditions are required to maintain the integrity of the template. Please follow the guidelines below to remove them. This will not affect the functionality of your template.
⚡Remove Demo Login
This template contains demo accounts and demo buttons for testing purposes, which do not require a full sign-up process to test the platform's features. Feel free to exclude these login options in your app.
To delete demo, follow the instructions:
On the login page, find the "Demo Group" in element tree and delete it. (you can also select the demo group in the edit screen and remove it with the delete button on your keyboard.)
⚡Remove the conditional for "Element isn't clickable".
Please, follow the guidelines below:
On the dashboard page, find the "Popup Password" in element tree and look for the "Button UPDATE" and remove the conditional "Current User's Demo is yes" and the "Text": "This button is disabled for demo preview."
Delete the text and conditional indicated in the image bellow.
On the dashboard page, find the "Group Settings" in element tree and look for the "Button UPDATE (change password)" and remove the conditional "Current User's Demo is yes" and the "Text": "This button is disabled for demo preview."
Delete the text and conditional indicated in the image bellow.
⚡Remove the conditional "Only When" in the workflows.
Please, follow the guidelines below:
On the dashboard page, in the workflow tab, find the workflows that have conditional only when: "Parent's group...Creation Date > Arbitrary date/time"
This conditional is used so that the database contents are not removed or modified, to maintain the integrity of the live demo.
💡Remember that all data in the database is dummy for demo purposes.
Understanding how user logic functions in the database.
The steps to create customers and employees are carried out directly on the dashboard page only by with the Admin or Employee user type.
Remember, you can modify all the logic to suit your type of service.
As the owner of the application, you have access to the database. You should use the Signup page to create your account with email and password. Initially, you will have a user type registered as "Guest".
After completing this step, in the database of your Bubble project, change the user type of your account to "Admin" so that you have access to all the features and rules of the template.
This template was built following the logic for creating new users as follows:
You, as the business owner, or another person who is part of your project and has an Admin profile, for example, create accounts for your employees. They receive a link via email (the same one used during registration) so that they can set up their own password and access your company's Dashboard.
Your employees will have an "Employee" user type, which includes some privacy rules, meaning they will not have the same full access as the Admin profile.
Employees can register new customers. They will receive a magic link via email (the same one they used to register) so they don't need to create a password. The customer will have a "Customer" user type and will have access to the company portal only to track specific information about their loved ones, in the case of the model built for Grace Senior Residential.
Everyone who creates an account on your application through the signup page will have the "Guest" user type. This type does not have access to anything in your application and will be in a reserved space on the Dashboard that only appears for those with the Admin profile. As an admin, you can change the "guest" user type to define it as an employee or customer, or take no action. They will remain in this hidden list. Thus, the signup page is exclusive for creating an Admin account, as employees will be created by you, the Admin, and customers will be created by employees.
Regarding the Customer: In the model developed for Grace, the customer is the elderly person residing in one of the Grace residential. Each elderly person has a "Trustee", who is the person that will have access to the Portal through the magic link sent via email, to monitor the information about their loved ones while they are away.
Pages Overview
⚡Index
This is the core page of the template, that displays a stylish Professional Services.
☝ All images and text are displayed for demonstration purposes and can be changed (with exception: repeating groups and reusable elements) directly on the page.
⚡reset_pw
Here, users reset their password after accessing the link in the mail.
⚡404
This is a page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.
⚡About
This page displays a description of the website's product or service.
⚡Contact
This page contains the Contact Us form.
⚡Pricing
This page contains detailed information about a product/service pricing.
⚡Blog
This page contains the blog posts.
⚡Internal blog page
This page contains detailed information about a blog. It displays images, title, and detailed content.
⚡Services
This page displays a description of the service offered by the website owner.
⚡Units
This page displays a description of the units offered by the website owner.
⚡Terms
This page displays a description of the website owner's terms of employment.
⚡Privacy
This page displays a description of the website owner's privacy policy.
Reusable elements
⚡Footer
This reusable element is the footer of your app. It contains your prpfessional services page links, logo, and social links.
⚡Navigation / Navigation Mobile
This reusable element is the header and includes the mobile navigation. It contains logo and navigation links through the app.
⚡CTA
This reusable element is the CTA of your app. It contains call to action.
⚡Blog Card
This reusable element is the blog card used on all pages.
⚡Unit Card
This reusable element is the unit card used on the units page.
Workflow
Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the Gloria UI standard for the use of colors with a detailed explanation.
The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.
Gray - All other actions.
Blue - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.
Red - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."
Green - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.
Orange - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.
Purple - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.
Cyan - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.
Brown - Custom workflow, API workflow, and similar tasks.
Data Types
The database contains information for demonstration purposes only.
⚡User
This type of data stores information related to the user.
First Name
text
Stores the user first name
Last Name
text
Stores the user last name
Avatar
image
Stores the user image
Demo
yes/no
Stores the demo user type (for demo purposes only)
Active
User Active? (options sets)
Stores if user is active
User Type
User Type (options sets)
Stores the user type (Admin/Employee/Customer)
Responsible
Customer (data types)
Stores the name of the Responsible related to the
customer
Employee
Customers (data type) - list
Stores the list customer of the Employee
⚡Customers
This type of data stores information related to the customers.
First Name
text
Stores the user first name
Last Name
text
Stores the user last name
Avatar
image
Stores the user image
Date Birth
date
Stores the customer date of birth
Nursing
User (data types)
Stores the name of the nurse caring for the customer
Responsible
User (data types)
Stores the name of the person responsible for caring for the customer.
Trustee
User (data types
Stores the name of the trustee responsible for caring for the customer
Unit
Units (data types)
Stores the name of the unit where the customer is hosted
⚡Units
This data type is used to stores information about Grace units.
Name
text
Stores the unit name
text
Stores the unit email
Image
image
Stores the unit image
Address
text
Stores the unit address
Phone
text
Stores the unit phone number
Customers
User (data type) - list
Stores the list of customers hosted on the unit
⚡Testimonial
This type of data is used to stores customer testimonials.
Testimonial
text
Stores customer testimonials.
Name
text
Stores the customer name
Image
image
Stores the customer image
Client Type
Client Type (options sets)
Stores the client type (Visitor/Resident)
⚡Activities
This type of data stores information related to the activities customers.
Name Activity
text - list
Stores the activity names
Type Activity
Activities (option sets)
Stores the activity type category
Description
text - list
Stores the activity description
Banner
image
Stores the activity image
⚡Post
This type of data is used to stores the blog post.
Title
text
Stores the blog post title
Meta Description
text
Stores the blog post meta description
Content
text
Stores the blog post content
Image
image
Stores the blog post image
Category
text
Stores the blog post category
⚡Page
This type of data is used to stores the pages.
Title
text
Stores the of legal terms name
Content
text
Stores the of legal terms content
Options sets
⚡User Type
This option sets contains the type of the user.
Admin
Employee
Customer
⚡User Active?
This option sets defines if the user is active.
Active
No active
⚡Customer Type
This option sets contains the type of the user in testimonial.
Visitor
Resident
⚡Activities
This option sets contains the type of the activities.
Physics
Socialization
Stimulation
Extras
The template is sold as is. Feel free to contact us with any questions and we will be happy to assist you – https://gloriaui.com
Follow us:
💡 Facebook: https://www.facebook.com/gloriauidotcom
💡 Twitter: https://x.com/gloriaui_
Last updated