Hello, everyone! Welcome to this hands-on tutorial. Before we begin you should be familiar with the basics of ReactJS, NextJS, and Firebase. If you’re not, I would recommend that you go through their documentation.

Here’s what we’re going to build:

And here’s the tech we’ll use:

1. TypeScript: provides type-safe code which helps us find bugs during build time.
2. **NextJS: **a React-based framework that lets us render data on the server-side. This helps Google crawl the application and which results in SEO benefits.
3. **Chakra UI: **a simple, modular, and accessible component library that will give us the building blocks that we need to build the application.
4. **Firebase: **provides Firestore and authentication that we are going to use in our application. We will use Firestore to save a quiz, the user-info, and answers. We’ll use authentication to provide the Google SignIn feature to the user.
5. **Vercel: **will host our application. It scales well, all without any configuration, and deployment is instant.
6. Formik: provides us various components to build forms. It is hard to develop forms without formik.
7. **Yup: **A form always needs to be validated. Yup is a library which we will be using for this purpose. Yup and Formik work together very well, and not much configuration is required.

I am going to divide this tutorial into four separate sections. At the start of every section, you will find a Git commit that has the code developed in that section. Also, If you want to see the complete code it is available in this repository.

Contents

1. How to Set Up Auth and User Collection.
2. How to Add a Quiz and Display Multiple Quizzes.
3. How to Show a Single Quiz, How to Answer a Quiz and How to Validate the Answer.
4. How to Deploy the App to Vercel and Firebase Authentication Configuration.

Let’s get started.

#next #firebase