Working with Firebase Real-Time database using ReactJS and UIKit and finally launching the web-app to Netlify.

Image for post
Image for post

Before starting with this react + firebase project you first need to setup your machine, install NODE and NPM.

Follow this article.

After completing the setup, you need to install create-react-app package, open the terminal and type in the following,

npm install -g create-react-app

Using create-react-app we can get a predefined skeleton for our web application and we don’t need to go around and install all the webpacks.

Before starting the process you can checkout the completed web-app here.

1. Create react application:

create-react-app <whatever-name-you-like>

**no capital letters in the name

After successful completion of the command do,

cd <whatever-name-you-like> && yarn start

this will start the server and will show you the app in the browser.

Open the folder in any text-editor you find suitable, you will notice the following folder structure.

Image for post
Image for post
*ignore assets folder and print.js file as of now

2. Firebase Setup:

After logging in click GO TO CONSOLE button available on the top right of the window.

Create a Firebase project by clicking on the Add Project button.

Image for post
Image for post
give any name you want to

When the project is successfully created, enter the project. Click Add Firebase to Web-App icon on that page.

Image for post
Image for post

Copy this text and paste it somewhere you can find it later as we will use this credentials to connect our react web-app with Firebase.

Now click the Database link available on the left pane. Then you will find the following,

Image for post
Image for post

Click on Create Database button,

Image for post
Image for post

We start the real-time Database in test mode to avoid the writing the authentication code. After clicking enable, in the next window go to the rules and you will find something like this,

Image for post
Image for post
confirm rules with the above image, if not change the rules as given above.

In the following steps, click on the Data tab and export a .json file which contains the data you need to work with or download a .json database file from the internet.

Image for post
Image for post
export json
Image for post
Image for post
select any json database file from your computer

after upload you will get the following screen,

Image for post
Image for post
get this json file

Let’s break it down,

Image for post
Image for post
understanding the structure,

If you push data using any script child names will be randomly generated by Firebase.

Image for post
Image for post
don’t sweat over this.

Our database is ready now, let’s move on to connecting this database to our React-App.

3. Integrate the database with react:

npm install --save firebase

Run the above given command to install the Firebase package to connect the app with our real-time database.

You must have opened the react-app in any editor of your choice until now, create a new firebase.js file inside the src folder. Here we will use the credentials that we have obtained at the start to connect react with Firebase and initialize the app.

Image for post
Image for post
firebase initialization

Let’s get into the App.js file and start working on displaying the data. App.js file is available inside the src folder.

Import the files and packages,

Image for post
Image for post
import statements

In our database we have two sets of data under words and advanced_words, we will declare two empty arrays to later store the data snapshot to this arrays.

Image for post
Image for post
declare words and advanced_words

Now we will mount the data available as objects inside each references and push those to our declared arrays to later display the data.

We will use componentDidMount and make a reference to the database and take a snapshot of the current instance of the database and push all the values inside our declared arrays.

Image for post
Image for post

Now all the data available in our Firebase database is available in our words and advanced arrays.

4. Display the data:

Image for post
Image for post
Image for post
Image for post

Save the changes and check if the server is still running, if not go to the react-app folder in the terminal and type in yarn start to start the server.

Image for post
Image for post
no style

5. Styling using UIKit:

Now inside the public folder of the react-app create an assets folder and paste the downloaded css and js folders into this assests folder and match the folder structure.

Open the index.html available inside the public folder and edit it as shown below.

Image for post
Image for post
index.html

Edit the App.js render as given below,

Image for post
Image for post
edited App.js render

Add the following style elements to the App.css file, delete the given code.

Image for post
Image for post
App.css

Final output will be something like this,

Image for post
Image for post
final-output

Now to launch this react-app using Netlify first you need to push the code to GitHub, so create a GitHub repository and push the code.

If you don’t know how to use GitHub follow this link.

6. Let’s launch it using Netlify:

Image for post
Image for post
  • Click New Site
Image for post
Image for post
  • Choose any git provider
Image for post
Image for post
  • Pick the repo from your account
Image for post
Image for post
  • Click Deploy Site
Image for post
Image for post

If there aren’t any errors the site will successfully deploy with few minutes.

  • Change name and site settings
Image for post
Image for post
open site settings.
  • Type a name of your choice
Image for post
Image for post
save the name of your choice

This will take some few minutes now check the react-app on that link and then you are done for the day.

If there are any mistakes feel free to point those out by commenting down below.

If you liked the the article please give a clap or two or any amount you could afford 😁.

To know more about me please click here and if you find something interesting just shoot me a mail and if possible we could have a chat over a cup of ☕️. For updated contents of this blog, you can visit https://blogs.vatsal.ml

Support this content 😃 😇

Image for post
Image for post
https://www.buymeacoffee.com/vatsalsaglani

I have always believed in the fact that knowledge must be shared without thinking about any rewards, the more you share the more you learn. Writing a blog tutorial takes a lot of time in background research work, organizing the content, and showing proper steps to follow. The deep learning blog tutorials require a GPU server to train the models on and they quite cost a bomb because all the models are trained overnight. I will be posting all the content for free like always but if you like the content and the hands-on coding approach of every blog you can support me at https://www.buymeacoffee.com/vatsalsaglani, . Thanks 🙏

Written by

Wannabe Swiss knife for Data Science and Full Stack Development. Data Scientist with experience in Deep Learning, Computer Vision, Time-Series Forecasting & RL.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store