How to create a Quiz app using React, Material UI & Heroku

Hire the author: Prisca M

Fast learner, hard worker and team player who is looking for an opportunity to contribute to projects and also enhance her skills.

Introduction

In this article, we will learn how to build a quiz app. However, this project will contain a not only the quiz section but also a section that provides us with fun facts about the main topic which is in this case the earth in addition to the quiz section. I decided to create this project so I could better learn React and the concept of fetching data using an API call in React. Now I’m going to teach you how to do the same. We will be creating this using a popular JavaScript library React, style with Material UI, and deploy to Heroku. The source code of this project is also available on GitHub through this link.

Glossary

React: According to Wikipedia, React is a free and open-source front-end JavaScript library for building user interfaces based on reusable UI components. It’s used for handling the view layer for web and mobile apps. The main purpose of React is to be fast, scalable, and simple. Hence why I choose to create this project with it.

Material UI: As defined in this article, Material-UI is a library that allows us to import and use different components to create a user interface in our React applications. This saves a significant amount of time since we do not need to write all the CSS codes from scratch.

Heroku: Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It supports several programming languages.

Creating our react-app

Now having said all that, it’s time to start creating our project. The first step will be to install Node on your local server (assuming you do not have it installed already). To install Node follow the steps in this article. Having installed Node successfully on our device, we will go ahead to set up React by running this command in our terminal

npx create-react-app earthQuizApp

Here, ‘earthQuizApp’ is the name of the project. Feel free to rename it to anything you like. Once we run this command, a folder with the name “earthQuizApp” will be created on our computer and all of the packages it requires will be automatically installed. This process usually takes about 3 minutes or more. Be sure to give it time. Once our project has been created, we will see a bunch of files and folders. We’ll be working majorly with the ‘src’ folder. Within the src folder create another folder and name it components. This folder will hold the four components we will have in our project. Create a file within the component folder and name it ‘Home.js’ (This will be the home page). Create two more files and name them ‘learn.js (where information about the earth will be displayed) and ‘quiz.js’ (quiz component) respectively. Then create the last one for the NavBar and name it ‘ResponsiveAppBar.js’.

NB: To view the project in the browser run this code in the terminal

npm start

Step 1:

The first step is to create a AppBar. This component will handle our navigation. Let’s name it ResponsiveAppBar.js. We will use be using Material UI’s (Responsive) AppBar component. We’ll customize it to our taste by adding a little inline styling. We will also export it to make it available for use in other components. Paste this code in the ResponsiveAppBar.js file

Step 2:

The next step is to create our home page. It is the first page users will see when they visit our web app. It will consist of

• Navbar
• Heading
• An Image
• Some Write-up
• Two Buttons

We’ll import the necessary Material UI components. Paste the following code in the Home.js

Step 3:

The next step is to create our JSON files where information will be pulled from. There will be three of them namely

• facts.json (information that will be displayed in Learn component will be contained here)
• credit.json (sources where the information in facts.json was gotten from)
• quiz.json (quiz questions and answers will be contained here)

In the src folder, create another folder and name it sources. This is where our JSON files will be created in.

facts.json

Place the following code in this file. You can also replace them with your own if you wish

credit.json

The following code will go into this file.

quiz.json

This file will contain the following code

Step 4:

Having created all the JSON files we require for this project, the next step is to create our learning component. This is where those facts we talked about earlier will be displayed. To create this, paste the following lines of code into the learn.js file.

Step 5:

The next step is to create the Quiz.js. This component will display the quizzes, the various options, and also scores at the end of the quiz

Step 6;

Finally, To set up our ‘App.js’. Paste in the following code

The first line imports React, and the second line imports BrowserRouter, Link, Route, and Routes from ‘react-router-dom’ all of which are needed to navigate to the various components in our project. The last three lines import the different components present. Lastly, Place the following code within the return statement

Deployment

To deploy this project to Heroku follow the steps below:

• Push the code to an existing or new Github repository.
• Go to (Heroku’s official website) and create an account and log in to the dashboard.
• Before deploying the app go to:
• Heroku dashboard > settings > buildpacks > add buildpacks and then add https://github.com/mars/create-react-app-buildpack.git
• While in the dashboard, go to create new app, enter the App name, choose a region and click the create app button.
• Under deployment method choose Github, connect your Github account and choose the repo where your code is and connect.
• Enable Automatic deployment and click deploy branch.
• Give it a few minutes and your app will be ready. The link to your app will also be displayed.

If you do all these with no errors you will come up with a project like this: Earth-Quiz-App

Learning Tools

Some of the resources that helped me with this project include:

• React Tutorials (view here)
• Material UI React (view here)
• Simple Quiz Application Using React Hook and Tailwind CSS (view here)

Learning Strategy

Stackoverflow was of immense help to me while creating this quiz app. If you run into errors at any stage, I suggest you ask questions in the comment section, alternatively search for that exact error in StackOverflow or post it as a new question, someone on the platform will most likely be of help.

Reflective Analysis

Creating this Project taught me a lot, like what Material UI is and how to use it, how to work with JSON data, how to use the map function, and finally the difference between useEffect (although not used in this project) and useState hook. While useState allows functional component to have state, useEffect on the other hand allows functional component to have a lifecycle. Another react hook used in this project is the useNavigate and it is used for navigation. Working on this project made me appreciate the concept of React.js more.

Conclusion

Thank you for reading and I hope this article will be able to help anyone who wishes to create a similar project. Let me point out that this project is open to improvement. An Idea will be to add a login system so that each user has his scores recorded and displayed on login (if he already completed the quiz at least once). Please feel free to add any other features. Also, if you are looking for other project ideas you can build with React please, check out this article

The code is also available on GitHub through this link.

Hire the author: Prisca M