In my last piece of this 100 Days of React series, I talked about the change of events I am going to face from next week. My sophomore year at UET is starting, and as it begins, I will have less and less time to write. To make things work, I devised a scheme according to which I will write only on Fridays and Sundays.

I ended my last article on the Axios Interceptor. The next day, I picked up my work from there and started learning new things. I am going to talk about them now. So without further ado, let’s get started! πŸ™Œ

πŸš€ Reusable HTTP Service

When I used the Axios Interceptor to handle unexpected errors, it polluted the App.js module. Also, as I couldn’t use this interceptor because I hardcoded it in my application. In React, we make reusable components to build an app. The way I used the Axios Interceptor, it made my code messy. πŸ˜“

To solve this issue, I created a new file β€” httpService.js. Then I cut all the Axios Interceptor code from the App.js and pasted it in this file. Then I exported a default object which contained four methods, i.e., the get, post, put and delete. It is precisely like the Axios object.

After extracting this out, I imported this file at the top of the App.js. Then I replaced all the reference to Axios with the http in App.js. πŸ’―

πŸ“ƒ Config.json

After building a working HTTP service, I created a config.json file. I added a JSON object in that file and within that object, added a key called apiEndpoint and set this key to the URL from where I was fetching the data.

πŸ“¦ After this, I imported this config file in the App.js.

import config from "./config.json"

Then I replaced all the references to apiEndpoint in the App.js with config.apiEndpoint.

πŸ’₯React Toastify

I used a library to change the pop up that appears in case of an alert. The library is called React Toastify, and its multiple versions are available on the Internet. The one I used was v4.1.

πŸ“¦ To install it, type the following in the terminal:

npm i react-toastify@version

πŸš€ Then import this library at the top of App.js.

import { ToastContainer } from "react-toastify"

πŸš€ We also need to import its CSS.

import "react-toastify/dist/ReactToastify.css";

The next thing we need to do is use ToastContainer at the top of the return method in the App.js.

πŸš€ Then in the HTTP service, import the following:

import { toast } from "react-toastify"

After this, replace all the error alerts with toast.error. You will get the following result in case of an error when you are done.

Error - msaaddev

🎩 Vidly Backend

You folks know that React is a library to build front-end of the application. As I am learning it, my complete focus is towards front-end. So when it came to making the backend of the Vidly application, Mosh has covered me there. He created a small backend in NodeJS and then uploaded it on his GitHub. I simply installed MongoDB and used that backend.

I seeded the data in MongoDB by running node seed.js in the terminal of the backend directories.

vidly backend - 100 days of React

🌐 Login and LogOut

I will not bore you with the details of how I connected the frontend of Vidly with the backend. So let’s jump ahead to where I successfully make the login and the register page of the application functional. And that the user can now log in and logout. I am going to show this in action. πŸ‘“

You see when I log in, my name is on the navigation bar and right next to it is a logout button.Β  I am not going to explain much, but I will give you an idea of what I did.

Whenever a login request is made, the server gave back a JSON Web Token (JWT). I stored that token in the local database of the browser and fetched it later to decode it via a library called JWT Decode. And then the game was all about conditional rendering. After a couple of hours of work, I successfully did it. Yeay!! πŸ₯‚

I did a few other things too. If you wish to read my code, it’s available on GitHub. Also, my course on ReactJS is almost complete. It was a 12-hour long course containing 200+ lectures. After this, I will start Wesbox Advance React course where I will build an application using ReactJS and Apollo Client for the frontend and GraphQL and Prisma for the backend. πŸ’ͺ

I will write again on Friday. Till then, cheerios. 🀞