In the digital world, the first impression matters. When visitors land on your website, you want to captivate their attention and leave a lasting impression.
SiteBlaze is a web application that enables users to effortlessly create stunning landing pages in just a few clicks. Powered by Vue.js and Appwrite, SiteBlaze empowers users to customize major sections of their websites and provides a seamless content management system for real-time blogging and project updates.
There are no-code tools available tools like Webflow and Framer which are interesting, I have seen developers selling amazing templates online which users can buy and use to customize as per their needs, but the limitations related to bandwidth and the number of cms content make these options expensive and very difficult to manage for users on a long run plus there is an added minute learning curve required to learn the tools and customize the templates.
The inspiration behind creating SiteBlaze stemmed from the desire to simplify website creation and make the process accessible to all, I wanted to provide a tool that eliminates barriers to learning new tools and technology and allows individuals or businesses to create captivating websites that leave a lasting impression which comes with a dedicated CMS using which users can post their projects and blogs in realtime.
SiteBlaze landing page consists of a short overview of the product with detailed sections related to all the features of the application, links to login and signup are available using which users can signup or log in.
First Step Of Signup
Second Step Of Sign Up
Signup is fairly simple and standard, after filling in the basic details user will be logged in to the dashboard, it is a two-step process the first stage includes taking the user name and name, and the second stage takes email and password for creating the account
Note that all fields are required especially the username since this is used in generating the personal website link
Login
A standard login flow users can log in by filling in the required fields.
My Templates Section
This section contains all the templates chosen by the user for customization user can see visit and edit options, visit button opens the custom template in a new tab and edit redirects to the Manage site page where user can customize,
On fresh login, since there are no templates chosen for customization this section is empty by default.
My Active Site (Read Only Mode)
Read Only Mode
This tab opens the currently active website, the user is shown the site in a responsive frame and there are CTAs
Delete:- Used to delete the customized template
View:- Opens the website in a new tab
Activate/Deactivate:- Used to Activate or Deactivate the Site, by default every site that you choose for customization is in an inactive state
Edit:- Used to enter edit mode ( this is where the magic happens )
My Active Site (Edit Only Mode)
Edit Mode
Users enter the edit mode by clicking the Edit button.
On the top, there are two buttons followed by a preview section and the editor section.
Cancel:- To exit edit mode
Save Changes:- To save the changes made
The preview section shows the preview of the site,
The last section consists of an accordion containing multiple sections which contain inputs that can be changed, and on changing inputs the real-time preview of the same can be seen in the preview section, after clicking on save the changes will be reflected in your site.
Template Store
This is the collection of templates that users can use to customize, as of now there are only a few templates, I will add more in the coming future.
On each card, there are two buttons
View:-launches template in a new tab.
Customize:-Adds a copy of this template to My templates for the user to customize.
Projects Section
This is the dedicated section for managing Projects, user can easily add, edit and delete projects.
There are two modes either the user can save the project or choose to save as draft or publish it online
Status meaning
online:- Visible the world
draft:-In drafts invisible to the world
Content Filling Page To Create Project/Blog
Users can add Projects using the add Project Button, it opens a page that asks for details which users can simply fill in and watch a preview of the content.
Once happy, the user can either choose to publish or choose to save it as draft
Blogs Section
This is the dedicated section for managing Blogs similar to projects, all the operations which can be performed for projects can be performed for blogs.
CTA Querries Section
This section lists the details gathered from the Contact Us form or CTA section of the users' live website, user can edit and delete the cta queries.
CTA Edit Page
edit action opens up a form which the user can edit and save or cancel and go back to the cta queries section.
Account Settings
This section shows the user's details which can be edited by the users.
Change Password Screen
Users can change their password from here.
Used for logging out.
Behind the scenes of SiteBlaze, a powerful and seamless web application, lies a carefully selected tech stack that harnesses the strengths of various technologies which are listed below.
-
Vue for Frontend
Vue served as the foundation of SiteBlaze's front-end development.
There were two reasons for selecting Vue over any other framework first the framework supports two-way data binding out of the box, virtual dom, template syntax, is flexible, and generates relatively smaller bundle sizes on the build which makes this a suitable candidate for this project, the second reason, I could find only a handful projects made in Vue, so thought of giving it a try. -
Tailwind for Styling
Two reasons behind using tailwind, it helps in rapid development and its easy to use
-
Appwrite for Authentication, Database and Storage
Appwrite's user authentication, database, and storage capabilities provided a solid foundation for managing users and serving dynamic content on the websites.
Its robust backend infrastructure ensured the security and efficiency of data storage and retrieval.My developer experience working with Appwrites is 10 on 10, I was able to integrate everything smoothly, and there was not even a single moment where I was clueless and was not able to debug any error, Appwrite is pure gold, kudos to Appwrite for creating such amazing product and maintaining developer-friendly documentation and making things so easy to work with.
-
CloudflarePages for Deployment
The main reason for choosing this is Cloudflare's fast content delivery through its CDN (Content Delivery Network) and additional security features such as DDoS protection and Web Application Firewall (WAF).
It simplifies the process of publishing code by allowing users to seamlessly connect their repository to Cloudflare Pages and automatically deploy code whenever changes are pushed to the repository.
Here is the link to SiteBlaze
Site :- https://siteblaze.pages.dev
Email :- demo@demo.com
Password :- password
Here is the link to the demo of SiteBlaze
https://youtu.be/Qjv3Knsq1Lg
Following are the steps to run the project
Clone repository
git clone https://github.com/BaroiSubhraJyoti/SiteBlaze.gitNavigate inside and run the following command to install packages
# make sure to use node version > 16
npm installCreate appwrite project with the following schema
...comming soon...
Create and Populate a .env file at the root with relevant appwrite cloud ids
VITE_ENDPOINT =
VITE_PROJECT_ID =
VITE_DATABASE_ID =
VITE_COLLECTION_PORTFOLIOS =
VITE_COLLECTION_PROJECTS =
VITE_COLLECTION_PROJECT_COUNT =
VITE_COLLECTION_USER_DETAILS=
VITE_COLLECTION_BLOGS =
VITE_COLLECTION_BLOG_COUNT =
VITE_IMAGE_BUCKET_ID =
VITE_COLLECTION_CTA =
VITE_COLLECTION_CTA_COUNT =
VITE_PAGINATION_LIMIT=
Use the following command to run locally
npm run devUse the following command to build the project
npm run build