Building a Full-Stack Web Application with Free Resources
Tags: webdev, programming, devops, systemdesign
Published: 2024-06-11 01:34:56

#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/](https://homie.mobi/)
The code can be viewed here: 
[Github Repository](https://github.com/HomieMobi/Homie.Mobi) 
![homie and mobi definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnsqtrbijkmo1xo9hvuf.png)
##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.
![Home screen and products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fywtgi5nyci89p0kuyrq.png)

**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](https://react.dev/learn)


**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](https://vitejs.dev/guide/)

**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](https://tailwindcss.com/docs/installation)

**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](https://firebase.google.com/docs/hosting)

##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](https://firebase.google.com/docs/functions)

![App architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/630wcr5zn15dgmpo8cc7.png)
###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.

![Domain Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/781fjml38i8nplrosuf2.png)

###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](https://firebase.google.com/docs/database)

![stripe checkout step one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqpk5hz0jrp1ke19mouq.png)

###Accepting Payment
We added Stripe Payment Processing directly into our website using the **Stripe API**.
- [Stripe Docs](https://docs.stripe.com/development)

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.

![Stripe checkout step two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w634xhvgcflynygquhf.png)

###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](https://www.sanity.io/docs)

![homie mobi blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxv1zzumj49hxk79sfem.png)
###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](https://firebase.google.com/docs/auth)

![Firebase Authentication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i5fp6nihra00glr1b41.png)
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.

![Register User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8qureyf080vfaxsphii.png)
##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](https://www.zoho.com/mail/)

![support@homie.mobi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5be2t4rphhep52a325c9.png)

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

- [Visual Studio Code Docs](https://code.visualstudio.com/docs)

We push our updates to a **Github Repository**.

- [About Github](https://github.com/about)

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

- [About NPM](https://docs.npmjs.com/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](https://firebase.google.com/docs/cli)

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. 
```