Building a Full-Stack Web Application with Free Resources

A full-stack web application using all free resources.

This project includes the following:

• Payment Processing
• Database
• Content Management System (CMS)
• Blogs
• Domain Name Availability Search Tool
• User Authentication

It can be viewed live here:
https://homie.mobi/
The code can be viewed here:
Github Repository

Front End

The front-end of our application is built using a combination of modern tools and frameworks to ensure a seamless development experience and efficient styling.

React
We chose React for our front-end development. React is a JavaScript library that allows you to write JavaScript syntax (JSX) inside functional components.

• React Docs

Vite
To kickstart the project, we utilized Vite, a modern build tool offering a fast development environment with instant server start, fast hot module replacement (HMR), and an optimized build process.

• Vite Docs

Tailwind CSS
To expedite the styling process, we incorporated Tailwind CSS. Tailwind CSS is a utility-first CSS framework that allows for rapid custom design directly within your HTML.

• Tailwind CSS Docs

Hosting
After developing the front-end, we hosted our website for free using Google's Firebase Hosting. Firebase Hosting provides fast and secure static hosting for web apps.

• Firebase Hosting Docs

Back End

Initially, the back-end was written using Node.js and Express. To reduce costs, we transitioned to Firebase Functions, allowing our server-side logic to run only when called, significantly reducing server space requirements. Firebase Functions integrate seamlessly with Firebase features and Google Cloud.

• Firebase Functions Docs

Domain Name Availability Search

One of the features of our website allows users to search for a domain name to see if it's available to purchase. A Firebase Function takes the user's input and uses Name.com's API to check if the domain name is available and under $25. If the input passes these checks then the function returns back available and allows the user to purchase it for $25.

Database - Storing Customers

The first step of the checkout allows the user to input their email and name and then, after checking the information is valid, we use my pushFormDataToDatabase function to send it, along with their product selection, to a Firebase Realtime Database.

• Firebase Realtime Database Docs

Accepting Payment

We added Stripe Payment Processing directly into our website using the Stripe API.

• Stripe Docs

To communicate with Stripe we wrote our logic inside of a Firebase Function. The function gets triggered when the user selects buy and requests to create a payment intent.

In the second step of our checkout form, the user pays with their card information. This gets sent safely to Stripe who then confirms the payment and sends back that confirmation.

Blog

We used Route and Routes from 'react-router-dom' to add a /blog route to our website. To write and publish new blogs, we incorporated Sanity.io to be used as our Headless Content Management System (CMS).

• Sanity.io Docs

Authentication

To offer certain capabilities to authenticated users we added Firebase Authentication.

We wrapped our project with an AuthProvider component using Firebase Auth. The user has the option to sign up with an email and password and they get stored as a user in our Firebase authentication tab in our Firebase console.

• Firebase Auth Docs

This process included adding a /login route and a /register route to our project.

Now down the road, we can conditionally render content and privileges based on whether the user is logged in or not.

Additional Tools and Features

Email

We wanted to have an official business email attached to our domain. After trying a few different technologies we landed on Zoho Mail. We were able to create and register an email with our domain name.

• Zoho Mail

Code

We use Visual Studio Code to write and edit our code.

• Visual Studio Code Docs

We push our updates to a Github Repository.

• About Github

We use Node Package Manager (NPM) to install and add dependencies and packages.

• About NPM

Updating, Building, and Deploying

With this setup we can easily make adjustments to our website and push these changes to production thanks to Firebase's CLI (Command Line Interface).

• Firebase CLI Docs

After making changes to our frontend application all we need to do is build it by running:
npm run build

If we are satisfied with the build we can push it to production with a simple command from firebase:
firebase deploy --only hosting
This allows us to separate the different parts of our projects and avoid having to deploy everything, every time.

If instead, we want to make changes to our functions all we need to do is edit the code, save our changes, and run the command:
firebase deploy --only functions

Sanity Studio can be accessed on a local server. We just navigate inside our sanity folder and run:
sanity start
Blogs added will become live once you publish them in the studio.

Version Control is done the same as any other project. Once you make your changes and save, you run the commands:

git add . // adds all the files to staging
git commit -m "this is your commit message" // commits your changes
git push origin main // pushes the updated code to our github repository.