Tice clothing(E-commerce) App is a simple web app that allows users to order clothes and foot-wares. This project was done for my in the conclusion of my Altschool Second Semester, This project was done as my second-semester exam. In this article, I will be sharing how I came up with the project and the exciting features.

Content

• About App

• Setting up React Router for the different pages

• Nested Route

• Creating a Pagination component(User's Page)

• Creating the Landing page

• Setting up the Error Boundary Component

• Firebase Google Authentification

• Creating a 404 page

• Creating Loading part

• S.E.O ( Search Engine Optimization)

• Other cool features

---

About the App

Tice App is an E-commerce App that enables users to make clothes orders. The app is made to be user-friendly and one of the most exciting features is that users can see users who are topping the chart in terms of purchases. This is where pagination comes in, the pagination has easy navigation and the full app is user-friendly.

Installing & implementing React Router

For React applications, React Router is a well-liked and potent routing library. It allows changing the browser URL, keeps the UI in sync with the URL, and allows navigation between views of different components in a React application. It is installed by pressing npm install react-router-dom on the command line.

Adding Nested Route

A strong feature is nested routes. React Router allows one to exchange particular view fragments based on the current route, contrary to what most people believe—that is, that it only routes a user from page to page. To navigate through a user's information, for instance, one is given several tabs (such as Profile and Account) on a user page. The URL in the browser will change when you click one of these tabs, but only the tab's content is replaced—not the entire page.

Creating a pagination page

In web development, pagination refers to the ability of a user to switch between pages that show one page of results at a time by using links like "next," "previous," and page numbers.

I implemented a logic using the total number of repositories and the number I wanted to render per page in order to determine the upper limit of the numbers that will be dynamically displayed according to the length of users' repositories. The pagination was installed using npm install react-paginate.

The pagination page was created and the users were generated using "Random user" API.

Creating the Landing Page

The landing which is the Home page was created with a nice User interface and was was linked to the nav component.

Setting up ErrorBoundary component

Error Boundaries are React components that catch Javascript errors anywhere below them in the component tree. If an Error Boundary catches an error, it will first log the error, and then it will display a fallback UI instead of the crashed component tree.

What errors and when?

Error Boundaries catch most Javascript errors, they are like the javascript catch but for components. Here are the error types they do NOT catch:

- Event Handlers

- Asynchronous code

- Server-side rendering

- Errors are thrown in the Boundary component itself

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them . Create a single <ErrorBoundary> component

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info), or a static method static getDerivedStateFromProps(error). You only need to make this once (think HOC), and then you can reuse it wherever you need an error boundary in your app.

An example of ErrorBoundary is shown in the image below.

Firebase Google Authentication

This is a google Authentication and is available in firebase.

What is Firebase authentication?

Using Firebase authentication, users can be authenticated quickly and securely.The authentication and login process has a very clear flow, and it is simple to use.

Why one should use Firebase authentication

Using authentication as a service rather than creating it yourself has benefits in terms of time, cost, security, and stability.

Your work has already been done for you in terms of secure account storage, email/phone authentication flows, and other areas by Firebase Authentication.

There are numerous integrations between Firebase Authentication and developed products like Cloud Firestore, Realtime Database, and Cloud Storage.

These products are secured using declarative security rules, and per-user granular security is added using Firebase Authentication.

Any platform can be used to easily sign in. It offers a complete identity solution, supporting login for Google, Twitter, Facebook, Facebook, GitHub, and email and password accounts.

Our main focus is integrating Google and Firebase Authentication for Google Sign-In into our Android application.

• Create a new project and choose the template of your choice.

I chose “Empty Activity”.

• Add name and click finish

• Let’s change the layout of the main activity to have some useful info like name, profile photo. Also, add a sign-out button so that we have an understanding of signout flow as well.

Create a Firebase Project

To use any firebase tool we need to create a firebase project for the same.

Let’s create one for our app RemoteConfigSample

• Go to https://console.firebase.google.com/ and create a new project by clicking “Add Project”

• Give any name for your project and click Continue

• Select your Analytics location and create the project.

Add App to Our Firebase Project

• Click on the Android icon to create an Android app in the firebase project

• We have to add SHA-1 setting for Google Sign -in, Run the command below in the project directory to determine the SHA1 of your debug key:

./gradlew signingReport

• Use the SHA1 from above in the app registration on firebase

• After filing the relevant info click on the Register app

• Download and add google-services.json to your project as per the instruction provided.

• Click Next after following the instructions to connect the Firebase SDK to your project.

Add Firebase Authentication Dependencies

• Go to Authentication Setting under Build in Left Pane

• Click on “Get started”

• Select the Sign In Method tab

• Toggle the Google switch to enabled (blue)

• Set a support email and Save it.

• Go to Project Setting

Create a Sign-in Flow

To begin authentication, a simple Sign-In button is used. In this stage, you’ll implement the logic for signing in with Google and then authenticating with Firebase using that Google account.

• Create a new sign in activity with a button to launch sign inflow

• Initialize FirebaseAuth

mFirebaseAuth = FirebaseAuth.getInstance();

• Initialize GoogleSignInClient

• Create a SignIn method that we can call with the click of the SignIn button

• Sign-in results need to be handled in onActivityResult. If the result of the Google Sign-In was successful, use the account to authenticate with Firebase:

• Authenticate GoogleSignInAccount with firebase to get Firebase user

Extract User Data

On successful authentication of google account with firebase authentication, we can extract relevant user information.

Get User Name

Get User Profile photo URL

SignOut

We’ve finished the login process. If the user is still logged in, our next goal is to log them out. To do this, we create a method called signOut ().

See App in Action

We can see the user also got created in Firebase Authentication “Users” tab

Hurray, we have done it, now we know how to have an authentication solution with no server of our own to get user identity and serve a personalized user experience.

For more details and an in-depth view, you can find the code here

References: https://firebase.google.com/products/auth, https://firebase.google.com/docs/auth

Creating an Error 404 page

When a user tries to access a page on your site that isn't there (due to a broken link, a deleted page, or a typographical error in the URL), they see a 404 page. In my opinion, displaying Page not found content with the requested URL is a good thing. You can use wildcard routes to accomplish this. Create a wildcard path with an asterisk ('*') and place it at the end of your routes. An example is shown in the image below

Loading Page/Icon

Loading page/ icon shows when the user's page( pagination page) is about to be displayed. In this project, I used a react animated icon to show it.

S.E.O(Search Engine Optimization)

This technology is required for search engines to crawl and recognize our web application. It will take some effort on our part to get our app to rank on search engine pages like Google. To do this, we must configure the pages of our app with the proper title, description, and other S.E.O. relevant properties. React's react-helmet library can assist us in achieving this. It enables us to add the aforementioned properties to the pages of our react apps. Can be installed by runing npm install react-helmet.

To view, the UI of the website follow this link : http://altschool-exam-nine.vercel.app/

Thank You for viewing