Introduction

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.

Inspiration

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.

Team Members

I can proudly say that I undertook the project on my own and brought it to completion.

SiteBlaze Details

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.

Signup

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

Login

A standard login flow users can log in by filling in the required fields.

My Templates

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.

Active Site Settings

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

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

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

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 Queries

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

Account Settings

This section shows the user's details which can be edited by the users.

Change Password

Change Password Screen

Users can change their password from here.

Logout

Used for logging out.

Tech Stack

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.

Appwrite's Usage

I used Appwrite's user authentication, database, and storage for this project, among all database was most extensively used.

Authentication

User management and authentication in any application is a challenging task, I used appwrite's simple email and password authentication feature for the project, it was very easy to integrate and understand.

Database

The entire application uses a lot of data, I had to make 8 collections and multiple indexes to ensure optimal performance as this is the service that is used extensively in the entire application.
Following is the overview of the database for the application,I created 8 collections each of which has been described below

• Projects :- To store the projects.

• Blogs :- To store blogs.

• CTA :- To store the cta queries.

• Project Count :- To store the count of the projects (decided to go with this approach as this would be required only for pagination and only once during the mounting phase of the table component, also when data increases we would not have to count the no of entries in Projects to find the total no of entries for a user)

• Blogs Count :- To store the count of the blogs

• CTA Count :- To store the count of CTA queries.

• User Detail :- to store the mapping between UID and UserName.

• Portfolios :- Collection of all the Templates/Websites, here we also track which template is active.

Storage

There are multiple places where the application requires uploading images, I used appwrite's storage to store the images and use the cloud urls wherever and whenever required.

Challenges Faced

Developing SiteBlaze came with its fair share of challenges, some of them are listed below.

• One of the primary hurdles we encountered was striking a balance between simplicity and flexibility. We aimed to create a tool that was user-friendly for individuals with minimal technical knowledge, while still offering enough customization options so that the website looks great.
  Tried my best to make the process of customization of the website template easy and more intuitive for a user with minimal or no experience with the platform.

• Ensuring optimal performance and responsiveness was another challenge which was resolved by experimenting with many web designs and coming up with a CSS which fits almost all standard website templates which I had in mind.
  Had to push my CSS skills to overcome this.

• Realtime Preview Of the site, when the user is editing was a challenging task, there were 3 challenges.
  How to Identify changing data, showing preview and distinguishing when to show from which source of data for a single component.
  Finally, I came up with a solution which used local storage for storing data and reading data and meta attributes in the routes to identify the data source.

• The entire application contains a lot of routes and for the first time, I felt routing is difficult because I had to apply a lot of rules for each route and a lot of route parameters would be required, but eventually a bit of experimenting and going through the docs made the problem easy and I was finally able to make the product as per my idea.

• Integrating Wysiwyg editor quill was easy but there was a problem with uploading images, if you upload an image it converts it into base64 and stores it as a string which is not at all ideal to scale.
  I was able to resolve this by using a module which inserts the img tag with the image URL after uploading it to the server (Appwrite in our case).

Future Plans

Here are some of the key future plans for SiteBlaze:

• Introduce more templates which could be customized for a wide variety of brands/users.

• Provide more customization options, like theme colour pallet selection etc.

• Integrate an Analytics section which could provide users with insights about the visitors and their actions

• SEO Optimization for the websites

• Integrating Email Marketing tools and adding a section

• Integrating AI for assistive writing & relevant image generation if required.

SiteBlaze Code Repository

Here is the link to SiteBlaze's code repository, feel free to raise issues and contribute.
https://github.com/baroiSubhra/SiteBlaze

SiteBlaze Link & Demo Credentials

Here is the link to SiteBlaze

Site :- https://siteblaze.pages.dev
Email :- demo@demo.com
Password :- password

SiteBlaze Demo

Here is the link to the demo of SiteBlaze
https://youtu.be/Qjv3Knsq1Lg

Conclusion

SiteBlaze is a testament to the power of Vue.js and Appwrite in simplifying website creation. I am proud of what I have accomplished and excited to present SiteBlaze as my Hackathon submission.
I would love to hear back from the community on the feedback and would request all to try this once.
Thank a ton Appwrite and Hashnode for the opportunity!!

#Appwrite