Introduction

This was a project I did for our second semester examination at Altschool Africa. It involves setting up firebase hosting and authentication using Google Authentication method, adding backend pagination using randomuser.me paginated API URLS. Showing the necessary navigation and its disabled state. Also showing accessibility state as well. show SEO for each page, show navigation menu at the top of each page. Implement Error boundary and provide a page to test it, 404 page, and proper UI designs.

Check out the project

I hope to share with you my readers, what I did and how I did it. Enjoy your read.

The app was built using a JavaScript framework React and in this article I'd assume that my readers are familiar with setting up a react project using create-react-app.

Setting up React Router

React router enables "client-side routing". To get started, I installed React Router in my react app by opening the terminal in my app's directory and typing npm install react-router-dom and then making the necessary imports by doing import {BrowserRouter as Router, Routes, Route} from "react-router-dom" .

Pagination

Sitechecker.pro, a technical SEO website, defines pagination as “an ordinal numbering of pages, which is usually located at the top or bottom of the site pages.” API pagination just applies that principle to the realm of API design.

Here's how I set up my backend pagination below.

Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

Here's how I set up my error boundaries and provided a page for testing.

After which I wrapped the whole return statement in App.js with <ErrorBoundary></ErrorBoundary> tag.

SEO Implementation

SEO stands for “search engine optimization.” In simple terms, it means the process of improving your site to increase its visibility when people search for products or services related to your business in Google, Bing, and other search engines.

To achieve SEO implementation, I need to install a dependency called react-helmet by doing npm install react-helmet-async in my terminal. After installation, I imported a <HelmetProvider> component from react-helmet-async which I used to wrap my top level component. Then for each page component that needs a unique title and description, I imported <Helmet> component from react-helmet-async, which then housed the title tag and meta tag that contains the description.

Firebase Hosting and authentication

First I installed firebase CLI. Check out how to achieve that here.

And then I initialized the project, this process connects your local project files to your Firebase project. I achieved it by running the following command from the root of your local project directory: firebase init hosting . After carefully selecting the prompts during the initialization process, the final step is to do firebase deploy --only hosting in your terminal. Refer here for any challenges during hosting.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. To read how I implemented firebase authentication, Please check out the doc.

Conclusion

Thank you for reading through the journey of my first react app. I hope to build better react apps as this one helped my understanding of some react concepts.

Github repo: https://github.com/ChijiokeElijah/Alt-SecondExam

Live link: https://second-semester-exam-4609f.web.app/