What you will be building, see the live demo and GitHub repo for more info.
Introduction
In the PART-ONE of this tutorial, we built the smart contract that powers our application. Now let’s build the frontend for interacting with it as you can see above.
Not much talking, let’s get coding… We’ll begin by installing the rest of the dependencies for this application.
Check out my YouTube channel for FREE web3 tutorials now.
Installing App Dependencies
On your terminal, run the following commands…
yarn add firebase #Database SDK
yarn add @cometchat-pro/chat #Chat SDK
yarn add @material-tailwind/react #UI Kit
If you have successfully executed the above commands, let’s move to creating some private keys for Firebase and CometChat.
Creating Private Keys
To utilize the Firebase or CometChat SDK, we need to create an app with their services. Don’t worry, this won't cost you a dime. Firebase is limited but free, it's more than enough to help you learn full-stack development. CometChat offers its users a trial version for testing out their SDK and getting acquainted with how their technology works.
Creating an App with Firebase
Use this example If you do not already have a Firebase account, create one for yourself. After that, go to Firebase and create a new project called freshers, then activate the Google authentication service, as detailed below.
Firebase supports authentication via a variety of providers. For example, social authentication, phone numbers, and the traditional email and password method. Because we'll be using the Google authentication in this tutorial, we'll need to enable it for the project we created in Firebase, as it's disabled by default. Click the sign-in method under the authentication tab for your project, and you should see a list of providers currently supported by Firebase.
Super, that will be all for the firebase authentication, lets generate the Firebase SDK configuration keys.
You need to go and register your application under your Firebase project.
On the project’s overview page, select the add app option and pick web as the platform.
Return to the project overview page after completing the SDK config registration, as shown in the image below.
Now you click on the project settings to copy your SDK configuration setups.
The configuration keys shown in the image above must be copied to the .env file. We will later use it in this project.
Create a file called firebase.js in the src folder of this project and paste the following codes into it before saving.
You are awesome if you followed everything correctly. We'll do something similar for CometChat next.
Creating an App with CometChat
Head to CometChat and signup if you don’t have an account with them. Next, log in and you will be presented with the screen below.
Use this as an example to create new app with the name freshers by **clicking the **Add New App button. You will be presented with a modal where you can enter the app details. The image below shows an example.
Following the creation of your app, you will be directed to your dashboard, which should look something like this.
You must also copy these keys to the .env file.
Finally, delete the preloaded users, and groups as shown in the images below.
Awesome, that will be enough for the setups. Use this template to ensure your .env file is following our convention.
ENDPOINT_URL=<PROVIDER_URL>
SECRET_KEY=<SECRET_PHRASE>
DEPLOYER_KEY=<YOUR_PRIVATE_KEY>
REACT_APP_COMET_CHAT_REGION=<YOUR_COMET_CHAT_REGION>
REACT_APP_COMET_CHAT_APP_ID=<YOUR_COMET_CHAT_APP_ID>
REACT_APP_COMET_CHAT_AUTH_KEY=<YOUR_COMET_CHAT_AUTH_KEY>
REACT_APP_FB_AUTH_KEY=<YOUR_FIREBASE_AUTH_KEY>
REACT_APP_FB_APP_ID=<YOUR_FIREBASE_APP_ID>
Lastly, create a file name cometChat.js in the src folder of this project and paste the code below into it.
Cool, let’s start integrating them all into our application, we will start with the components.
Building The Components
Let’s start crafting out all the components one after the other, always refer to the git repo if you have any challenges.
The Register Component
This component is responsible for saving new users into Firebase. Navigate to the src >> components and create a file named Register.jsx.
Awesome!!!
The Login Component
Let’s also create another component called Login.jsx in the src >> components folder and paste the code below in it.
Cool, these two components make up the authentication aspect of this application. We will later fuse them into their respective views.
The Header Component
This component encapsulates the pages on our application. It was crafted with the free Creative TIm Tailwind-Material UI Kit. Create a file named Header.jsx inside the src >> components directory and paste the codes below in it.
The Food Component
This component renders the particular food properties to screen in a beautifully crafted card from tailwind CSS and Material design. Create a file called Food.jsx still in the components folder and paste the following codes in it.
Each card renders the name, image, description, price, and the remaining stocks of a food product. Here is the code for it.
Next, let’s look at the foods component.
The Foods Components
This component is responsible for rendering the entire collection of food data in our database. Let’s look at its code snippet.
Still, in the components directory, create another file called Foods.jsx and paste the codes below in it.
Lastly, let’s look at the CartItem component.
The CartItem Component
This component is responsible for showing a single item in our cart collection. Here is the code responsible for it.
Congratulations, you just finished coding the components, let’s move on to creating the views…
The Views
Now that we’ve created the components supporting the various views, let’s proceed next by creating the individual pages.
The Home View
This view renders the Food component structure. This is to say, the home view retrieves all the food collection from firebase and shows them on screen. Let’s take a look at the codes responsible for it.
Navigate to the views directory and create a file named Home.jsx, then, paste the code below inside of it. In fact, you will create all these files in the views folder.
The Product View
This view is responsible for showcasing in detail the information about a product. From this page, users can view, edit, and delete products as well as chat with the seller, or quickly purchase the food item with Ethereum.
Here is the code for it…
The AddProduct View
As the name implies, this view is responsible for storing new food items into our Firestore collection. Observe the code snippet below…
Awesome, we are moving forward, let’s see the edit product view…
The Edit Product View
This view enables us to edit our existing food items. Of course, you need to be the one who initially added the food product to the shop before you can edit. Only product owners can edit, let’s look at the codes performing this action.
Lastly, for the cases relating to products, let’s look at the cart view…
The Cart View
In this view, you can modify and place your orders. Once you place your order, it is immediately saved in Firestore. Below is how the code is written.
Next, let’s take care of the last four views in our tray…
The ChatList View
This view simply lists out the recent conversations you’ve had with your customers so far. This is possible with the help of CometChat SDK, the codes below show you how it was implemented.
The Chat View
This is a one-on-one chat view for a seller and a buyer to communicate. The CometChat SDK makes this easier for us. The following code demonstrates how it works pretty well.
The SignUp View
Create a new file named SignUp.jsx and paste the codes below inside of it.
The SignIn View
Let’s do the same for the SignIn view, create a new file called SignIn.jsx and paste the codes below inside of it.
Amazing, we’ve just added all the essential views in our application, let’s tidy up the rest of the code…
The App.jsx File
This is the first file that runs before every other view and component in our application. In your App.jsx file, paste the following codes inside of it.
The AuthGuard.jsx File
This file contains the logic for bouncing out unauthenticated users from accessing secured routes in our application. Create a new file in the src folder and name it AuthGuard.jsx, then paste the following codes within it.
The Index.jsx File
Paste the following codes inside of the index.jsx file and save…
The Store
Using the power of the react-hooks-global-state library, let's create a store to manage some of our global state variables. In the src directory, >> store create a file named index.jsx and paste the codes below inside of it.
The ABI Connector File
Lastly, we have the fresher.jsx file that serves as an interface between our smart contract’s Abi and the frontend. All the codes needed to interact with our smart contract are stored in this file, here is the code for it.
Within this shared folder, we have another folder called abis that contained the generated ABI code for our deployed store. Truffle generated these codes for us when we deployed the smart contract in the PART-ONE of this article.
Make sure you have included the .env file in the .gitignore file, this is very important so you don’t expose your private keys online.
If that’s all taken care of, then you should know that you have completed this project.
Congratulations!!!
Watch my FREE web3 tutorials on Youtube now.
Conclusion
Blockchain technology has come to stay, in this new world of smart contracts, DAO, NFTs, and DeFi applications, it is very important to arm yourself with blockchain development skills.
Can’t wait to see you in the next article, check the live demo and GitHub repo for more info.
Till next time, all the best!
About the Author
Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more.
He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.
Gospel Darlington is open and available to hear from you. You can reach him on LinkedIn, Facebook, Github, or on his website.
Oldest comments (0)