So, if you want to cater to people everywhere, your app needs to support multiple languages.

Fortunately, Svelte is easy to work with, and it makes localization (l10n) and internationalization (i18n) quite straightforward.

But it lacks built-in i18n support—so you need to use a library like svelte-i18n or one of the others available. Let’s create a simple Svelte app to demonstrate how localization can be implemented.

We’ll create a welcome screen that can be used in both English and Spanish and then build some more advanced features.

Table of Contents

• What Makes Svelte Unique?
• How to Localize a Svelte Application?
• Adding Language Support
• Updating Components to Use Translations
• Creating a Language Switcher
• Adding Advanced Features
Formatting Numbers and Currencies
Formatting Dates
Localizing Images
Dynamic Image Paths
Integrating Alternative Text Localization
Switching SVG Content Dynamically
Handling Multiple Forms of Pluralization
Handling Missing Translations
• Making Your App Production-Ready
• Best Practices for Scaling Your Localization
• Wrapping Up

What Makes Svelte Unique?

Similar to Vue i18n, Svelte converts code to vanilla JS during the build process. This means your app ships with minimal code and offers excellent performance.

While other frameworks like React and Vue have longer startup times, Svelte’s compilation process changes that. It creates much smaller bundles, and apps run faster by default.

Svelte’s reactive syntax and lightweight nature make it an excellent choice for developers who want efficient, modern applications.

Its minimalism aligns well with the simplicity required in cloud development languages, ensuring that applications are lean, scalable, and optimized for cloud environments.

This minimalism also means you may not always have all the required built-in features. But pretty much all the limitations are resolved with the help of external libraries.

How to Localize a Svelte Application

Let’s jump right into creating a Svelte project now. I’ll create the project using the npm create command. Run the below commands one by one:

npm create svelte@latest freecodecamp-localization-demo
cd freecodecamp-localization-demo
npm install
npm install svelte-i18n

The npm create command will prompt you with a few choices. Here’s what I’ve picked (but you can always adjust this based on your project requirements):

• Skeleton project: Select Yes.

• Add TypeScript support: Select No (or Yes if you prefer TypeScript).

• Add ESLint for code linting: Select Yes.

• Add Prettier for code formatting: Select Yes.

Now that we have our project set up, let's create a welcome component that we'll later enhance with translations.

Create a new file called Welcome.svelte in your src directory:

<!-- src/Welcome.svelte -->
<script>
  export let username;
</script>

<div>Welcome {username}!</div>

This component takes the username property (that I’ve passed from the App.svelte file) and displays a welcome message.

Simple enough for now, but what if your users speak different languages? Let’s add language support.

Adding Language Support

To do this, we need to create translation files for each language. Start by creating a new directory called locales in your src folder. Inside the locales folder, create two JSON files—en.json for English and es.json for Spanish.

// src/locales/en.json
{
  "hello": "Hello {username}!",
  "buttons": {
    "save": "Save",
    "cancel": "Cancel"
  }
}

// src/locales/es.json  
{
  "hello": "¡Hola {username}!",
  "buttons": {
    "save": "Guardar",
    "cancel": "Cancelar"
  }
}

These files contain our translation strings.

Notice how we've organized them in a nested structure—this helps manage translations as your app grows.

The {username} and {count} placeholders will be replaced with actual values during runtime when we dynamically (or statically) pass the required values.

Next, we need to tell Svelte how to use these translations. For this, we need an i18n configuration file:

// src/i18n.js
import { register, init } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('es', () => import('./locales/es.json'));

init({
  fallbackLocale: 'en',
  initialLocale: 'en',
});

We’ve registered our translation files and set English as both the initial language and fallback language. The fallback language is used when a translation is missing in the selected language.

Updating Components to Use Translations

Now we can update our welcome component to use the text from the JSON file:

<!-- src/Welcome.svelte -->
<script>
  import {  } from 'svelte-i18n';
  export let username;
</script>

<div>{$('hello', { username })}</div>

The $_ function is a special helper from svelte-i18n that retrieves translated strings.

When we pass { username } as the second argument, it replaces the placeholder in our translation strings with the actual username.

Creating a Language Switcher

How would someone change the language, though? Let's create a simple language selector component:

<!-- src/LanguageSelect.svelte -->
<script>
  import { locale } from 'svelte-i18n';

  const languages = [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Español' }
  ];
</script>

<div>
  {#each languages as { code, name }}
    <button on:click={() => locale.set(code)}>{name}</button>
  {/each}
</div>

The bind:value directive automatically updates the active language when users make a selection.

The locale store from svelte-i18n handles all the behind-the-scenes work of switching languages.

Now let's bring everything together in our main App component:

<!-- src/App.svelte -->
<script>
  import { waitLocale } from 'svelte-i18n';
  import Welcome from './Welcome.svelte';
  import LanguageSelect from './LanguageSelect.svelte';

  const  username = 'developer';
</script>

{#await waitLocale()}
  <p>Loading...</p>
{:then}
  <main>
    <LanguageSelect />
    <Welcome {username} />
  </main>
{/await}

The waitLocale function ensures translations are loaded before showing content. This prevents flickering or missing translations when the app first loads.

Adding Advanced Features

As your app grows, you'll need to handle more complex scenarios. Let's look at some common requirements.

Formatting Numbers and Currencies

Different countries handle numbers and currencies quite differently. So for instance, if you show the figure of a hundred thousand to someone from France, and someone from the USA, you’ll need to show the same figure differently.

France → 100 000,00 $

USA → $100,000.00

You see how the thousands are separated by a space and the decimal by a comma in France? Using the US number format will make it quite confusing for someone from France. Here are a few other examples.

• US uses periods for decimals (1,234.56)

• Many European countries use commas for decimals and periods for thousands (1.234,56)

• Some countries group digits differently (like 1,23,456 in India)

// src/lib/formatUtils.js
export function formatCurrency(amount, locale, currency = 'USD') {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(amount);
}

You can now use these formatters in your components:

<!-- src/lib/PriceDisplay.svelte -->
<script>
  import { formatCurrency } from './lib/formatUtils';
  let price = 1234.56;
  let locale = 'en';
</script>

<p>Price: {formatCurrency(price, locale, 'USD')}</p>

With this setup, the app now adapts the currency formats to the different locales based on what outputs you ask from it:

• US: "$1,234.56", "1.2M", "15%"

• German: "1.234,56 €", "1,2 Mio.", "15 %"

Formatting Dates

Similar to currency and number formats, date are formatted differently across different locales.

So, while the US uses MM/DD/YYYY, many European countries use DD/MM/YYYY, and Japan often uses YYYY年MM月DD日.

Luckily, we don’t need to handle this manually. Similar to currency formatting, we have the Intl.DateTimeFormat function that accepts the locale and date in numeric format and returns the appropriately formatted date.

// src/lib/dateUtils.js
export function formatDate(date, locale) {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

You can now use this function in your Svelte app to display the dates correctly for each locale:

<!-- src/lib/DateDisplay.svelte -->
<script>
  import { formatDate } from './lib/dateUtils';
  let locale = 'en';
  let today = new Date();
</script>

<p>Today's date: {formatDate(today, locale)}</p>

Once implemented, you’ll see the dates get formatted automatically, like below:

• English (US): "September 23, 2024"

• Spanish: "23 de septiembre de 2024"

• German: "23. September 2024"

• Japanese: "2024年9月23日"

Localizing Images

Don’t forget that localization isn’t just about translating text—your images need attention, too. Culturally relevant visuals, region-specific content like maps or symbols, and adaptable image formats can make all the difference.

Dynamic Image Paths

Use Svelte's reactivity to dynamically load images based on the current locale. For example, you can store localized image paths in a JSON file or directly in your i18n configuration:

{
  "en": { "logo": "/images/en/logo.png" },
  "fr": { "logo": "/images/fr/logo.png" }
}

Then, in your Svelte component:

<script>
  import { locale } from 'svelte-i18n';
  import translations from './translations.json';

  $: imagePath = translations[$locale].logo;
</script>

<img src={imagePath} alt="Localized logo" />

Integrating Alternative Text Localization

Ensure your images' alt attributes are also localized. You can achieve this by adding an additional field in your translations:

{
  "en": { "logoAlt": "Company Logo" },
  "fr": { "logoAlt": "Logo de l'entreprise" }
}

Then bind the localized alt text dynamically

<img src={imagePath} alt={translations[$locale].logoAlt} />

Switching SVG Content Dynamically

If you need to localize content within SVGs, such as text or icons or want to convert to SVG format, consider using Svelte's templating for seamless integration.

<svg>
  <text x="10" y="20">{$t('svgText')}</text>
</svg>

This approach ensures your SVGs are directly rendered with localized text.

Handling Multiple Forms of Pluralization

While many languages have two forms of plurals (singular and plural), there are many languages with more than two forms, and some don’t pluralize. For example:

• Arabic has six forms

• Japanese doesn't pluralize in the same way

We can easily handle these differences using svelte-i18n's ICU message syntax. I’ve also added an example of how you can handle more than two forms when using Arabic.

// src/locales/en.json
{
  "items": {
    "count": "{count, plural, =0 {No items} one {1 item} other {{count} items}}"
  }
}

// src/locales/es.json

{
  "items": {
    "count": "{count, plural, =0 {Sin elementos} one {1 elemento} other {{count} elementos}}"
  }
}

// src/locales/ar.json
{
  "items": {
    "count": "{count, plural, =0 {لا عناصر} one {عنصر واحد} two {عنصران} few {# عناصر} many {# عنصر} other {# عنصر}}",
  }
}

Now, let's create the pluralization component for our Svelte app where a button increments the count with every click.

<!-- src/lib/ItemCounter.svelte -->
<script>
  import {  } from 'svelte-i18n';
  let count = 0;
</script>

<p>{$('items.count', { count })}</p>
<button on:click={() => count++}>Add Item</button>
<button on:click={() => count--} disabled={count === 0}>Remove Item</button>

With this implemented, your app is fully ready to handle pluralization dynamically (as you’ll notice by clicking on the Add item button).

Handling Missing Translations

Sometimes, translations for certain keys might be missing. This can happen due to oversight, dynamic content, or incomplete translation files. To handle such scenarios gracefully, set up error handling using the missingKeyHandler option in svelte-i18n.

import { register, init } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('es', () => import('./locales/es.json'));

init({
  fallbackLocale: 'en',
  initialLocale: 'en',
  missingKeyHandler: (locale, key) => {
    console.warn(`Missing translation: ${key} (${locale})`);
    return key; // Display the key itself when translation is missing
  }
});

This code logs a warning when a translation is missing and displays the key instead of showing nothing.

Making Your App Production-Ready

When preparing your app for real-world users, optimize it for localization by automatically detecting the user’s language.

You can use the browser’s navigator.language property to set the initial locale:

import { init, getLocaleFromNavigator } from 'svelte-i18n';

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});

Best Practices for Scaling Your Localization

• Organize translations: Group related translations logically (for example, buttons, menus, notifications) and use consistent naming patterns for keys.

• Use a translation management platform: As your app grows, handling translation files manually starts becoming cumbersome. Translation management platforms are purpose-built to solve this exact issue and help save hours every day, make it easy to collaborate on projects, and keep track of progress.

• Thorough testing: Test your app with real users across all supported languages. You also need to keep in mind the text length changes to avoid issues with layouts, especially with languages like German or Arabic, which can expand text significantly.

• Cultural considerations: Adapt your app for cultural norms, reading directions (for example, RTL for Arabic), and regional preferences (for example, date and currency formats).

Wrapping Up

Localization might feel like a big task at first, but it’s totally worth it. It lets you reach more people and makes your app more inclusive.

Svelte and svelte-i18n streamline the process and keep it fun as you build your skills.

To keep it simple, start with the basics, such as adding translations and a language switcher. Advanced features like handling dates, currencies, and pluralization can follow as you gain confidence.

Take your time, test thoroughly, and build an app that feels natural for all the users you serve!

Well, it's a product with just enough features to gather comprehensive qualitative feedback.

In practice, it's as easy to understand the concept of an MVP as it is to ride a bicycle. Let's do it then.

In this article, I am going to explain:

• What is an MVP?
• The benefits of an MVP
• How is an MVP developed?
• How would an MVP be developed if it was a bicycle?
• Why is it important to build an MVP?
• Do you have an idea for an MVP?
• FAQ

All your customers want to be heard and understood. In the world of software, there is a large number of apps and websites out there, but only a few get the attention and love of the users. So you can start by creating a minimum viable product to find out if your idea has a place in this competitive environment.

Building an MVP doesn’t really cost much. And it helps you investigate the market competition with minimum time and budget loss (in the worst case). You’ll discover the whole story, from benefits and prototype types to the common example of your future developed MVP. So…what are you waiting for?

What is an MVP?

The most basic version of a product that can be released to test a business idea is called a minimum viable product (MVP). This concept was popularised by Eric Ries in The Lean Startup. It is part of the ethos of the Lean Startup methodology. With minimal initial investment, this framework focuses on efficiency and learning from customer feedback.

An MVP is a perfect opportunity to let your potential users voice their opinions and test out a product before its final launch. Gathering and analyzing qualitative feedback is a primary task of MVP development. Based on these findings, you can modify your MVP and test it again.

This process turns into a cycle of MVP product development which takes place over and over again until the ultimate customer satisfaction is reached.

MVPs are all about testing product ideas, analyzing user feedback, and building a full product version based on what you learn. Experts say that it's not an MVP until you can sell it in the B2B world. However, before diving into the process of how to manage an MVP, let’s learn about its main benefits.

The Benefits of an MVP

All these benefits demonstrate a strategic approach that goes far beyond just cost savings and speed to market. It's about smart, customer-centric development, where each iteration brings a product closer to the heart of what users want.

Here are some of the many benefits of building an MVP:

1. Product Hypothesis Validation

You can test hypotheses directly with MVPs. MVPs help test the market's response to a product by focusing on building core features. This process helps founders refine their business model with real-world insights rather than guesswork.

2. Minimising Capital Investment

The development of an MVP requires less investment than the launch of a fully developed end product. This approach aligns with the Lean Startup methodology, which stresses the importance of using just enough features to demonstrate the concept without overburdening resources. It allows startups to allocate their budget more effectively and mitigate financial risks.

3. Getting Investors to Trust and Get Funded

Presenting a well-developed MVP is often crucial to attracting investor interest and raising venture capital funding. The demonstration of a working MVP helps angel investors and venture capitalists visualize the potential of a business idea, making it easier to secure start-up funding.

4. Refine for Product-Market Fit

An MVP is an ideal tool for refining product-market fit, which is a dynamic process. It allows startups to closely align their product with market needs, based on user feedback. This ensures that the final product is well-received by its target audience, increasing the potential for success.

5. Gather Customer Feedback

The key to the success of any business is gathering feedback from customer research. An MVP provides a platform for engaging early adopters and gathering valuable feedback with a focus on core features.

Such user feedback is critical for startups to understand customer needs and preferences, prioritize the product roadmap, and develop the product for greater market penetration.

Now, you are ready to face the question: “How do you manage MVP software development?”.

Stages of MVP development

How to Do MVP Software Development

Every product is different, and so is the process of its development. Before we jump into the details of how an MVP is created, I want to point out that it is an individual and iterative process.

Product Discovery

Your first task is to make your idea come to life. You can start by running product discovery. You need to study the needs, interests, and demographic characteristics of the target audience. Also, analyze the strengths and weaknesses of competitors.

You will then need to go through all the features that can be implemented and select the essential ones. The next thing is to organize this information and present it during the workshops with the help of graphs, charts, tables, or any other form of visualization that you feel best represents the data.

Now, your idea should seem clearer but it is still not presentable.

Proof of Concept

Next, you need to create a Proof of Concept. Basically, this is aimed at summarizing the discovery stage and verifying that your innovative idea can be implemented in real life.

Ok, you know that your idea is feasible and comprehensive. You know that it can be done – but how?

User Journey

Now you need to understand what the user wants to see once they open the application. One of the starting points for an MVP is having a strong sense of your customer. Startups should carefully build a target user profile, taking into account various factors that affect buying decisions and product usage.

To build this target user profile, you have to identify the following:

• Industry: the type of sector your product serves.
• Pain problems: challenges your product aims to solve.
• Buying decisions: How they make their decisions and what channels they prefer to use.
• Contexts: In which way they would use your product.

To do this, you need to map a user journey. User journeys are a visual representation of a potential user and their experience with your app. They cover everything from the moment the user realizes they need this service, to the moment they first find and click through to your app, to the moment they decide to make this service part of their lifestyle.

User journeys resemble a set of statements, which look something like this:

As a [user role], I want to do [functions] so that [goal].

For example, "As a website admin, I want to be able to add or remove users to keep the app free of spammers". Or, "As an unregistered user, I want to be able to open a menu so I can understand what the application offers before I sign up.”

Prototype

After that, it's time to start prototyping. A prototype is a simplified version of the product. It demonstrates the final product design and navigation. Basically, it is a set of pictures of the interface of your future app. If it is clickable, you can navigate between screens by clicking buttons to understand user flows.

Prototypes may even look like a very basic version of your platform or mobile app. It is not a final product and not an MVP because you cannot show it to actual users.

Here, you have your idea implemented. Kind of. It can be shown to all the stakeholders but not to the end user as long as it is just a rough draft.

Now comes the most interesting part: you have to decide the type of MVP you’re going to use. We’ll take a look only at the 5 most popular types (but there are more). So, here we go:

Wizard of Oz MVP

This approach gives the user the illusion of a service or product that runs without any human interference – but in reality, behind the scenes, it's all done manually by people.

For example, for developing a digital assistant app, the staff will manually answer the customer instead of complex AI infrastructure. The MVP will allow you to check the standards and collect suggestions from users to make improvements without a big initial input.

Concierge MVP

Similar to the Wizard of Oz MVP, the Concierge MVP is a front for the final automated response of a manually transformed customized service.

For example, if your startup is a food delivery app, you can start by doing order and delivery management manually, rather than building a highly automated platform from the beginning. This is particularly important in customer satisfaction in industries that derive value from personalization and a human touch.

Single-feature MVPs

In the beginning, you shouldn't try to put together a product with too many features. Instead, develop and release just a single core feature that solves a problem. This will allow you to quickly test the pricing proposition of the product and gather customer feedback for improvements.

In general, prioritizing central functions can speed up development and reduce the likelihood of building redundant skills.

Pre-Order MVP

This involves placing pre-orders before developing or producing an actual product. With interest and pre-order funding, early sales can be used to help generate visibility and improve the product. This method reduces the chance of developing something that is not going to fit into the market and is perfect for fast iterations based purely on real names.

Minimum Viable Demos

You can also put something together that demonstrates your central price proposition but isn’t a totally functional product. This could be a model, a prototype, or an interactive presentation that shows what the product could do, rather than reserving funds for full improvements.

A basic live demo will allow you to make sales to traders, get initial stakeholder comments, and test the market functionality of your idea. This is a very strong way to test concepts before committing any resources to development.

As soon as you have all the info we can continue our journey. This is only a beginning. So, let’s take a look at the next phase.

Minimum Viable Product Development

At this stage, you need to make some ultimate decisions about the UI/UX and finalize the visual design. After that, it's time to start coding the minimum viable product.

The Minimum Viable Product looks like a final app and feels like a final app. But it has fewer features, the design or performance is not necessarily production quality, and the code quality may be lower. Your idea is presented, you've put in the code, and it's partially implemented – it's now ready to meet its first user.

Minimum Viable Product Launch and Testing

After you finish development and launch the MVP, you should present it to a sample set of actual users. Throughout the next few days or weeks, you'll gather customers’ feedback, analyze the results, and modify your MVP accordingly.

Once you see that your customers are fully satisfied, you can start implementing the final product.

Example of Developing an MVP – Let's Build a Bicycle

Let’s imagine that you want to create a bicycle. A cool, stylish, hardwearing, and sustainable bike. But what if a potential client can't figure out what you have in mind and you lose all your hard work? What if you need cash and you have to convince your investors that your idea is viable? Well, it's time to build an MVP.

The development process will be pretty similar to what I described earlier. So let's go through it with this example product to see how everything works.

Product Discovery:

You conduct a discovery stage: learn about what a bike is, what parts it consists of, what bikes people like, and what riders complain about. How can you make your bike stand out?

Through studies and marketplace evaluation, you discover insights into customer alternatives and pain points, and lay the groundwork for using new techniques. After that, you answer the most important question: what you can do to make your bicycle stand out among all the others?

Proof of Concept:

Let’s say you found out how to create a bicycle chain that never falls off the chain ring. Once you have a clear idea of how to do this, you create your mechanism: a chain, with a chainring and pedals – your proof of concept.

With a clean idea in hand, throw your concept out there to investors. You tell them more about your idea, and receive their approval and support to keep going with the project.

Prototype:

But it's not quite time to build the final bicycle, as you have not seen it yet in its actual size. So now you create a full-scale copy of the bicycle, carefully choose all the colors and materials, and make it resemble a real product.

Still, the pedals won’t spin yet, and you won't be able to steer or actually ride it. This is your prototype – looks pretty impressive and realistic but does not work yet.

MVP Development:

Your investors again review the idea and approve your design, but now they need to see the functionality. You again create a full-scale bicycle, and now it has working wheels, pedals, brakes, gears, and a seat. That is going to be your MVP.

At this point, you can let your users try it out. They get on a bike, test it, and share their opinion with you. The more people try it, the more complete your feedback is. Just be sure not to show your bicycle to people you do not trust, or they might leak your idea to a next-door producer who also makes bikes for a living.

MVP Testing:

Finally, you modify your product based on what your customers have to say until you are sure that you've got it right. Each improvement brings you closer to perfection, ensuring your bike meets and beats expectations. Through rigorous testing and iteration, you build a product that not only meets your goals but also delights with functionality and format.

Final Product Development:

Only after all these steps, when you have received financial support from your investors and the approval of your customers, are you ready for the launch.

You change out the wooden seat for a cushioned one, install safety lights on your bicycle, lubricate the bicycle chain, put on stickers and a bell, and start selling your product. A strong advertising and promotional campaign announces the arrival of your product. The culmination of creativity and hard work marks the start of a new technology in the world of cycling.

Why is an MVP Important?

A Minimum Viable Product has one main advantage, but it's a very important one: it allows you to test your future product in real-life settings with actual users.

This simple benefit has a lot of positive consequences:

• An MVP lets you adjust your product development plan before it's too late.
• It serves as a warning for any mistakes you make or as confirmation for good business decisions.
• This approach saves you a great deal of time, effort, and money by optimizing the planning process and reducing risks.
• A Minimum Viable Product boosts motivation because the team knows that what they do matters.
• MVP development offers a unique experience of testing the product idea, which will definitely come in handy in your professional life in the future.
• The MVP approach can and should be used within industries of all sorts. While for manufacturers of traditional goods it's a long and strenuous process, for software developers it can be rather simple and accessible.

Some businesses may choose to disregard the minimum viable product stage when creating something innovative – and that may be understandable in certain spaces. But in my opinion, for a software development company it's detrimental.

Once a team has launched a Minimum Viable Product, they can decide whether the venture is on the right track. The most important outcome of an MVP is to get valuable statistics from early users. It's the customers who provide information about the first-class performance of the project. The statistics you get can be used to plan future improvements and prioritize which features should be implemented first.

If you decide to take a risk and implement your idea before checking in with your target audience, you're potentially placing money, time, effort, energy, inspiration, and supporters on the line.

Do you have an idea for an MVP?

My company Covent IT is experienced in developing Minimum Viable Products. In case you need a free estimate for a similar project, feel free to get in touch.

If you have enjoyed the article, you should continue with How IT Outsourcing Saves Costs for Your Company and Avoiding Pitfalls in IT Outsourcing: Tips for Minimizing Risks.

FAQ

How to spend fewer resources

Remember that you should create an MVP with a minimum of time, money, and effort. Think about how you can spend less and still effectively test your business idea. Discussing this question will usually help you choose the MVP functionality to implement in the early stages of new product development.

How do you interact with users?

One of the main goals of creating an MVP is to test your hypotheses and determine the need and value of the product. Feedback from the first users of the product helps you achieve this goal. In order not to miss any important information, think about how you will interact with the target audience: through reviews, surveys, direct interviews, and so on.

How do you make the first sales of a product?

The first sales of the product will give you the means to develop it further and to see if there is interest in your product. You could also consider organizing a pre-sale on a crowdfunding platform such as Kickstarter.

How do you promote a product?

Plan the promotion campaign and the channels you will use. Google Adwords is usually the main tool. Then choose social networks (Facebook, Instagram, and so on), create official pages, and start targeting. You can also collect feedback on social networks.

When you're developing an app, you'll have to decide how you want to load data. And this will typically bring up the issue of infinite pagination.

You likely won't be showing all of the available items in your DB to your users. You may fetch the first 10-20 items and load the next ones as the user scrolls.

This not only saves you unnecessary reads on your database, but also improves performance as you're loading items on demand.

Getting this right is crucial if you're trying to build high-quality apps. I had the chance to work on a B2B application for one of my clients, and having a nice pagination experience was critical to our application – both in terms of fetch operations and user experience.

In this tutorial, I'll walk you through the approach I took so you can build this feature in your own apps.

This article is focused toward readers who already have a basic understanding of Flutter Slivers, Firebase, Riverpod, and Freezed and who want to use them to build something cool.

This is less like a tutorial and is rather something I wanted to share which I think is an interesting take on pagination implementation with these packages.

Once you understand the reasons behind these implementations, then you may be able to replicate this with other state management and DB solutions of your choice.

Also, I've tried to make things as clear as possible while staying within the scope of the article and have added links for supporting articles/documentation to follow up with.

What we'll cover here:

1. Overview of tools/packages we are using
2. Feature Breakdown
3. How to fetch and limit items
4. How to fetch data as we scroll
5. How to cache or store fetched items
6. How to manage OnGoingStates
7. Some improvements you can make

Here are the tools and packages we'll be using:

• Cloud Firestore: NoSQL database solution from Firebase.
• Riverpod: a state management library from the author of Provider.
• Freezed: a code generator for unions/pattern-matching/copy. Commonly used for generating class models with from and to json methods.

And here's the source code if you'd like to have a look: Infinite pagination in Flutter with Riverpod, Freezed, Firebase.

Feature Breakdown

To make things easier to understand and work with, I always try to break them down into their different states. This way, you'll get the abstract idea of what's going on and we can handle each task one by one so we don't get overwhelmed.

Our Pagination feature has the following different states:

Initial fetch states

Here are what the Loading, Data, and Error states should look like:

Initial loading

Data loaded

Error state

After first fetch states (OnGoingStates)

Here are what the OnGoingLoading, OnGoingData, and OnGoingError states should look like:

OnGoingLoading state

OnGoingData state

OnGoingError state

Alright now that we've seen what our different states will look like, let's dive in.

How to Fetch and Limit Data

I got a sample application running – it does nothing special except fetching the data as it is from Firebase.

We are using Slivers for scrolling behaviour and we are using Consumer from Riverpod to load the data through a future provider that's fetching items from Firebase. I've already added some data in Firebase (*Firestore), so we'll just be using that.

Loading the items through Consumer:

Loading initial items through a consumer using Slivers

Declaring Providers:

Declaring database class provider and the futureProvider that returns the items from the database.

MyDatabase class:

Database class with a method called fetchItems() which fetches the items from a Firestore collection called "items" and returns them.

Here's a preview of what this will look like:

Loading items from Firebase into the app. Showing initial loading, ondata states.

As you can see, we are fetching everything that's available, which is not very good! We want to limit the number of items we fetch.

We can do that by using .limit(n) on our Firebase query. We'll set that limit to 20 items and order our items by createdAt field in descending order.

Limiting the number of items fetched with the help of .limit(n) and ordering items based on "createdAt" value.

Now, we only fetch the most recent 20 items from our database. 🙌

Ordering items with respect to some field that is unique and which can be used to sort is important here. This is one of the ways to paginate items. This is also called cursor-based pagination.

How to Add the Mechanism for Scrolling Callback

To get the information on the scrolling, we'll create a ScrollController and pass it to our CustomScrollView.

Added ScrollListener and listening to scroll events to make a call when scroll position is near the end of the items list.

• maxScroll: Maximum amount of distance the user can scroll in the scrolling axis.
• currentScroll: Current position of the user in the scrolling view.
• delta: Amount of space from the bottom.

We'll listen to scrolling events, and when the difference between maxScroll and currentScroll gets less than the delta, we make the call to fetch the next batch of items.

How to Store and Fetch the Next Batch

This will be interesting. Let's see what we have to manage here:

1. How to store already-fetched items.
2. How to build up logic to fetch the next batch of items based on what we fetched previously.

To manage these two functionalities, we'll use StateNotifiersProvider in Riverpod. Using them will help us separate our core implementation logic from the UI layer and give us more flexibility in handling different states of fetching and building up logic for the fetch calls.

This is also Riverpod's recommended solution for managing state which may change in reaction to user interaction.

Here's the updated itemsProvider:

Updated itemsProvider to StateNotifierProvider which creates a PaginationNotifier with initial items count and fetchNextItems call back.

Here's PaginationStateNotifier:

PaginationNotifier that will hold fetched items and handle all the logic related to different pagination states and fetch callbacks.

In this code, we created our PaginationNotifier by extending it to the StateNotifier class. We made it generic representing the type with T to make it reusable.

So, let me go through things in here:

• _items: All the fetched items are added to this list.
• itemsPerBatch: Max number of items in a batch. Same as the number we set in the limit on the firebase query in the backend.
• fetchItems (T? item): This function will be the one actually making the call to fetch the items, and it accepts a nullable item. This item is the last item from the _items list. If it's the first time we are fetching items or _items is empty, then it'll be null.
• fetchFirstBatch(): Will fetch the first batch of items and update the state.
• fetchNextBatch(): Will fetch the next batch of items and update the state. The implementation is almost the same as the fetchFirstBatch right now except for two important things:
  – At first, we are updating the state to .data(_items). This is because we still want to show the previously fetched items while the next batch is loading.
  – Second, we pass the last item in the _items list when making the call to fetch items. This section will improve in the next section where we'll add OnGoingStates to handle this better.
• init(): Called when the notifier is initialized. We just make the call to fetch the first batch here if the items are empty.

Now, let's see what we have to update in the backend logic:

Database class fetchItems method updated for fetching next 20 items based on the last item fetched.

So we are accepting an item here now. If the item is null, we fetch the first 20 items. If it's not, then we are using a .startAfter() filter on our query, which basically says, "Hey! I want the items that start after the item that matches this value that I'm sending along. Cool!"

A bit more professional answer here: 😅

startAfter(): Takes a list of [values], creates and returns a new [Query] that starts after the provided fields relative to the order of the query. (From the Firebase docs)

On the UI side, we won't have to change anything. Let's run this and see what we get!

Loading next items on demand as user scrolls towards end of the items list.

Nice! We are loading up the next batches as we scroll toward the end of the list. Isn't that cool? 😁

Now we want to work on the display. We want to show an ongoing loading or error indicator at the bottom of our list which will represent OnGoingStates.

How to Manage OnGoing States

So how do we manage these OnGoingStates and represent them to the user?

Well, this doesn't have a single answer. One approach is to create some variable within StateNotifier that represents these states in enum form and updates them to indicate the OnGoingStates. This is what I did in my first iteration, and it turned out not to be a very good approach.

So instead, let's jump to the thing that worked for me.

As we have more than three states to handle here, why don't we create our own version of AsyncValue that will include two more additional states called OnGoingLoading and OnGoingError state? AsyncValue is just a union that maps to different states. We could create something similar.

We can do this by using Freezed, which is a code generation library for creating unions and a lot more.

Creating our custom PaginationState union with Freezed.

The first three states here are self-explanatory – they're the regular ones that you interact with when using AsyncValue.

As our OnGoingLoading and OnGoingError states occur after our first call, we also want to display the previously fetched items in this state so we have the items parameter. And an additional error and stack trace parameter for the OnGoingError state.

I believe this way we are more declarative on what we are doing on both the UI and business logic sides. Also, the representation to the user gets pretty easy and clean with this.

Now, let's update our StateNotifier to use this new PaginationState object instead of AsyncValue.

Updated PaginationNotifier to use PaginationState instead of AsyncValue.

In the fetchNextBatch function, we'll update our state to .onGoingLoading and .onGoingError states replacing the .data() and .error() states.

On the UI side, you'll see some compilation errors. We'll also need to handle these two new states in our Consumer.

Updated PaginatedListView :

Updated UI code for PaginatedListView

ItemsList: So, I extracted my logic for loading items in its separate widget.

Updated UI code for ItemsList now handling both initial and OnGoing states.

ItemsListBuilder: And the logic for building out items list or SliverList is extracted into its own widget as well which makes it reusable across different pagination states.

Builder that builds sliver list of items.

The final step that remains is adding that loading/error indicator at the bottom of the ItemsList.

For this, we'll just add another consumer that will handle only the OnGoingLoading and OnGoingError states.

Adding OnGoingBottomWidget below our items list which shows appropriate message based on OnGoing state.

There we go! That looks much better.

Let's see it in action in an iOS simulator showing the handing of different ongoing pagination states: 🚀

Some Improvements You Can Make

Now that we have a working application with pagination, the next steps are to improve upon what we have done so far.

That includes things related to limiting our calls to fetch when there's already a fetch call going on, debouncing calls within a certain duration, and letting the user know if they've reached the end of the list and there are no more items to display.

Also, who doesn't want a scroll to the top button 😅.

How to reject concurrent requests

First, we'll reject any concurrent requests that happen in a certain duration after a request is made. We can do this by creating a timer and checking if that timer is active on each request. If it is, we reject the request or else proceed and again instantiate the timer.

Second, we can also check for our state – if we are already processing the previous request then we reject the incoming request. For this, we can just check if our state is equal to the loading state and handle that.

Added timer and state check to debounce any immediate calls after a call is made or when state is loading.

Has reached end of list (no more items to fetch)

We can maintain a boolean that indicates this. Every time we get our results, we can check if the results are less than our itemsPerBatch count.

On the UI side, we can present a proper message based on that. Here's the updated pagination notifier:

Declaring a noMoreItems bool to know when there are no more items to fetch.

And the updated UI code:

Showing a proper message based on status of noMoreItems bool.

No More Items Found demo.

How to add a scroll to top button

These buttons are useful and save the user from a whole bunch of scrolling. Here's how we can implement one in our app:

Adding a ScrollToTopButton

We are using AnimatedBuilder to listen for scrolling updates. AnimatedBuilder accepts a listenable object and as our ScrollController is actually a ChangeNotifier that implements Listenable, we can pass it here.

If the scroll offset is greater than a certain value, then we show the ScrollToTop button. When tapped, we animate the scrolling to the top.

Demo showing usage of ScrollToTopButton added above.

Summary

That wraps it up! Here are some of the things you learned about in this article:

• How to handle the different states of pagination effectively with Riverpod and Freezed.
• How to use the cursor-based pagination technique with Firebase. The same can be applied to whatever DB you're using with only changes in the backend fetch function. Other implementations remains the same.

Again, here's the source code: Infinite pagination in Flutter with Riverpod, Freezed, Firebase

Hope you enjoyed the article. ☺️ This was my first article here on freeCodeCamp and I really enjoyed writing this. It took a 😅 lot more time to write than I had imagined but finally, it's here for you to read!🙌

I hope to write more such articles here 🙇‍♂️ along with some Flutter design 🧑‍🎨 challenges as I myself explore app development as a growing developer and bring interesting stuff to you! 😁

I'm also active on Twitter @TakRutvik 💙 sharing my creations and things that I've been working on. Feel free to reach out ☺️.

We just published an 8-hour course on the freeCodeCamp.org YouTube channel that will teach you the business of building apps.

Shad Sluiter created this course. He teaches computer science and programming classes at Grand Canyon University. He has multiple degrees in Computer Science, Mathematics and Education, as well as a Masters degree in Computer Information Systems.

This project management course is for leaders, entrepreneurs, and software developers. You will learn everything from determining what type of app to build, effective app design, marketing and monetization strategies, choosing the right tools, hiring and managing development teams, and more.

Here are all the sections covered in this course:

Unit 1.1 What is the value proposition of your app?

• Do you need a web app or just a better website?
• Categories of Apps – which app category is easiest to compete in?

Unit 1.2 Identify the problem you are trying to solve with your app.

• Candy, vitamins or addictive painkiller?
• Fulfillment, recognition, security
• The Five Whys

Unit 1.3 How to discover a niche in the marketplace

• Follow popular trend
• Add a twist
• Your own expertise
• Problems in existing competition
• Unit 1.4 Listening to users
• Users that exist in the market
• Get user feedback
• Idea 2.0
• Homework 1.1 Airbnb and Lyft
• Homework 1.2 App Annie and Sensor Tower
• Homework 1.3 Write an application plan

Unit 2 UI, UX, MVP design

• How to create user stories
• Planning for an MVP

Unit 2.2 Designing an effective UI user interface

• On boarding new users
• The Google UI Case Study
• The Photoshop Adobe UI negative Case Study
• Effective UI elements
• Don’t Make Me Thing Steve Krug
• UI design templates
• Design for your target audience
• Unit 2.3 How to design an effective UX User Experience
• UX is where Design strategy and Technology intersect
• Application Flow
• Measuring Conversion Rates
• UX outside of the app
• The User Empathy Map
• Six principles for a positive UX

Unit 2.4 The MVP

• The Lean Startup MVP concept by Eric Ries
• Planning for future versions of your app
• What is NOT an MVP
• Zappos MVP Case Study
• The MVP design pyramid
• The purpose of an MVP
• Keeping the cost of an MVP low
• Homework 2.1 App Design Case Studies
• Homework 2.2 Develop User Stories
• Homework 2.3 Interactive UI prototype

Unit 3.1 Marketing and Monetization for an App

• The BMC Case Study
• Unit 3.2 Monetization Strategies of Apps
• Apple App Store vs Google Play Store revenue
• iOS vs Android user value per customer
• iOS vs Android market share in various countries

Unit 3.3 Marketing Your App

• How users discover your app

Unit 3.4 Dealing with Investors

• Homework 3.1 Build a BMC for your app

Unit 4.1 Building Customer Loyalty

• Why Customers Abandon Apps?
• First-to-Mind solution
• Compulsion
• Morality of Addictive Apps
• The HOOK app addictive model
• Homework 4.1 Understanding Hook
• Homework 4.2 Applying Hook

Unit 5.1 Choosing the Right Tools

• Five Reasons Not to Build an App

Unit 5.2 Nine Companies Who Nailed their App

Unit 5.3 Development Languages and Cross Platform Tools

• Homework 5.1 Compare Dev Tools
• Homework 5.2 Recommend a Development Solution

Unit 6.1 Full Stack Considerations

• Choosing a Database Backend
• SQL
• noSQL
• SQL vs noSQL
• Graph Database
• Full Text Database
• Vertical Scaling
• Horizontal Scaling
• Data Duplication in Distributed Databases
• SQL Shards

Homework 6.1 Recommend Database Solutions

• Homework 6.2 Explore API services

Unit 7.1 Hiring the Development Team

• Four Roles of a Software Development Team
• Product Manager
• Product Designer
• Front End Developer
• Back End Developer

Unit 7.2 Mobile vs Web Development

• Skills Used in Mobile vs Web Development
• Web vs Mobile Development Salaries

Unit 7.3 Agile Team Management

• SDLC Agile vs Waterfall
• What is Waterfall Development?
• What is Agile Scrum Methodology?
• The Product Backlog
• Spring Planning
• Sprint Backlog
• What is a Sprint?
• Product Increment
• Daily Scrum
• Sprint Review
• Sprint Retrospective

Unit 7.4 How to Write a Job Requisition

• Cross Field Expertise
• Intangibles
• Adjacent Skills
• Portfolio
• Homework 7.1 Team Roles
• Homework 7.2 Internal Job Requisition
• Homework 7.3 External Job Posting

Unit 8.1 Future Trends in Mobile Development

• Cloud Computing
• 38 Artificial Intelligence
• Cross Platform Dev
• mCommerce
• Virtual Reality
• Augmented Reality
• Higher Bandwidth
• IOT
• Wearables
• Security
• Blockchain
• Beacon
• Homework 8.1 Review Past Predictions
• Homework 8.2 Current State of Development Tools
• Homework 8.3 Future Mobile Tech

Watch the full course below or on the freeCodeCamp.org YouTube channel (8-hour watch).

Podcasts are a great way to consume digital information. They've become quite popular because you can listen to them anywhere, any time.

Podcasts deliver educational, entertaining, and engaging content on all kinds of topics – tech topics included. The hosts and their guests talk and share ideas, each in their own way, which makes every podcast different and interesting.

This post is a compilation of some of the best podcast channels available for free that focus on the Flutter framework.

Flutter is a popular cross-platform mobile application development framework that helps you build pixel-perfect UIs powered by the Dart programming language.

Its community is growing rapidly which means that every day there are more resources out there about the framework, like articles, podcasts, libraries, other tools.

The podcasts I've gathered in this article deliver all kinds of Flutter-related content including the journeys of some of the top Flutter experts. You should definitely subscribe and tune into them.

Flutter 101 Podcast

The Flutter 101 Podcast is one of the most popular podcast channels on Flutter. A large numbers of developers listen to it who are actively involved in the Flutter community.

It is a weekly podcast series hosted by Vince Varga and it focuses on Flutter development and its what's going on with the framework.

If you want to get the latest news and updates regarding Flutter development as well as learn the tech itself, then this is a good option for you.

It's all Widgets

It's all Widgets is a popular podcast channel created by Flutter developers from the Flutter community.

Along with all the latest news and updates from the Flutter ecosystem, it also delivers stories from Flutter contributors and practitioners.

The main focus lies in sharing inspiring stories of Flutter developers and how they got into the field. The podcast is hosted by Hillel Coren, Google Developer Expert for FlutterDev.

Flying High With Flutter

Flying High with Flutter is a weekly podcast channel that delivers episodes on the Flutter development ecosystem. It discusses anything and everything related to Flutter.

The primary focus is on real-world problems you might face while using Flutter but also includes daydream-inspired and challenging ideas on the Flutter community.

The podcast also invites expert guests in the Flutter field to share their background, experience, thoughts, and insights into the engaging Flutter world.

Learning Flutter

As the name suggests, the Learning Flutter podcast channel helps you learn Flutter/Dart programming.

In this Podcast hosted by Wilfried Mbouenda Mbogne, he shares stories about his Flutter adventures as a developer. The podcast also hosts other experts from the Flutter field to share their journeys in the Flutter world.

This podcast can be a source of inspiration for many mobile application developers.

CodeOn

CodeOn is a weekly podcast channel hosted by Tulsiram Mehtre, a GoogleDevExpert. His main goal is to help developers build high-quality applications quickly and efficiently.

This podcast channel not only delivers knowledge on Flutter but also covers intermediate to advanced lessons about JavaScript, Angular, Firebase, and modern app development. So you are getting the whole package each week.

Wrapping Up

The main goal of this article was to introduce you to some of the best podcast channels available for the Flutter development ecosystem.

I hope it's an invaluable resource for any mobile app developers out there. I recommend everyone to subscribe and tune in to these amazing Flutter-based podcasts to get up-to-date knowledge and understanding of the Flutter world.

Lastly, you can get inspiration for your Flutter app from others that are already out there.

Happy Coding!

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.

How to Set Up Auth and User Collection

In this section following we'll implement the following functionality:

1. How to configure NextJS and Chakra UI in our quiz app.

2. How to configure Firebase Authentication and Firestore.

3. How to set up Navbar, Signup and Sign-out mechanisms.

You can find the quiz app code implemented in this section at this commit.

How to configure NextJS and Chakra UI in our quiz app:

To create a NextJS application you need to use the following command:

npx create-next-app quizapp

You'll get the following directory structure:

+-- node_modules
+-- pages
+-- public
+-- styles
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- README.md

Note: I am using NextJS version 10.1.3 and React version 17.0.2. You can confirm the version in your package.json.

Now let's convert our codebase into TypeScript-compatible code.

In the root directory of the project, create a file named tsconfig.json using the following command:

touch tsconfig.json

After that, install the TypeScript dependencies inside the project using the following command:

npm install --save-dev typescript @types/react @types/node

After that, convert the following files like this:

pages/_app.js => pages/_app.tsx
pages/index.js => pages/index.tsx

Remove the pages/api directory. Now go to the pages/_app.tsx and replace the full code as follows:

import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default App

Go to pages/index.tsx and replace it with the following code:

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>QuizApp</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main></main>
      <footer></footer>
    </div>
  );
}

Now start the development server using the following command:

npm run dev

The first time when you start the development server, Next will:

1. Populate the tsconfig.json file for you.

2. Create the next-env.d.ts file, which ensures that Next types are picked up by the TypeScript compiler. You should not touch this file.

Delete the styles directory from the root directory.

After following the above steps you'll have the following directory structure:

+-- node_modules
+-- pages
|   +-- _app.tsx
|   +-- index.tsx
+-- public
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- README.md
+-- tsconfig.json

Now go to http://localhost:3000 and you'll find an empty screen.

Let's install Chakra UI using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Note: If you use zsh you'll need to add the escape character () after @ as follows:

npm i @chakra-ui/react @emotion/react@\^11 @emotion/styled@\^11 framer-motion@\^4

As per chakra documentation, we need to wrap <Component /> with ChakraProvider in the pages/_app.tsx as follows:

import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default App;

Basically, this will perform CSSReset and pass the chakra theme to the component.

Now we will create our Navbar component.

To create this component first we need to create a directory named src in the root directory and cut/paste the pages directory inside the src directory.

After that create a directory named common under the src directory.

Under the common directory create a file named Navbar.tsx. Copy/paste the following code inside that file:

import React from 'react';
import { Box, Divider, Flex, Heading, Link } from '@chakra-ui/react';
import { useRouter } from 'next/router';

const Navbar: React.FC<{}> = () => {
  const router = useRouter();

  return (
    <>
      <Flex justify="space-between" m={4}>
        <Heading onClick={() => router.push('/')} as="button">
          QuizApp
        </Heading>
        <Box>
          <Box p={2}>
            <Link
              p={2}
              onClick={() => router.push('/signin')}
              fontWeight={
                router.pathname === '/signin' ? 'extrabold' : 'normal'
              }
            >
              Sign In
            </Link>
          </Box>
        </Box>
      </Flex>
      <Divider
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
    </>
  );
};

export default Navbar;

After that go to pages/index.tsx and add the following line between the <main></main> tag.

<Navbar />

You'll also need to import the Navbar using the following syntax:

import Navbar from '../common/Navbar';

Go to your web browser and open http://localhost:3000 and you'll see the following output:

How to Configure Firebase Authentication and Firestore:

Now let's configure Firebase. Go to the firebase console. Click on Add project:

After that add your project name as follows:

Next, it will ask if you want to enable Google Analytics or not. I prefer to disable it, but you can switch it on if you want.

Now click on Create project. It will take some time to create the project.

Once the project is created you'll see the following screen:

After clicking on continue you'll see a dashboard that looks like this:

Click on the Settings > Project Settings > General. Inside the General tab scroll down and in the Your apps card, select the third option (after the Android icon).

It will ask for some details to register the app. Add your app's nickname as follows:

After you've clicked on register app, Firebase will give you a snippet. Copy-paste these details into a file and then you can click on continue to console.

Now go to the service accounts tab in project settings and click on the button Generate new private key. It will download some configurations that we will need for firebase-admin.

Now go back and click on the Authentication tab:

After that click on the Get started button and you'll get the following screen:

Now click on Google text and click the Enable button:

Select the project configured email as your email id.

Click on the Firestore tab and click on Create database button.

Once you've clicked on Create database it will ask for the mode. Select test mode for developing the application.

Click on Next. It will ask for the location. Select the appropriate option and then click the Enable button.

How to set up the Navbar, Signup, and Sign-out mechanisms:

Now back to our project. Install the following dependencies using this npm command:

npm i firebase firebase-admin

Create a directory named lib inside the src directory.

In the lib directory create two files named firebase.ts and firebase-admin.ts.

Copy the following code inside firebase.ts:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

try {
  firebase.initializeApp(firebaseConfig);
} catch (err) {
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack);
  }
}

export default firebase;

Here we initialize the Firebase library using apikey, authdomain and projectId.

Paste the following code inside firebase-admin.ts:

import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      privateKey: process.env.FIREBASE_PRIVATE_KEY,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    }),
    databaseURL: process.env.FIREBASE_DATABASE_URL,
  });
}

const db = admin.firestore();
const auth = admin.auth();

export { db, auth };

Here we initialize the firebase-admin library using projectId, privateKey, clientEmail, and databaseURL.

Now in the root directory create a file named .env.local and paste in the following code:

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=

FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=
FIREBASE_DATABASE_URL=

You'll find NEXT_PUBLIC_FIREBASE_API_KEY, NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, NEXT_PUBLIC_FIREBASE_PROJECT_ID inside the Firebase Console > Settings > Project Settings > General > Your Apps Card.

You'll find FIREBASE_PRIVATE_KEY, FIREBASE_CLIENT_EMAIL under the service account tab. We can generate a new private key using the Generate new private key button. That file contains both sets of data.

For the FIREBASE_DATABASE_URL add https://<database-name>.firebaseio.com. Replace database-name with your database name.

Note: You can find the database-name under firebase console > firestore in the data tab (refer to the screen shot below).

Now in the lib directory create a third file named auth.tsx. This is going to contain our Authorization mechanism and state. Paste the following code in this file:

import { Context, createContext, useContext, useEffect, useState } from 'react';
import { addUser } from '../utils/db';
import firebase from './firebase';

interface Auth {
  uid: string;
  email: string | null;
  name: string | null;
  photoUrl: string | null;
  token: string | null;
}

interface AuthContext {
  auth: Auth | null;
  loading: boolean;
  siginWithGoogle: () => Promise<void>;
  signOut: () => Promise<void>;
}

const authContext: Context<AuthContext> = createContext<AuthContext>({
  auth: null,
  loading: true,
  siginWithGoogle: async () => {},
  signOut: async () => {},
});

const formatAuthState = (user: firebase.User): Auth => ({
  uid: user.uid,
  email: user.email,
  name: user.displayName,
  photoUrl: user.photoURL,
  token: null,
});

function useProvideAuth() {
  const [auth, setAuth] = useState<Auth | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  const handleAuthChange = async (authState: firebase.User | null) => {
    if (!authState) {
      setLoading(false);
      return;
    }
    const formattedAuth = formatAuthState(authState);
    formattedAuth.token = await authState.getIdToken();
    setAuth(formattedAuth);
    setLoading(false);
  };

  const signedIn = async (
    response: firebase.auth.UserCredential,
    provider: String = 'google'
  ) => {
    if (!response.user) {
      throw new Error('No User');
    }
    const authUser = formatAuthState(response.user);
    await addUser({ ...authUser, provider });
  };

  const clear = () => {
    setAuth(null);
    setLoading(true);
  };

  const siginWithGoogle = async () => {
    setLoading(true);
    return firebase
      .auth()
      .signInWithPopup(new firebase.auth.GoogleAuthProvider())
      .then(signedIn);
  };
  const signOut = async () => {
    return firebase.auth().signOut().then(clear);
  };

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(handleAuthChange);
    return () => unsubscribe();
  }, []);

  return {
    auth,
    loading,
    siginWithGoogle,
    signOut,
  };
}

export function AuthProvider({ children }: any) {
  const auth = useProvideAuth();
  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

export const useAuth = () => useContext(authContext);

In the src directory create a folder named utils and under that folder create a file named db.ts. Add the following code inside that file:

import firebase from '../lib/firebase';

export const addUser = async (authUser: any) => {
  const resp = await firebase
    .firestore()
    .collection('users')
    .doc(authUser.uid as string)
    .set({ ...authUser }, { merge: true });
  return resp;
};

Go to the Navbar.tsx under component directory and update the previous code with the following code:

import { Box, Divider, Flex, Heading, Link } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { useAuth } from '../lib/auth';

const Navbar: React.FC<{}> = () => {
  const { auth, signOut } = useAuth();
  const router = useRouter();

  return (
    <>
      <Flex justify="space-between" m={4}>
        <Heading onClick={() => router.push('/')} as="button">
          QuizApp
        </Heading>
        <Box>
          {auth ? (
            <Box p={2}>
              <Link
                p={2}
                fontWeight={
                  router.pathname === '/quiz/new' ? 'extrabold' : 'normal'
                }
                onClick={() => router.push('/quiz/new')}
              >
                Add new quiz
              </Link>
              <Link p={2} onClick={() => signOut()}>
                Logout
              </Link>
            </Box>
          ) : (
            <Box p={2}>
              <Link
                p={2}
                onClick={() => router.push('/signin')}
                fontWeight={
                  router.pathname === '/signin' ? 'extrabold' : 'normal'
                }
              >
                Sign In
              </Link>
            </Box>
          )}
        </Box>
      </Flex>
      <Divider
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
    </>
  );
};

export default Navbar;

Replace the _app.tsx with the following code:

import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';
import { AuthProvider } from '../lib/auth';

function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <AuthProvider>
        <Component {...pageProps} />
      </AuthProvider>
    </ChakraProvider>
  );
}

export default App;

Create a new file named signin.tsx under the pages directory and add the following code:

import { Button, Center, Container, Heading, VStack } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { FcGoogle } from 'react-icons/fc';
import Navbar from '../common/Navbar';
import { useAuth } from '../lib/auth';

const signin = () => {
  const { auth, siginWithGoogle } = useAuth();
  const router = useRouter();

  if (auth) {
    router.push((router.query.next as string) || '/');
  }

  return (
    <>
      <Navbar />
      <Container>
        <Center mt={10}>
          <VStack spacing="4">
            <Heading fontSize="3xl" mb={2}>
              Hello, Welcome to the Quiz App!!
            </Heading>
            <Button leftIcon={<FcGoogle />} onClick={() => siginWithGoogle()}>
              Sign In with Google
            </Button>
          </VStack>
        </Center>
      </Container>
    </>
  );
};

export default signin;

You'll need to install react-icons. To install react-icons use the following command:

npm i react-icons

Now restart the development server and go to the http://localhost:3000. Click on the Sign In link and you'll get the following screen.

Now click the Sign in with Google Button. After a successful sign-in, you will be redirected to the Home page.

How to Add a Quiz and Display Multiple Quizzes

In this section we'll implement the following functionality:

1. How to set up the Add a Quiz mechanism.

2. How to set up the Display Multiple Quizzes mechanism.

You can find the quiz app code in this section at this commit.

How to set up the Add a Quiz mechanism:

Now we will focus on adding the quiz. To add a new quiz we will use Formik. It will help us configure the dynamic form and Yup will help us with the validation of those forms.

Let's install both the libraries using the following command.

npm i formik yup

We will also use a package named uuid to give a unique identifier to our questions and options. To install the package use the following command:

npm i uuid

We will also need chakra icons so install them using the following command:

npm i @chakra-ui/icons

We will need Axios to make an API call to our Next serverless environment. Use the following command to install it:

npm i axios

Inside the src > pages directory create a new directory named quiz and under that directory create a new directory named new.

Inside the new directory create a file named index.tsx and paste the following code into it:

import { AddIcon, MinusIcon } from '@chakra-ui/icons';
import {
  Box,
  Button,
  Center,
  Container,
  Divider,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  IconButton,
  Input,
  SimpleGrid,
  Text,
  Textarea,
} from '@chakra-ui/react';
import { Field, FieldArray, Form, Formik, getIn } from 'formik';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import * as yup from 'yup';
import Navbar from '../../../common/Navbar';
import { useAuth } from '../../../lib/auth';
import { addQuizApi } from '../../../utils/service';

const optionData = [
  {
    label: 'Option A:',
  },
  {
    label: 'Option B:',
  },
  {
    label: 'Option C:',
  },
  {
    label: 'Option D:',
  },
];

const answerOption = [
  {
    label: 'A',
    answer: 0,
  },
  {
    label: 'B',
    answer: 1,
  },
  {
    label: 'C',
    answer: 2,
  },
  {
    label: 'D',
    answer: 3,
  },
];

const Index = () => {
  const { auth, loading } = useAuth();

  const router = useRouter();

  useEffect(() => {
    if (!auth && !loading) {
      router.push('/signin?next=/quiz/new');
    }
  }, [auth, loading]);

  const questionsData = {
    title: '',
    options: [{ title: '' }, { title: '' }, { title: '' }, { title: '' }],
    answer: '0',
  };

  const initialValues = {
    title: '',
    description: '',
    questions: [questionsData],
  };

  const validationSchema = yup.object().shape({
    title: yup.string().required('Required'),
    description: yup.string().required('Required'),
    questions: yup
      .array()
      .of(
        yup.object().shape({
          title: yup.string().required('Required!'),
          options: yup.array().of(
            yup.object().shape({
              title: yup.string().required('Required!'),
            })
          ),
        })
      )
      .required('Must add a question'),
  });

  const submitHandler = async (values, actions) => {
    try {
      values = {
        ...values,
        createdAt: new Date(),
        updatedAt: new Date(),
        questions: values.questions.map((question) => {
          return {
            ...question,
            options: question.options.map((option) => {
              return { ...option, optionId: uuidv4() };
            }),
            questionId: uuidv4(),
          };
        }),
      };
      await addQuizApi(auth, values);
      router.push('/');
    } catch (error) {
      console.log('error', error);
    } finally {
      actions.setSubmitting(false);
    }
  };

  return (
    <>
      <Navbar />
      <Container
        maxW="3xl"
        mt={5}
        mb={5}
        borderWidth="1px"
        borderRadius="lg"
        p={6}
        boxShadow="xl"
      >
        <Formik
          initialValues={initialValues}
          onSubmit={submitHandler}
          validationSchema={validationSchema}
        >
          {(props) => (
            <Form>
              <Field name="title">
                {({ field, form }) => (
                  <FormControl
                    isInvalid={form.errors.title && form.touched.title}
                  >
                    <FormLabel htmlFor="title" fontSize="xl">
                      Quiz Title
                    </FormLabel>
                    <Input {...field} id="title" />
                    <FormErrorMessage>{form.errors.title}</FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Field name="description">
                {({ field, form }) => (
                  <FormControl
                    isInvalid={
                      form.errors.description && form.touched.description
                    }
                  >
                    <FormLabel htmlFor="description" fontSize="xl" mt={4}>
                      Quiz description
                    </FormLabel>
                    <Textarea {...field} id="description" />
                    <FormErrorMessage>
                      {form.errors.description}
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Field name="questions">
                {({ field }) => (
                  <FormControl>
                    <FormLabel htmlFor="questions" fontSize="xl" mt={4}>
                      Enter your question data:
                    </FormLabel>
                    <Box ml={4}>
                      <FieldArray {...field} name="questions" id="questions">
                        {(fieldArrayProps) => {
                          const { push, remove, form } = fieldArrayProps;
                          const { values, errors, touched } = form;
                          const { questions } = values;
                          const errorHandler = (name) => {
                            const error = getIn(errors, name);
                            const touch = getIn(touched, name);
                            return touch && error ? error : null;
                          };
                          return (
                            <div>
                              {questions.map((_question, index) => {
                                return (
                                  <Flex key={index} direction="column">
                                    <FormControl
                                      isInvalid={errorHandler(
                                        `questions[${index}][title]`
                                      )}
                                    >
                                      <FormLabel
                                        htmlFor={`questions[${index}][title]`}
                                      >
                                        Question Title:
                                      </FormLabel>
                                      <Input
                                        name={`questions[${index}][title]`}
                                        as={Field}
                                        mb={
                                          !errorHandler(
                                            `questions[${index}][title]`
                                          ) && 3
                                        }
                                      />
                                      <FormErrorMessage>
                                        {errorHandler(
                                          `questions[${index}][title]`
                                        )}
                                      </FormErrorMessage>
                                    </FormControl>
                                    <SimpleGrid
                                      minChildWidth="300px"
                                      spacing="10px"
                                      mb={{ base: 4 }}
                                    >
                                      {optionData.map((option, subIndex) => (
                                        <FormControl
                                          mb={2}
                                          key={subIndex}
                                          isInvalid={errorHandler(
                                            `questions[${index}][options][${subIndex}].title`
                                          )}
                                        >
                                          <FormLabel
                                            htmlFor={`questions[${index}][options][${subIndex}].title`}
                                          >
                                            {option.label}
                                          </FormLabel>
                                          <Input
                                            name={`questions[${index}][options][${subIndex}].title`}
                                            as={Field}
                                          />
                                          <FormErrorMessage>
                                            {errorHandler(
                                              `questions[${index}][options][${subIndex}].title`
                                            )}
                                          </FormErrorMessage>
                                        </FormControl>
                                      ))}
                                    </SimpleGrid>
                                    <Box>
                                      <Text mb="8px">Correct Answer:</Text>
                                      <Field
                                        component="select"
                                        name={`questions[${index}][answer]`}
                                        style={{
                                          width: '100%',
                                          padding: '10px',
                                        }}
                                      >
                                        {answerOption.map((value, key) => (
                                          <option
                                            value={value.answer}
                                            key={key}
                                          >
                                            {value.label}
                                          </option>
                                        ))}
                                      </Field>
                                    </Box>
                                    <Flex
                                      direction="row"
                                      justify="flex-end"
                                      mt={4}
                                    >
                                      {index > 0 && (
                                        <IconButton
                                          onClick={() => remove(index)}
                                          aria-label="Remove Question"
                                          icon={<MinusIcon />}
                                          variant="ghost"
                                        >
                                          -
                                        </IconButton>
                                      )}
                                      {index === questions.length - 1 && (
                                        <IconButton
                                          onClick={() => push(questionsData)}
                                          aria-label="Add Question"
                                          icon={<AddIcon />}
                                          variant="ghost"
                                        >
                                          +
                                        </IconButton>
                                      )}
                                    </Flex>
                                    {index !== questions.length - 1 && (
                                      <Divider
                                        mt={2}
                                        mb={4}
                                        css={{
                                          boxShadow: '1px 1px #888888',
                                        }}
                                      />
                                    )}
                                  </Flex>
                                );
                              })}
                            </div>
                          );
                        }}
                      </FieldArray>
                    </Box>
                  </FormControl>
                )}
              </Field>
              <Center>
                <Button
                  colorScheme="green"
                  isLoading={props.isSubmitting}
                  type="submit"
                  disabled={!(props.isValid && props.dirty)}
                >
                  Submit Quiz
                </Button>
              </Center>
            </Form>
          )}
        </Formik>
      </Container>
    </>
  );
};

export default Index;

Let's understand the code above.

Note: Don't copy/paste the individual code snippets below. I took pieces from the big code block above and broke them into smaller chunks so we can understand what's going on.

const questionsData = {
  title: '',
  options: [{ title: '' }, { title: '' }, { title: '' }, { title: '' }],
  answer: '0',
};

const initialValues = {
  title: '',
  description: '',
  questions: [questionsData],
};

<Formik
   initialValues={initialValues}
   onSubmit={submitHandler}
   validationSchema={validationSchema}
>
    {(props) => (
       <Form>
         #Input field and button
       </Form>
    )}
</Formik>

<Formik> is a wrapper that takes 3 props. The initialValues that are defined above and passed here as props are then passed down to the Input fields defined in between.

<FieldArray {...field} name="questions" id="questions">
  {(fieldArrayProps) => {
    const { push, remove, form } = fieldArrayProps;
    const { values, errors, touched } = form;
    const { questions } = values;
    const errorHandler = (name) => {
      const error = getIn(errors, name);
      const touch = getIn(touched, name);
      return touch && error ? error : null;
    };
    return (<div> 
      // Input fields
    </div>)
  };
</FieldArray>

Inside this form, you'll find that the FieldArray component is defined. This component is provided by Formik itself. When we want dynamic input fields, we can use this component.

The fieldArrayProps consists of two important elements named push and remove which helps us add a new input field and remove it.

We are using the getIn utility from Formik to validate our fields and check if there are any errors.

const validationSchema = yup.object().shape({
  title: yup.string().required('Required'),
  description: yup.string().required('Required'),
  questions: yup
    .array()
    .of(
      yup.object().shape({
        title: yup.string().required('Required!'),
        options: yup.array().of(
          yup.object().shape({
            title: yup.string().required('Required!'),
          })
        ),
      })
    )
    .required('Must add a question'),
});

Above is the Yup syntax which defines the object shape. For further information please refer to yup's documentation.

We combine the validation schema with Yup and pass it to Formik. Formik internally maps them with the name defined in the input field.

const submitHandler = async (values, actions) => {
  try {
    values = {
      ...values,
      createdAt: new Date(),
      updatedAt: new Date(),
      questions: values.questions.map((question) => {
        return {
          ...question,
          options: question.options.map((option) => {
            return { ...option, optionId: uuidv4() };
          }),
          questionId: uuidv4(),
        };
      }),
    };
    await addQuizApi(auth, values);
    router.push('/');
  } catch (error) {
    console.log('error', error);
  } finally {
    actions.setSubmitting(false);
  }
};

The onSubmit is invoked when a user clicks enter on the keyboard or presses the submit button on the website. We have to pass submitHandler as a reference to it.

Inside that function, we set a unique id for our questions and options and make an API call to store it on our Firestore collection.

Now inside the src > utils directory, create a new file named service.ts and add the following code:

import axios from 'axios';

export const addQuizApi = async (auth, values) => {
  try {
    const header = {
      'Content-Type': 'application/json',
      token: auth.token,
    };
    const resp = await axios.post('/api/quiz', values, { headers: header });
    return resp;
  } catch (error) {
    throw error;
  }
};

Inside the src > pages directory create a new directory named api. All the files under this directory will run as the serverless environment by default.

Inside the api directory create a directory named quiz. Here create a new file named index.ts and paste in the following code:

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '../../../lib/firebase-admin';
import { addQuiz as addQuizFb } from '../../../utils/db';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  switch (req.method) {
    case 'POST':
      await addQuiz(req, res);
      break;
    default:
      res.status(405).json({ status: false, message: 'Method Not found' });
      break;
  }
};

const addQuiz = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const user = await auth.verifyIdToken(req.headers.token as string);
    const quizData = { ...req.body, userId: user.uid };
    await addQuizFb(quizData);
    return res
      .status(200)
      .json({ status: true, message: 'Quiz added successfully...' });
  } catch (error) {
    return res
      .status(500)
      .json({ status: false, message: 'Something went wrong' });
  }
};

Now go to the src > utils > db.ts directory and add the following code after the addUser function:

export const addQuiz = async (quizData) => {
  let response = await firebase.firestore().collection('quiz').add(quizData);
  return response;
};

Now, let's run our development server and try to add a new quiz.

npm run dev

Go to http://localhost:3000 and click on the Add new quiz link in the navbar. You'll get the following output:

Now fill in the form and click on Submit Quiz button. Go to the Firebase console and you'll see that a new collection named quiz has been created.

Note: For the FIREBASE_PRIVATE_KEY in .env.local, remember to add string quotation marks around it or you'll get the following error:

FirebaseAppError: Failed to parse private key: Error: Invalid PEM formatted message.

How to set up the Display Multiple Quizzes mechanism:

Now let's show our quiz list on the / route. Go to the pages > index.js and update the existing code with the following code:

import { Box, Container, Divider, Flex, Heading, SimpleGrid, Text } from '@chakra-ui/react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import React from 'react';
import Navbar from '../common/Navbar';
import { getAllQuiz, getAllUsers } from '../utils/db';

const Home = (props) => {
  const quiz = JSON.parse(props.quiz);
  const router = useRouter();

  const generateQuizCard = (singleQuiz) => {
    return (
      <Box m={3} borderWidth="1px" borderRadius="lg" p={6} boxShadow="xl">
        <Heading as="h3" size="lg">
          {singleQuiz.title}
        </Heading>

          <Text color="gray.500" mt={2}>
            Posted By: {singleQuiz.user.name}
          </Text>
          <Text color="gray.500" mt={2}>
            No of Questions: {singleQuiz.questions.length}
          </Text>

        <Divider mt={3} mb={3} />
        <Text noOfLines={[1, 2, 3]}>{singleQuiz.description}</Text>
      </Box>
    );
  };

  return (
    <Box>
      <Head>
        <title>QuizApp</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <header>
          <Navbar />
          <Container maxW="6xl">
            {quiz.length > 0 && (
              <SimpleGrid minChildWidth="400px">
                {quiz.map((singleQuiz) => (
                  <Box
                    key={singleQuiz.id}
                    onClick={() => router.push(`/quiz/${singleQuiz.id}`)}
                    as="button"
                    textAlign="start"
                    m={2}
                  >
                    {generateQuizCard(singleQuiz)}
                  </Box>
                ))}
              </SimpleGrid>
            )}
          </Container>
        </header>
      </main>
      <footer></footer>
    </Box>
  );
};

export async function getServerSideProps(_context) {
  const quiz = await getAllQuiz();
  const users = await getAllUsers();
  const data = quiz.map((singleQuiz: any) => {
    return { ...singleQuiz, user: users.find((user) => user.id === singleQuiz.userId)};
  });
  return { props: { quiz: JSON.stringify(data) } };
}

export default Home;

Now go to the src > utils > db.ts and add the following after addQuiz function:

export const getAllQuiz = async () => {
  const snapshot = await firebase.firestore().collection('quiz').get();
  const quiz = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  return quiz;
};

export const getAllUsers = async () => {
  const snapshot = await firebase.firestore().collection('users').get();
  const users = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  return users;
}

Go to http://localhost:3000 and refresh the page. You'll get the following output:

How to Show a Single Quiz, How to Answer a Quiz and How to Validate the Answer

In this section following will be implemented:

1. How to sett up the Show a Single Quiz and Answer Quiz mechanisms.

2. How to set up the Validate Answer mechanism.

You can find the quiz app code implemented in this section at this commit.

How to set up the Show a Single Quiz and Answer Quiz mechanisms:

Create a new directory named [id] under src > pages > quiz. Inside this directory create a file named index.tsx and paste in the following code:

import {
  Button,
  Center,
  Container,
  Divider,
  FormControl,
  FormLabel,
  Heading,
  HStack,
  RadioGroup,
  SimpleGrid,
  Text,
} from '@chakra-ui/react';
import { Field, Form, Formik } from 'formik';
import { NextPageContext } from 'next';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import Navbar from '../../../common/Navbar';
import { useAuth } from '../../../lib/auth';
import { getSingleQuiz } from '../../../utils/db';
import { addAnswerApi } from '../../../utils/service';

const ShowQuiz = (quiz, onSubmit) => {
  return (
    <Container
      maxW="7xl"
      mt={5}
      mb={5}
      borderWidth="1px"
      borderRadius="lg"
      p={6}
      boxShadow="xl"
    >
      <Center flexDirection="column">
        <Heading>{quiz.title}</Heading>
      </Center>
      <Text mt={4}>{quiz.description}</Text>
      <Heading mt={4} size="lg">
        Questions:
      </Heading>
      <Divider
        mt={4}
        mb={4}
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
      <Formik initialValues={{}} onSubmit={onSubmit}>
        {(props) => (
          <Form>
            {quiz.questions.map((singleQuiz, key) => (
              <Field name={singleQuiz.questionId} key={key}>
                {({ field, _form }) => (
                  <FormControl
                    as="fieldset"
                    isRequired={true}
                    mb={{ base: 4, md: 0 }}
                  >
                    <FormLabel as="legend">{singleQuiz.title}</FormLabel>
                    <RadioGroup>
                      <SimpleGrid minChildWidth="120px" mb={2}>
                        {singleQuiz.options.map((option, subkey) => (
                          <HStack key={subkey}>
                            <Field
                              {...field}
                              type="radio"
                              name={singleQuiz.questionId}
                              value={option.optionId}
                            />
                            <Text>{option.title}</Text>
                          </HStack>
                        ))}
                      </SimpleGrid>
                    </RadioGroup>
                  </FormControl>
                )}
              </Field>
            ))}
            <Center mt={10}>
              <Button
                type="submit"
                isLoading={props.isSubmitting}
                colorScheme="green"
              >
                Submit
              </Button>
            </Center>
          </Form>
        )}
      </Formik>
    </Container>
  );
};

const SingleQuiz = (props) => {
  const { auth, loading } = useAuth();

  const router = useRouter();

  useEffect(() => {
    if (!auth && !loading) {
      router.push(`/signin?next=/quiz/${props.quizId}`);
    }
  }, [auth, loading]);

  const quiz = JSON.parse(props.quiz);

  const onSubmit = async (values, actions) => {
    try {
      const resp = await addAnswerApi(auth, props.quizId, values);
      const answerId = resp.data.data.answerId;
      router.push(`/quiz/${props.quizId}/answer/${answerId}`);
    } catch (error) {
      console.log('error', error);
    } finally {
      actions.setSubmitting(false);
    }
  };

  return (
    <>
      <Navbar />
      {quiz && ShowQuiz(quiz, onSubmit)}
    </>
  );
};

export async function getServerSideProps(context: NextPageContext) {
  const quizId = context.query.id;
  const quizData = await getSingleQuiz(quizId);
  return { props: { quiz: quizData, quizId } };
}

export default SingleQuiz;

Inside src > utils > db.ts add the following code below the getAllUsers function:

export const getSingleQuiz = async (quizId) => {
  const snapshot = await firebase
    .firestore()
    .collection('quiz')
    .doc(String(quizId))
    .get();
  const quizData = snapshot.exists ? JSON.stringify(snapshot.data()) : null;
  return quizData;
};

Inside src > utils > service.ts add the following code below the addQuizApi function:

export const addAnswerApi = async (auth, quizId, values) => {
  try {
    const header = {
      'Content-Type': 'application/json',
      token: auth.token,
    };
    const resp = await axios.post(
      `/api/quiz/${quizId}/answer`,
      {
        questions: values,
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      { headers: header }
    );
    return resp;
  } catch (error) {
    throw error;
  }
};

Inside src > pages > api > quiz directory, create a new directory named [id].

How to set up the Validate Answer mechanism:

Inside this directory create a file named answer.ts and paste in the following code:

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '../../../../lib/firebase-admin';
import { addAnswer as addAnswerFb } from '../../../../utils/db';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  switch (req.method) {
    case 'POST':
      await addAnswer(req, res);
      break;
    default:
      res.status(405).json({ status: false, message: 'Method Not found' });
      break;
  }
};

const addAnswer = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const user = await auth.verifyIdToken(req.headers.token as string);
    const data = {
      ...req.body,
      quizId: req.query.id,
      userId: user.uid,
    };
    const response = await addAnswerFb(data);
    return res
      .status(200)
      .json({ status: true, data: { answerId: response.id } });
  } catch (error) {
    return res
      .status(500)
      .json({ status: false, message: 'Something went wrong' });
  }
};

Inside src > utils > db.ts add the following code below the getSingleQuiz function:

export const addAnswer = async (data) => {
  const response = await firebase.firestore().collection('answer').add(data);
  return response;
};

Go to http://localhost:3000, refresh the page, and click on the quiz. You'll get the following output:

Now you can answer the question and press submit. Right now it will go to a 404 page. We will need to create a page where we can show the correct answer.

Inside the src > pages > quiz > [id] directory, create a new directory called answer. Inside that directory create a new file called [answerId].tsx and paste in the following code:

import {
  Box,
  Center,
  Container,
  Divider,
  Heading,
  Radio,
  RadioGroup,
  SimpleGrid,
  Text,
} from '@chakra-ui/react';
import { NextPageContext } from 'next';
import React from 'react';
import Navbar from '../../../../common/Navbar';
import { getAnswer, getSingleQuiz } from '../../../../utils/db';

const answer = (props) => {
  const quiz = JSON.parse(props.quiz);
  const answer = JSON.parse(props.answer);

  return (
    <>
      <Navbar />
      {quiz && answer && (
        <Container maxW="3xl" mt={5}>
          <Center flexDirection="column">
            <Heading>Correct Answer for {quiz.title}</Heading>
            <Text mt={4}>{quiz.description}</Text>
          </Center>
          <Divider
            mt={4}
            mb={4}
            css={{
              boxShadow: '1px 1px #888888',
            }}
          />
          {quiz.questions.map((singleQuiz, index) => {
            return (
              <Box
                mt={index !== 0 && 4}
                key={index}
                borderWidth="1px"
                borderRadius="lg"
                p={6}
                boxShadow="xl"
                backgroundColor={
                  answer.questions[singleQuiz.questionId] &&
                  singleQuiz.options[singleQuiz.answer].optionId ===
                    answer.questions[singleQuiz.questionId]
                    ? 'green.200'
                    : 'red.200'
                }
              >
                <Text>
                  {index + 1}) {singleQuiz.title}
                </Text>
                <RadioGroup>
                  <SimpleGrid minChildWidth="120px" mt={2}>
                    {singleQuiz.options.map((option, index) => (
                      <Radio value={option.title} isDisabled key={index}>
                        {option.title}
                      </Radio>
                    ))}
                  </SimpleGrid>
                </RadioGroup>
                <Text mt={3}>
                  Correct Answer: {singleQuiz.options[singleQuiz.answer].title}
                </Text>
                {answer.questions[singleQuiz.questionId] ? (
                  <Text>
                    Selected Answer:{' '}
                    {
                      singleQuiz.options.find(
                        (option) =>
                          option.optionId ===
                          answer.questions[singleQuiz.questionId]
                      ).title
                    }
                  </Text>
                ) : (
                  <Text>Not Answered</Text>
                )}
              </Box>
            );
          })}
        </Container>
      )}
    </>
  );
};

export async function getServerSideProps(context: NextPageContext) {
  const quizId = context.query.id;
  const answerId = context.query.answerId;
  const quizData = await getSingleQuiz(quizId);
  const answerData = await getAnswer(answerId);
  return { props: { answer: answerData, quiz: quizData } };
}

export default answer;

Inside src > utils > db.ts add the following code below the addAnswer function:

export const getAnswer = async (answerId) => {
  const answerSnapshot = await firebase
    .firestore()
    .collection('answer')
    .doc(String(answerId))
    .get();
  let answerData = answerSnapshot.exists
    ? JSON.stringify(answerSnapshot.data())
    : null;
  return answerData;
};

Go to http://localhost:3000, refresh the page, click on the quiz and answer the question. You'll get the following output:

With this, we have completed our application and it's ready to be deployed on Vercel. In the next section, we will configure the deployment mechanism.

How to Deploy the App to Vercel and Firebase Authentication Configuration

There are two ways to configure an application on Vercel:

1. Using the Vercel npm library and pushing the code locally to a Vercel server

2. Connecting the Vercel bot to the GitHub repository.

I am going to use the second method.

You need to create a repository on GitHub and push the code over there.

If you haven't created an account on Vercel then you can go to https://vercel.com/ and click on the sign up button.

Once you've created your account you'll be directed to a dashboard that looks like this:

Click on the New Project button. It will ask you to install the Vercel bot and permissions.

Note: You can allow the Vercel bot to read all repositories from your GitHub account or give permission for the currently created repository.

Click the Import button on the GitHub repository created above:

Now you'll need to add environment variables. Add them from .env.local.

Once they are added click on the Deploy button. After the deployment is successful you'll get the following screen.

Note: the URL may be in this format -<username-or_something_random>.vercel.app.

Our Sign In won't work now. We have to add our new URL to the allowed URLs in the Firebase console.

Go to the Firebase console > Authentication and click on Sign-in-methods and scroll down. You'll see the Authorized domains table.

Click on the Add domain button, copy the newly generated URL, and click on add. Now open the deployed quiz application and test it.

Note: If you receive an error while adding a new quiz or answering the quiz, go to Vercel dashboard > Select the project > Select the settings tab > Select Environment Variables and update your FIREBASE_PRIVATE_KEY once again.

With this, we have created our production-ready quiz application. If you have built the app along with the tutorial, then a very big congratulations to you on this achievement.

Next Steps:

If you want to build more features into this app, here are few next steps you can consider:

1. Dashboard for users. (Show Profile Information, Update, and Delete. Show Quiz Added, Update and Delete. Show Quiz Answer.)

2. Firestore security rules modification.

3. Rich text markdown for Quiz questions and options.

Thank you for reading!

Feel free to connect with me on Twitter and Github.

If you want any project to be developed or want to consult with me, you can DM me on my Twitter (@sharvin26).

Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.

The curved arrow is something that I have always really liked and have wanted to replicate for a long time.

After a lot of trial and error, I was finally able to find a workaround to build a similar version of iMessage's chat bubble. In this article, I'll take you through the steps required to build a chat bubble that looks like Apple's iMessage.

If you're building a chat application or intending to display information in the form of a message, I'd definitely recommend that you try out this style as it makes your app look cool and professional.

Prerequisites

This article assumes that you know the basics of:

• JSX
• React Native
• HTML & CSS

What is a Chat Bubble?

A chat bubble is basically a container that holds text. Chat bubbles are mostly used in Instant Messaging apps to display chat logs effectively.

The conventional method is that sent messages are displayed on the right side of the screen and received messages are shown on the left, with different colors used to differentiate between sent and received message(s).

Most messaging apps have a basic chat bubble which is a regular container with rounded corners. The main differentiating factor between other apps and iMessage is the presence of a small curved-like arrow anchoring the text container, which looks like this:

How to Build a Chat Bubble that Looks like iMessage

If we look at the above image carefully, we can see that the iMessage chat bubble is a combination of a regular chat bubble with an added arrow in the corner.

The main challenge lies in tying the arrow to the text container.

Before directly hopping into the code, I'd want you to know how this arrow-like element is created and added.

First, check out this code, which shows how to implementation this arrow using HTML & CSS. Below is its code snippet.

p {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position: relative;
    padding: 10px 20px;
  border-radius: 25px;

  &:before, &:after {
    content: "";
        position: absolute;
    bottom: 0;
    height: 25px;
  }
}

.from-me {
    color: white; 
    background: #0B93F6;
    align-self: flex-end;

    &:before {
        right: -7px;
    width: 20px;
    background-color: #0B93F6;
        border-bottom-left-radius: 16px 14px;
    }

    &:after {
        right: -26px;
    width: 26px;
    background-color: white;
        border-bottom-left-radius: 10px;
    }
}
.from-them {
    background: #E5E5EA;
    color: black;
  align-self: flex-start;

    &:before {
        left: -7px;
    width: 20px;
    background-color: #E5E5EA;
        border-bottom-right-radius: 16px;
    }

    &:after {
        left: -26px;
    width: 26px;
    background-color: white;
        border-bottom-right-radius: 10px;
    }
}

If you just browse straight through the code it might seem quite awful. So let's break it down at an atomic level and later glue it all back together.

The <**p>** tag includes style constraints such as margin-bottom, position, padding and so on. Note that the max-width used here is 255px, which is a static value. But we'll be using a dynamic approach, as the chat bubbles need to be responsive across various screen sizes.

The &:before and &:after within the <p> style defines two elements with no content in it. They're positioned absolute with respect to the <p> tag (text container), and are placed at the bottom. They have a height of 25px (the height of the arrow).

Going further, the .from-me (sent messages) style defines that the text be white, background blue (#0b936f), and that it's placed at the right side of the screen (align-self: flex-end).

Now comes the important part – extending the &:before and &:after, which is the actual implementation of the arrow.

The &:before has a width of 20px and is placed at 7 pixels negative to the right. It has a border-bottom-left radius of 16px, which is what gives the curved look to the arrow.

Similarly, the &:after has a width of 26px and is placed at 26 pixels negative to the right. Since -7px > -26px, &:after is placed right side of the &:before element and partially overlaps it.

If you still feel confused, don't worry – just refer to the images below to gain a clearer insight into what I've been talking about.

&:before with black background and bottom-left-radius

&:after overlapping &:before with green background

&:after background changed to white to match the background of the chat screen.

&:before background updated to #0b93f6 to match chat bubble color.

So basically the arrowhead is created by overlapping two elements at the bottom corner of the chat bubble and adjusting the background colors to match those of the chat bubble and chat screen.

Further ahead, the translation of CSS and HTML into JSX is fairly simple, as most of the things are quite straightforward.

How to Build the React Native Version

Before starting, I want to note that this works best with FlatList, and I recommend that you use it, and not other components or functions such as map (which lacked consistency across different screens and devices).

The three steps we're going to follow here are:

1. Create chat bubble with arrow head
2. Add styles to chat bubble and arrow head
3. Embed chat bubble in FlatList

So let's get started.

First, we'll create the chat bubble with the arrow head, like this:

<View style={{
                    backgroundColor: "#0078fe",
                    padding:10,
                    marginLeft: '45%',
                    borderRadius: 5,
                    //marginBottom: 15,
                    marginTop: 5,
                    marginRight: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-end',
                    //maxWidth: 500,

                    borderRadius: 20,
                  }} key={index}>


                    <Text style={{ fontSize: 16, color: "#fff", }} key={index}>{item.text}</Text>

                      <View style={styles.rightArrow}></View>

                      <View style={styles.rightArrowOverlap}></View>



</View>


//Recevied Message
      <View style={{
                    backgroundColor: "#dedede",
                    padding:10,
                    borderRadius: 5,
                    marginTop: 5,
                    marginLeft: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-start',
                    //maxWidth: 500,
                    //padding: 14,

                    //alignItems:"center",
                    borderRadius: 20,
                  }} key={index}>



                      <Text style={{ fontSize: 16, color: "#000",justifyContent:"center" }} key={index}> {item.text}</Text>
                      <View style={styles.leftArrow}>

                      </View>
                      <View style={styles.leftArrowOverlap}></View>



                    </View>

The Outermost <View> tag acts as the 'p' tag in comparison with the HTML version. The remaining two <View> tags act as &:before and &:after.

Next, we'll add styles to the chat bubble and arrow head like this:

const styles = StyleSheet.create({
rightArrow: {
  position: "absolute",
  backgroundColor: "#0078fe",
  //backgroundColor:"red",
  width: 20,
  height: 25,
  bottom: 0,
  borderBottomLeftRadius: 25,
  right: -10
},

rightArrowOverlap: {
  position: "absolute",
  backgroundColor: "#eeeeee",
  //backgroundColor:"green",
  width: 20,
  height: 35,
  bottom: -6,
  borderBottomLeftRadius: 18,
  right: -20

},

/*Arrow head for recevied messages*/
leftArrow: {
    position: "absolute",
    backgroundColor: "#dedede",
    //backgroundColor:"red",
    width: 20,
    height: 25,
    bottom: 0,
    borderBottomRightRadius: 25,
    left: -10
},

leftArrowOverlap: {
    position: "absolute",
    backgroundColor: "#eeeeee",
    //backgroundColor:"green",
    width: 20,
    height: 35,
    bottom: -6,
    borderBottomRightRadius: 18,
    left: -20

},
})

Then we'll embed it into FlatList:

<FlatList
        //inverted
        style={{backgroundColor:"#eeeeee"}}
        data={this.state.chat_log}
        ref={ref => (this.FlatListRef = ref)} // assign the flatlist's ref to your component's FlatListRef...


        renderItem = {({item,index})=>{

          rowId={index}

            if (SENT_MESSAGE) { //change as per your code logic



                return (

                  <View style={{
                    backgroundColor: "#0078fe",
                    padding:10,
                    marginLeft: '45%',
                    borderRadius: 5,

                    marginTop: 5,
                    marginRight: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-end',
                    borderRadius: 20,
                  }} key={index}>


                    <Text style={{ fontSize: 16, color: "#fff", }} key={index}> {item.text}</Text>

                      <View style={styles.rightArrow}>

                      </View>
                      <View style={styles.rightArrowOverlap}></View>



                  </View>
                )




            } else {


                return (
                  <View style={{
                    backgroundColor: "#dedede",
                    padding:10,
                    borderRadius: 5,
                    marginTop: 5,
                    marginLeft: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-start',
                    //maxWidth: 500,
                    //padding: 14,

                    //alignItems:"center",
                    borderRadius: 20,
                  }} key={index}>



                      <Text style={{ fontSize: 16, color: "#000",justifyContent:"center" }} key={index}> {item.text}</Text>
                      <View style={styles.leftArrow}>

                      </View>
                      <View style={styles.leftArrowOverlap}></View>



                  </View>
                )


            }



        }

        keyExtractor={(item,index)=>index.toString()}
        />

Values such as borderRadius, padding, margin, and backgroundColor are arbitrary values and can be changed if you wish. So feel free to play around and make those changes to best fit your requirements.

The result of the above code looks like this:

Chat bubble appearance, as tested on several devices(Android).

Looks cool, doesn't it ? ;)

Conclusion

Congratulations! You've built a chat bubble that looks just like the one iMessage uses.

I hope you found this article helpful. If so, do share it with your friends and colleagues.

Still have questions? Don't hesitate to get in touch with me, and I'll respond to you as soon as possible.

You could also connect with me on LinkedIn / Instagram.

• We’ll learn how break down a UI into React components
• Learn how to work with state using the Context API
• Learn about actions, reducers, and the dispatch function

And I’ll give you some challenges which you can try at the end!

This is what we'll build:

The user can:

• Add expenses which have a name and a cost
• Remove expenses
• View how much of their budget is remaining
• View how much they've spent so far
• (Challenge) Edit budget
• (Challenge) Search expenses

Video Walkthrough

Heres a video walkthrough if you want to supplement your reading (on YouTube)

Source Code

Finally, in case you get lost while following along, you can grab the finished code here (on GitHub).

Let's Go!

How to Setup a React Project

The first thing we need to do is setup a React project. For this we'll use create-react-app.

Fire up a terminal and type:

npx create-react-app budget-tracker

When that's finished doing its thing we're going to install Bootstrap. This will give us ready-made styles we can use instead of having to create our own in CSS.

In the same terminal, change to your working directory, and install Bootstrap:

cd budget-tracker
npm i bootstrap

Next we're going to install a package that allows us to generate IDs. We'll be using IDs to identify each expense in the list, so this is important.

Run the following command in your project directory:

npm i uuid

The last package we need to install gives us some icons to use, which saves us from having to create them ourselves.

Run the following command in your project directory:

npm i react-icons

Now open up the project in VS Code (or whatever IDE you use). You should see some stuff appear in the project tree (this is our empty React project).

You can ignore most of this, as we'll be creating our own components. Open up App.js, delete everything, and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return <p>Hello React!</p>;
};

export default App;

What this does:

• Imports the bootstrap CSS into our project
• Creates a component that displays "Hello React!" with paragraph tags
• Exports this component so other components can use it

Next we'll fire up the app and make sure everything is working as it should. Open a terminal (either in VS Code or otherwise) and start the app by typing the following:

npm start

All being well, the app should start and open in a browser:

The text "Hello React" should appear on the page. This means your app is working!

Success! Now we're ready to start building out our React components.

How to Put the UI Components in Place

One approach to building apps is to start by putting the UI components in place with some dummy data. This usually helps with visualising what state objects are needed, and usually means less rework later on.

With that in mind we're going to put our UI components in place starting at the top and working down.

We'll add a title, then add a new component for each of the "boxes" shown. We'll add some dummy data just to get things displaying correctly

How to Create the Budget Component

Jump into the code, in the src folder, create a new folder called components. Within this, create a file called Budget.js. Your project structure should look like this:

Open up Budget.js and add the following:

import React from 'react';

const Budget = () => {
    return (
        <div className='alert alert-secondary'>
            <span>Budget: £2000</span>
        </div>
    );
};

export default Budget;

What we're doing:

• Creating a new component called Budget (line 3)
• Using the Bootstrap Alert classes to gives us a nice gray background (line 5)
• Adding some text and hard coding a value (line 6)

How to Create the Remaining Component

Next we'll create the Remaining component, which shows how much budget the user has left.

Create a new file under src/components called Remaining.js. Open it up and add the following:

import React from 'react';

const Remaining = () => {
    return (
        <div className='alert alert-success'>
            <span>Remaining: £1000</span>
        </div>
    );
};

export default Remaining;

What we're doing:

• Creating a new component called Remaining (line 3)
• Using the Bootstrap Alert classes to gives us a green background (line 5)
• Adding some text and hard coding a value (line 6)
• Adding Spent so Far

Lastly, we'll create the Spent so Far component, which shows how much the user has spent so far.

Create a new file under src/components called ExpenseTotal.js. Open it up and add the following:

import React from 'react';

const ExpenseTotal = () => {
    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £1000</span>
        </div>
    );
};

export default ExpenseTotal;

What we're doing:

• Creating a new component called ExpenseTotal (line 3)
• Using the Bootstrap Alert classes to gives us a blue background (line 5)
• Adding some text and hard coding a value (line 6)

How to Add a Title and Render our Components

At this point you might be thinking, "these components all look the same, what gives?!". This is true, although remember we're just adding some hard coded data for now. Later, each component will do different things to display the data dynamically.

Now we've created our components, we need to render them in App.js. Open App.js and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';

const App = () => {
    return (
            <div className='container'>
                <h1 className='mt-3'>My Budget Planner</h1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    </div>
                    <div className='col-sm'>
                        <Remaining />
                    </div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    </div>
                </div>
            </div>
    );
};

export default App;

What we're doing:

• Importing our different components (lines 3-5)
• Adding a bootstrap container that helps us center our App on the page (line 9)
• Adding a title (line 9)
• Adding a Bootstrap row (line 10)
• Adding a column within the row for each of our components so far (lines 12-20)

Now if you run the app, you should see the title, and our components rendered on the page!

How to Create the Expense List Component

The expenses list shows the expenses the user has added so far, displaying the Name, cost, and a delete button for each

Next we'll build the ExpenseList component. This component will be in charge of taking a list of expenses, and rendering an ExpenseItem component for each item.

We'll add some dummy data, to make sure our UI looks good and things are working as intended. Later, this stuff will come from context.

Start by creating a new file under src/components called ExpenseList.js. Open up ExpenseList.js and add the following:

import React from 'react'
import ExpenseItem from './ExpenseItem';

const ExpenseList = () => {
    const expenses = [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ];

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        </ul>
    )
}

export default ExpenseList

What we're doing:

• Adding a dummy list of expenses. For each expense we need an ID, a name, and a cost. Later, we'll take this list from context (line 4)
• Creating a list (line 11)
• Using the map function to iterate over the expenses and displaying an ExpenseItem component (we haven't created this yet! Line 12)
• Passing the ID, name, and cost to the ExpenseItem component as props

How to Create the Expense Item Component

Now we've created a component to hold our list, we need a component to render each item. Create a new file in the src/components folder called ExpenseItem.js. Open it up and add the following:

import React from 'react';
import { TiDelete } from 'react-icons/ti';

const ExpenseItem = (props) => {
    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                </span>
                <TiDelete size='1.5em'></TiDelete>
            </div>
        </li>
    );
};

export default ExpenseItem;

What we're doing:

• Creating a list item (line 6)
• Rendering the name of the expense, which we get from props (line 7)
• Rendering the cost of the expense, which we also get from props
• We're displaying a DeleteIcon (line 12) which we get from react-icons package (line 2)

How to Render the ExpenseList Component

Now we've created our components, we just have to render ExpenseList in App.js. Open up App.js and update it with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Planner</h1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                </div>
                <div className='col-sm'>
                    <Remaining />
                </div>
                <div className='col-sm'>
                    <ExpenseTotal />
                </div>
            </div>
            <h3 className='mt-3'>Expenses</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                </div>
            </div>
        </div>
    );
};

export default App;

What's new:

• We imported our ExpenseList (line 6)
• Added a new Bootstrap row (line 24)
• Rendered our ExpenseList (line 26)

Now if you save/run the App, you'll see the Expenses list has appeared!

How to create the "Add Expense" form component

Our UI components are nearly complete! The last component we need is the "Add Expense" form component, which lets users add new expenses. We'll put the UI components for the form in place first, then come back later and add the fancy stuff.

Create a new file in src/components called AddExpenseForm.js. Fire this up and add the following:

import React from 'react';

const AddExpenseForm = () => {

    return (
        <form>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                    ></input>
                </div>

            </div>
            <div className='row'>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Adding our form tags (line 6)
• Adding a label/input for our name field (line 9)
• Adding a label/input for our cost field (line 18)
• Adding a button to submit the form (line 30)

How to Render the AddExpenseForm component

Finally in App.js, we have to render our new component. Update App.js with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Planner</h1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                </div>
                <div className='col-sm'>
                    <Remaining />
                </div>
                <div className='col-sm'>
                    <ExpenseTotal />
                </div>
            </div>
            <h3 className='mt-3'>Expenses</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                </div>
            </div>
            <h3 className='mt-3'>Add Expense</h3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <AddExpenseForm />
                </div>
            </div>
        </div>
    );
};

export default App;

What's changed:

• Imported the AddExpenseForm (line 7)
• Rendered the AddExpenseForm (line 33)

How to Add the Context API

The Context API is what we'll use to store our global state. It's already part of the React library so no need to import/install anything else.

Start by creating a new folder in the src folder called context. Within this folder create a new file called AppContext.js.

How to Create the Initial State

The first thing our context needs to work is an initial state. This indicates the "shape" of our state (in other words, what properties and data we have) and can be used to initialise the app with data from an API call, for example.

For now we'll just add some initial values. In AppContext.js, add the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

• We're adding an initial budget
• We're adding a dummy list of expenses

NOTE: the intialState properties do not need to have values, they can be set to empty strings, empty arrays, and so on. We're adding data for visual purposes

How to Create the AppContext

Next we'll create the AppContext. This is the thing our components import and use to get the state.

Update AppContext.js with the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

All we've done is added a call to createContext at line (11) - thats our context object created!

How to Create the AppProvider

The provider is a component that wraps the components which we want to pass the state to. We use it in conjunction with the useReducer hook to actually store the global state.

Update the AppContext.js file like so:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        </AppContext.Provider>
    );
};

What we're doing:

• Creating our Provider component (line 12)
• Setting up the useReducer hook which will hold our state, and allow us to update the state via dispatch (NOTE we haven't created the AppReducer yet! Line 13)
• We're returning AppContext.Provider. This has a value prop which contains the data which we allow our components to see and have access to, as well as the dispatch function that lets us update the state by dispatching actions (line 16)

How to Create the AppReducer

Next we’ll create the AppReducer. The reducer is in charge of creating the new global state object, based on an action type and a payload.

Update AppContext.js with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        </AppContext.Provider>
    );
};

What we're doing:

• Creating a function which accepts the current state, and an action (line 1)
• We use a switch based on the action.type to decide how to update the state (line 2)
• For now since we’re just getting things set up we’re just going to return the default state, and add actions later as we need them (line 3)

And thats it! Our global state is now set up and ready to go.

How to Link AppContext to our App

The next step is to link our AppContext to our App component. We do this by wrapping the components which we want to pass the state to with the AppProvider.

Jump back into App.js and update the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';
import { AppProvider } from './context/AppContext';

const App = () => {
    return (
        <AppProvider>
            <div className='container'>
                <h1 className='mt-3'>My Budget Planner</h1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    </div>
                    <div className='col-sm'>
                        <Remaining />
                    </div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    </div>
                </div>
                <h3 className='mt-3'>Expenses</h3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <ExpenseList />
                    </div>
                </div>
                <h3 className='mt-3'>Add Expense</h3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <AddExpenseForm />
                    </div>
                </div>
            </div>
        </AppProvider>
    );
};

export default App;

What's changed:

• Imported our AppProvider (line 8)
• Nested our components in the AppProvider element (lines 12 / lines 39)

Now that our components are nested within the AppProvider, they have access to value object that the AppProvider exposes.

How to Connect our Components to AppContext

How to Render Budget from Context

Now we can start pulling global state values into our components. We'll start with the budget, so jump into Budget.js and add the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Budget = () => {
    const { budget } = useContext(AppContext);

    return (
        <div className='alert alert-secondary'>
            <span>Budget: £{budget}</span>
        </div>
    );
};

export default Budget;

What we're doing:

• We have to import AppContext from our Context (line 2)
• We import the useContext hook, and pass our AppContext to it - this is how a component connects to the context in order to get values from global state
• We use destructuring to get the budget from context (line 5)
• We're rendering the budget in our JSX (line 9)

Now if you change the budget in AppContext and reload your browser, you will see the budget updates on the UI. This means our component is successfully pulling data from our context. Success!

How to Render Expenses from Context

Now we can do something similar with the expense list. Open up ExpenseList.js and update it with the following:

import React, { useContext } from 'react';
import ExpenseItem from './ExpenseItem';
import { AppContext } from '../context/AppContext';

const ExpenseList = () => {
    const { expenses } = useContext(AppContext);

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        </ul>
    );
};

export default ExpenseList;

What we're doing:

• Importing our AppContext and useContext hook like before
• We've removed the dummy list of expenses
• We've replaced the dummy list with the expenses list we store in context

Since we've already done the work to render the list of expenses, we don't have to do anything else! Refresh the browser and you'll see the list now comes from context rather than the dummy list.

Remember we exported expenses as part of the value object in the provider. Any component wrapped in the provider can get access to this value object, and use destructuring to get the specific value it needs.

How to Add a New Expense - Capturing Form Values

So far we've looked at how to get values from state, next we'll look at how we can dispatch actions and update the state.

Before we do that, we need to know the name and the cost of the new expense that the user has entered. Jump into AddExpenseForm.js and add the following:

import React, { useState } from 'react';

const AddExpenseForm = () => {
    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {

    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Using React to control the input values. For each input field, we have a state object (lines 7 and 8)
• When the user types into the inputs, the corresponding state values will update (lines 25 and 36)
• When the user clicks the button, it will call an onSubmit function. This function doesn't do anything right now, but this is where we'll dispatch the action from

Now we have the form values stored in state, we can dispatch an action to update the state.

How to Add a New Expense - Dispatching an action

Update the AddExpenseForm with the following:

import React, { useContext, useState } from 'react';
import { AppContext } from '../context/AppContext';
import { v4 as uuidv4 } from 'uuid';

const AddExpenseForm = () => {
    const { dispatch } = useContext(AppContext);

    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {
        event.preventDefault();

        const expense = {
            id: uuidv4(),
            name: name,
            cost: parseInt(cost),
        };

        dispatch({
            type: 'ADD_EXPENSE',
            payload: expense,
        });
    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Name</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <label for='cost'>Cost</label>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    ></input>
                </div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    </button>
                </div>
            </div>
        </form>
    );
};

export default AddExpenseForm;

What we're doing:

• Importing AppContext and useContext as usual
• Getting dispatch from our global state (line 6)
• Creating an expense object, containing the name and the cost. This is what will get dispatched as the payload, and what we'll use to update the state. We're also using the uuid package we imported earlier to create an ID. This is used to identify a given expense (line 14).
• We're dispatching an action, with a type and our payload. The type tells the reducer how to update the state, which we'll see in a minute (line 20)

How to Add a New Expense - Updating the reducer

That's it from the component side. You'll notice if you run this in the browser, nothing happens. Thats because we haven't updated our reducer to handle the action and update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        default:
            return state;
    }
};

What we're doing:

• We're checking the type of the action (which we get from the action variable) (line 2)
• Adding a new case to the switch statement called "ADD_EXPENSE" (line 3)
• Returning a new state object with the new expense taking from the payload (which we get from the action variable) (line 4)

When we return something from a case statement, the reducer automatically updates the state and re-renders the components, almost like magic.

Now if you run the code, and add a new expense, you can see it gets added to the expense list!

How to Calculate spent so far

The next thing we'll look at is calculating how much the user has spent so far. To do this, we'll take a total of all the expenses the user has spent and display it on the UI.

Open up ExpenseTotal.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const ExpenseTotal = () => {
    const { expenses } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total += item.cost);
    }, 0);

    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £{totalExpenses}</span>
        </div>
    );
};

export default ExpenseTotal;

What we're doing:

• importing our useContext and AppContext as usual
• Taking the expenses from state (line 5)
• Using the reduce function to get a total of all the costs and assigning this to a variable (line 7)
• Displaying the variable in our JSX (line 13)

Now whenever the user adds an expense, this causes the state to update, which will cause all components connected to the context to re-render and update themselves with new values.

Go ahead and try this out in the browser.

How to Calculate Remaining

Now we'll look at calculating how much budget the user has left to spend.

To do this, we'll get the total costs of the expenses, and subtract it from the budget. If the user goes over budget, i.e the expenses are more than the budget, we want to display a red background (as opposed to a green background). Luckily Bootstrap gives us these nice things already.

Open up Remaining.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Remaining = () => {
    const { expenses, budget } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total = total + item.cost);
    }, 0);

    const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';

    return (
        <div className={`alert ${alertType}`}>
            <span>Remaining: £{budget - totalExpenses}</span>
        </div>
    );
};

export default Remaining;

What we're doing

• Importing expenses and budget from Context (line 5)
• Getting the total cost of the expenses using the reduce function (line 7)
• Creating a variable to store the CSS classname we want to display (depending on if the user has gone over the budget or not, line 11)
• Using a template string to create our classes (line 14)
• Rendering the remaining budget using a subtraction (line 15)

Now if you run the code in the browser, and add a bunch of expenses until the total goes over 2000, you'll see the "Remaining" component background turns to red!

How to Remove an Expense

The last thing we'll look at before getting into the challenges is to remove an expense.

When the user clicks the little cross beside an expense, we want to dispatch an action to remove it from state. When this happens, our ExpenseList will re-render with the removed expense.

Jump into ExpenseItem.js and update it with the following:

import React, { useContext } from 'react';
import { TiDelete } from 'react-icons/ti';
import { AppContext } from '../context/AppContext';

const ExpenseItem = (props) => {
    const { dispatch } = useContext(AppContext);

    const handleDeleteExpense = () => {
        dispatch({
            type: 'DELETE_EXPENSE',
            payload: props.id,
        });
    };

    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                </span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete>
            </div>
        </li>
    );
};

export default ExpenseItem;

What we're doing:

• Importing dispatch from Context, which allows us to dispatch a delete action (line 6)
• Creating a function that gets called when the delete icon is clicked (line 8)
• Dispatching an action. Our action contains the type (so the reducer knows how to update the state) and the payload. In this case we're passing the ID of this expense (which we get from props when we rendered the ExpenseList) (line 9)

If you try this in the browser, you'll see that nothing happens. Even though we're dispatching an action, we haven't implemented the reducer logic for this action type, so it doesn't know how to update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        case 'DELETE_EXPENSE':
            return {
                ...state,
                expenses: state.expenses.filter(
                    (expense) => expense.id !== action.payload
                ),
            };
        default:
            return state;
    }
};

All we're really doing here is adding a new case statement, to handle our DELETE_EXPENSE action. We're using the filter array method to remove the expense that has the ID which we received from the payload.

Now if you try this, you can remove an expense by clicking the delete icon. Notice how all the other components update as well. Nice!

Challenges to Try

Congrats on making it this far! Now its time for you to have a go at some challenges. Remember you can see how I've done it in the GitHub source code.

Allow the user to edit the budget

You'll notice that so far we have been using a hard coded value for the budget. Your first task is to add functionality that allows the user to edit the budget. Some tips to get started:

• You will need to add a text input that allows the user to enter a value for their desired budget.
• We store the budget in state, so you will need to dispatch an action with a new TYPE and a PAYLOAD that will update the state

Allow the user to search for an expense

If the user has many expenses, it will be difficult to find the one they are looking for. Add a way for the user to search for the expense by name. Some tips to get started:

• You will need to add an input field which lets the user enter a value to search for.
• You'll have to add something to the ExpenseList component that filters the list from context based on this search value.

Thanks for Reading!

By building this App, you will learn a lot of concepts in React and Node.js including:

• How to manage data for multiple forms with validation for each field
• How to retain values of forms data across routes
• How to update progress indications for each registration step
• How to load country-specific state and city from the API
• How to create smooth sliding animations using a very popular framer-motion library
• How to create Rest APIs using Express.js
• How to implement login and registration functionality with MongoDB
• How to store and validate passwords stored in encrypted form in MongoDB

And much more.

We will be using React Hooks syntax for building this application in React. So if you're new to React Hooks, check out my Introduction to React Hooks article to learn the basics of Hooks.

We will also be using a MongoDB database to store the registered user data, so make sure you install MongoDB locally by following instructions from this article.

Alright, let’s get started.

Initial Project Setup

Create a new project using create-react-app:

npx create-react-app multi-step-form-using-mern

Once you've created the project, delete all files from the src folder and create an index.js file and a styles.scss file inside the src folder. Also create components, router, and utils folders inside the src folder.

Install the necessary dependencies like this:

yarn add axios@0.21.1 bootstrap@4.6.0 react-bootstrap@1.5.0 country-state-city@2.0.0 framer-motion@3.7.0 node-sass@4.14.1 react-hook-form@6.15.4 react-router-dom@5.2.0 sweetalert2@10.15.5

Open your styles.scss file and add the contents from here inside it.

We'll use SCSS syntax to write CSS. So if you're new to SCSS, check out my article here for an introduction to it.

How to Create the Initial Pages

Create a new file Header.js inside the components folder with the following content:

import React from 'react';

const Header = () => (
  <div>
    <h1>Multi Step Registration</h1>
  </div>
);

export default Header;

Create a new file FirstStep.js inside the components folder with the following content:

import React from 'react';

const FirstStep = () => {
  return (
    <div>
      First Step Form
    </div>
  )
};

export default FirstStep;

Create a new file AppRouter.js inside the router folder with the following content:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import FirstStep from '../components/FirstStep';
import Header from '../components/Header';

const AppRouter = () => (
  <BrowserRouter>
    <div className="container">
      <Header />
      <Switch>
        <Route component={FirstStep} path="/" exact={true} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

In this file, initially, we have added a single route for the first step.

If you're new to React Router, check out my free Introduction to React Router course.

Now, open the src/index.js file and add the following content inside it:

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './router/AppRouter';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';

ReactDOM.render(<AppRouter />, document.getElementById('root'));

Start the application by running the yarn start command and you will see the following screen:

How to Add Progress Steps in the Header

Create a new file called Progress.js inside the components folder with the following content:

import React from 'react';

const Progress = () => {
  return (
    <React.Fragment>
      <div className="steps">
        <div className="step">
          <div>1</div>
          <div>Step 1</div>
        </div>
        <div className="step">
          <div>2</div>
          <div>Step 2</div>
        </div>
        <div className="step">
          <div>3</div>
          <div>Step 3</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Progress;

and use it inside the Header.js file as shown below:

import React from 'react';
import Progress from './Progress';

const Header = () => (
  <div>
    <h1>Multi Step Registration</h1>
    <Progress />
  </div>
);

export default Header;

Now, if you check the application, you will see the following screen:

How to Create the First Step Form

Open the components/FirstStep.js file and replace what's in there with the following contents:

import React from 'react';
import { useForm } from 'react-hook-form';
import { Form, Button } from 'react-bootstrap';

const FirstStep = (props) => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Form className="input-form" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-md-6 offset-md-3">
        <Form.Group controlId="first_name">
          <Form.Label>First Name</Form.Label>
          <Form.Control
            type="text"
            name="first_name"
            placeholder="Enter your first name"
            autoComplete="off"
            ref={register({
              required: 'First name is required.',
              pattern: {
                value: /^[a-zA-Z]+$/,
                message: 'First name should contain only characters.'
              }
            })}
            className={`${errors.first_name ? 'input-error' : ''}`}
          />
          {errors.first_name && (
            <p className="errorMsg">{errors.first_name.message}</p>
          )}
        </Form.Group>

        <Form.Group controlId="last_name">
          <Form.Label>Last Name</Form.Label>
          <Form.Control
            type="text"
            name="last_name"
            placeholder="Enter your last name"
            autoComplete="off"
            ref={register({
              required: 'Last name is required.',
              pattern: {
                value: /^[a-zA-Z]+$/,
                message: 'Last name should contain only characters.'
              }
            })}
            className={`${errors.last_name ? 'input-error' : ''}`}
          />
          {errors.last_name && (
            <p className="errorMsg">{errors.last_name.message}</p>
          )}
        </Form.Group>

        <Button variant="primary" type="submit">
          Next
        </Button>
      </div>
    </Form>
  );
};

export default FirstStep;

Here, we're using a very popular react-hook-form library to easily manage forms with validations.

React-hook-form makes it really easy to work with simple as well as complex forms, as we don't need to manage the state of each input field and its onChange handler ourselves. This makes the code cleaner and easier to understand.

Check out my article here to learn about react-hook-form in detail.

As you can see in the above code, to use the react-hook-form library we need to first import and use the useForm hook.

  const { register, handleSubmit, errors } = useForm();

Here,

• register is a function that we'll use as a ref provided by the useForm hook. We can assign it to each input field so that the react-hook-form can track the changes for the input field value
• handleSubmit is the function we can call when the form is submitted
• errors will contain the validation errors, if any

In the above code, we have given a ref to each input field that we got from the useForm hook like this:

ref={register({
  required: 'First name is required.',
  pattern: {
    value: /^[a-zA-Z]+$/,
    message: 'First name should contain only characters.'
  }
})}

Also, we added the onSubmit function which is passed to the handleSubmit function.

<Form className="input-form" onSubmit={handleSubmit(onSubmit)}>

Note that for each input field, we have given a unique name which is mandatory so react-hook-form can track the changing data.

When we submit the form, the handleSubmit function will handle the form submission. It will send the user entered data to the onSubmit function which we’re logging to the console.

const onSubmit = (data) => {  
 console.log(data);
};

If there are any errors, we'll display them like this:

{errors.first_name && (
  <p className="errorMsg">{errors.first_name.message}</p>
)}

The errors object will be automatically populated with the property name denoted by the name given to each input field (if there are any errors). first_name in the above case is the name given to the first input field.

Now, let's check the application's functionality:

As you can see, with very little code, we've added a responsive validation functionality to the form.

How to Create the Second Step Form

Now, create a new file SecondStep.js inside the components folder with the following content:

import React from 'react';
import { useForm } from 'react-hook-form';
import { Form, Button } from 'react-bootstrap';

const SecondStep = (props) => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Form className="input-form" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-md-6 offset-md-3">
        <Form.Group controlId="first_name">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            name="user_email"
            placeholder="Enter your email address"
            autoComplete="off"
            ref={register({
              required: 'Email is required.',
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: 'Email is not valid.'
              }
            })}
            className={`${errors.user_email ? 'input-error' : ''}`}
          />
          {errors.user_email && (
            <p className="errorMsg">{errors.user_email.message}</p>
          )}
        </Form.Group>

        <Form.Group controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="user_password"
            placeholder="Choose a password"
            autoComplete="off"
            ref={register({
              required: 'Password is required.',
              minLength: {
                value: 6,
                message: 'Password should have at-least 6 characters.'
              }
            })}
            className={`${errors.user_password ? 'input-error' : ''}`}
          />
          {errors.user_password && (
            <p className="errorMsg">{errors.user_password.message}</p>
          )}
        </Form.Group>

        <Button variant="primary" type="submit">
          Next
        </Button>
      </div>
    </Form>
  );
};

export default SecondStep;

Now, let's add another route in the AppRouter.js file for the SecondStep component.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import FirstStep from '../components/FirstStep';
import Header from '../components/Header';
import SecondStep from '../components/SecondStep';

const AppRouter = () => (
  <BrowserRouter>
    <div className="container">
      <Header />
      <Switch>
        <Route component={FirstStep} path="/" exact={true} />
        <Route component={SecondStep} path="/second" />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

Also, import the SecondStep component at the top of the file as shown above.

Now, we've added a route for the second step, let's check the application by accessing the URL http://localhost:3000/second.

As you can see, the functionality is working fine, but we're directly accessing the /second route. Instead, let's add the code to programmatically redirect from step 1 to step 2.

When we provide any component for the Route inside the BrowserRouter, React Router automatically passes 3 props to that component, which are:

• history
• location
• match

Out of these, the history object contains a push method that we can use to redirect from one component to another.

So open the FirstStep.js file and replace the onSubmit function with the following code:

const onSubmit = (data) => {
  console.log(data);
  props.history.push('/second');
};

Here, for the push method, we've provided the route to which we need to redirect.

As you can see, when we click on the Next button in the first step we're redirected to the second step.

Now, create a new file constants.js inside the utils folder with the following content:

export const BASE_API_URL = 'http://localhost:3030';

Here, we're specifying our backend API's URL so we don't need to specify it in every API call. We just need to use this constant when we need to make an API call.

Now, let's add another route in our AppRouter.js file for the ThirdStep component.

...
<Switch>
  <Route component={FirstStep} path="/" exact={true} />
  <Route component={SecondStep} path="/second" />
  <Route component={ThirdStep} path="/third" />
</Switch>
...

How to Get a List of All Countries from the API

Create a new file ThirdStep.js inside the components folder with the following content:

import React, { useState, useEffect } from 'react';
import { Form, Button } from 'react-bootstrap';
import csc from 'country-state-city';
import axios from 'axios';
import { BASE_API_URL } from '../utils/constants';

const ThirdStep = (props) => {
  const [countries, setCountries] = useState([]);
  const [states, setStates] = useState([]);
  const [cities, setCities] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedState, setSelectedState] = useState('');
  const [selectedCity, setSelectedCity] = useState('');

  useEffect(() => {
   const getCountries = async () => {
     try {
       const result = await csc.getAllCountries();
       console.log(result);
     } catch (error) {}
    };

    getCountries();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();
  };

  return (
    <Form className="input-form" onSubmit={handleSubmit}>
      <div className="col-md-6 offset-md-3"></div>
    </Form>
  );
};

export default ThirdStep;

In this file, we're using a country-state-city npm library to get a list of available countries, cities, and states like this:

import csc from 'country-state-city';

Then in the component, we've defined some states:

const [countries, setCountries] = useState([]);
const [states, setStates] = useState([]);
const [cities, setCities] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const [selectedCountry, setSelectedCountry] = useState('');
const [selectedState, setSelectedState] = useState('');
const [selectedCity, setSelectedCity] = useState('');

Here, countries, states and cities are declared in the state that will store the list of countries, states and cities, respectively, coming from the API.

We add another isLoading state to keep track of when the data is loading. selectedCountry, selectedState and selectedCity will contain the selected value when the user selects a particular dropdown value.

Then we've added a useEffect hook to make an API call to get the list of countries as shown below:

useEffect(() => {
  ...
  const result = await csc.getAllCountries();
  ...
}, []);

Here, we're calling the getAllCountries method of the country-state-city library to get a list of available countries.

Note that we've passed an empty array [] as the second argument to the useEffect hook so the hook will be called only once when the component is mounted.

Now, open the SecondStep.js file and replace the onSubmit function with the following code:

const onSubmit = (data) => {
  console.log(data);
  props.history.push('/third');
};

Using this code, we can easily navigate to the ThirdStep component.

Now, let's check the application.

As you can see, on the component load, we're getting a list of available countries in an array of objects.

Each object contains an isoCode and name property that we can use in our code to display it on the screen.

So change the useEffect hook to the below code:

useEffect(() => {
  const getCountries = async () => {
    try {
      setIsLoading(true);
      const result = await csc.getAllCountries();
      let allCountries = [];
      allCountries = result?.map(({ isoCode, name }) => ({
        isoCode,
        name
      }));
      const [{ isoCode: firstCountry } = {}] = allCountries;
      setCountries(allCountries);
      setSelectedCountry(firstCountry);
      setIsLoading(false);
    } catch (error) {
      setCountries([]);
      setIsLoading(false);
    }
  };

  getCountries();
}, []);

Here, we're first setting the isLoading flag to true to indicate that data is loading, which we will use soon.

Each object of the array contains many other properties like phonecode, flag, currency and so on, but we only want isoCode and name. So we're using the array map method to filter out only those properties, as shown below:

allCountries = result?.map(({ isoCode, name }) => ({
  isoCode,
  name
}));

Here, we're using the ES11 optional chaining operator which is denoted by the ?. The code after the ? will be executed only if the previous reference is not undefined or null. And as we're destructuring isoCode and name, we need the optional chaining operator.

The optional chaining operator is very useful in many scenarios. You can learn more about it in my Mastering Modern JavaScript book.

Now we have the following code:

const [{ isoCode: firstCountry } = {}] = allCountries;
setCountries(allCountries);
setSelectedCountry(firstCountry);
setIsLoading(false);

Let's understand what we're doing here.

Here, we've used object destructuring renaming with assignment syntax. We're destructuring the isoCode property from the first object of the allCountries array of objects and renaming the isoCode property to firstCountry just to identify that it's the first country from the list.

We're also assigning a default empty object so that if the allCountries array is empty we won't get an error.

In short, we are saying to take the isoCode property from the first object from the allCountries array of objects and rename it to firstCountry .

If the firstCountry property does not exist in the first object from the allCountries array, then assign a default value of empty object {} to the firstCountry variable.

Then we're updating the selectedCountry state value to the firstCountry value and isLoading state value to false using the below code:

setSelectedCountry(firstCountry);
setIsLoading(false);

Now, in the ThirdStep.js file, change the following code:

return (
  <Form className="input-form" onSubmit={handleSubmit}>
    <div className="col-md-6 offset-md-3"></div>
  </Form>
);

to this code:

return (
    <Form className="input-form" onSubmit={handleSubmit}>
      <div className="col-md-6 offset-md-3">
        <Form.Group controlId="country">
          {isLoading && (
            <p className="loading">Loading countries. Please wait...</p>
          )}
          <Form.Label>Country</Form.Label>
          <Form.Control
            as="select"
            name="country"
            value={selectedCountry}
            onChange={(event) => setSelectedCountry(event.target.value)}
          >
            {countries.map(({ isoCode, name }) => (
              <option value={isoCode} key={isoCode}>
                {name}
              </option>
            ))}
          </Form.Control>
        </Form.Group>
      </div>
    </Form>
  );

We can see the list of countries populated in the dropdown.

Now, if you navigate to step 3, you will see the following screen:

As you can see, the country dropdown is correctly populated with all countries. On change of the dropdown value, the selectedCountry state also changes to the country code (isoCode) as you can see in the React dev tools.

How to Get a List of States from the API

Now, let's add the code for getting a list of states based on the selected country.

Add the following code after the first useEffect hook in the ThirdStep.js file.

useEffect(() => {
    const getStates = async () => {
      try {
        const result = await csc.getStatesOfCountry(selectedCountry);
        let allStates = [];
        allStates = result?.map(({ isoCode, name }) => ({
          isoCode,
          name
        }));
        console.log({ allStates });
        const [{ isoCode: firstState = '' } = {}] = allStates;
        setCities([]);
        setSelectedCity('');
        setStates(allStates);
        setSelectedState(firstState);
      } catch (error) {
        setStates([]);
        setCities([]);
        setSelectedCity('');
      }
    };

    getStates();
  }, [selectedCountry]);

Here, we're calling the getStatesOfCountry method from the country-state-city library by passing the selectedCountry as the parameter. Then based on the result of the API, we're updating the respective states as shown below:

setCities([]);
setSelectedCity('');
setStates(allStates);
setSelectedState(firstState);

All the country, state and city dropdowns are inter-related. If we're changing the country, we should update the state also, which we're doing in the above code.

Also, note that we've passed the selectedCountry as a second parameter to the useEffect hook in the dependencies array:

useEffect(() => {
 ...
}, [selectedCountry]);

So this effect will only run when the selectedCountry state changes. This means that once we change the country dropdown, we're making an API call to get the states related to only that country and then populating the state's dropdown values.

Now, add the following code after the first Form.Group closing tag that's after the country dropdown:

<Form.Group controlId="state">
  <Form.Label>State</Form.Label>
  <Form.Control
    as="select"
    name="state"
    value={selectedState}
    onChange={(event) => setSelectedState(event.target.value)}
  >
    {states.length > 0 ? (
      states.map(({ isoCode, name }) => (
        <option value={isoCode} key={isoCode}>
          {name}
        </option>
      ))
    ) : (
      <option value="" key="">
        No state found
      </option>
    )}
  </Form.Control>
</Form.Group>

Here, we're displaying the state dropdown on the screen. If there are no states for the selected country, we show a No state found message because there are some countries that don't have any states.

Now, if you check the application, you will see the following screen:

As you can see above, when we change the country dropdown value, the state dropdown list is also updated based on the selected country.

How to Get a List of Cities from the API

Now, let's populate the cities based on the country and state values.

Add another useEffect hook after the second hook as shown below:

useEffect(() => {
  const getCities = async () => {
    try {
      const result = await csc.getCitiesOfState(
        selectedCountry,
        selectedState
      );
      let allCities = [];
      allCities = result?.map(({ name }) => ({
        name
      }));
      const [{ name: firstCity = '' } = {}] = allCities;
      setCities(allCities);
      setSelectedCity(firstCity);
    } catch (error) {
      setCities([]);
    }
  };

  getCities();
}, [selectedState]);

Here, we're calling the getCitiesOfState method from the country-state-city library by passing the selectedCountry and selectedState as parameters. Based on the result of the API, we update the cities dropdown.

Now, add the following code after the second Form.Group closing tag that's after the state dropdown:

<Form.Group controlId="city">
  <Form.Label>City</Form.Label>
  <Form.Control
    as="select"
    name="city"
    value={selectedCity}
    onChange={(event) => setSelectedCity(event.target.value)}
  >
    {cities.length > 0 ? (
      cities.map(({ name }) => (
        <option value={name} key={name}>
          {name}
        </option>
      ))
    ) : (
      <option value="">No cities found</option>
    )}
  </Form.Control>
</Form.Group>

Here, we're displaying the cities dropdown on the screen. If there are no cities for the selected state, we show a No cities found message because there are some states that don't have any cities.

Now, if you check the application, you will see the following screen:

As you can see above, on change of country and state, the corresponding list of cities is populated in the cities dropdown.

Also, add the Register button after the last Form.Group closing tag that's after the city dropdown:

<Button variant="primary" type="submit">
  Register
</Button>

Now, your screen will look like this:

We're done creating screens for all the steps. Now let's get the step progress in the header working so it's clear which step we're currently on.

How to Add a Progress Indicator in the Header

We're showing the Progress component inside the Header component, but the Progress component is not mentioned in any of the Routes in the AppRouter.js file. Also, Header isn't mentioned in the Route.

So by default, we don't have access to the history, location and match props in both the Header and Progress components to identify which route we're on.

But there is an easy way to fix this. React Router provides a withRouter component which we can use in the Progress component so we will get access to the history, location and match props.

Open the Progress.js file and add import the withRouter component at the top of the file:

import { withRouter } from 'react-router-dom';

and change the export statement from this code:

export default Progress;

to this code:

export default withRouter(Progress);

So when we pass the Progress component to the withRouter component we'll get access to the history, location and match props inside the Progress component.

Now, replace the Progress component with the following code:

const Progress = ({ location: { pathname } }) => {
  const isFirstStep = pathname === '/';
  const isSecondStep = pathname === '/second';
  const isThirdStep = pathname === '/third';

  return (
    <React.Fragment>
      <div className="steps">
        <div className={`${isFirstStep ? 'step active' : 'step'}`}>
          <div>1</div>
          <div>
            {isSecondStep || isThirdStep ? (
              <Link to="/">Step 1</Link>
            ) : (
              'Step 1'
            )}
          </div>
        </div>
        <div className={`${isSecondStep ? 'step active' : 'step'}`}>
          <div>2</div>
          <div>{isThirdStep ? <Link to="/second">Step 2</Link> : 'Step 2'}</div>
        </div>
        <div className={`${pathname === '/third' ? 'step active' : 'step'}`}>
          <div>3</div>
          <div>Step 3</div>
        </div>
      </div>
    </React.Fragment>
  );
};

Here, in the first line, we're destructuring the location property from the props object and then the pathname property from the location property in a single line like this:

const Progress = ({ location: { pathname } }) => {

And based on which route we're on, we're adding the active class to each step div.

Also, import the Link component at the top of the file:

import { Link, withRouter } from 'react-router-dom';

Now, if you check the application, you will see the following screen:

As you can see, when we're on a particular step, that step number is shown as active in the progress bar with highlighted text. Then, as we navigate through the steps, the text of the previous steps is shown as a link so we can navigate back to any step to change any data.

How to Retain Entered Data Across Routes

But you will notice that, when we go to step 1 by clicking the link from step 3, the data entered in step 1 is lost.

This is because when we go from one route to another route, React Router completely unmounts the previous route component and mounts the next route component connected to that route. This causes all state values to be lost.

So let's add a way to preserve the data that's been entered when navigating to the previous step.

As you know, only the components connected to the routes mentioned in the AppRouter.js file are mounted and unmounted on the route change. But the AppRouter component in our case is not unmounted even when the routes change.

This means that the best place to store the data entered by the user is in the AppRouter component.

Let's add the user state, updateUser, and resetUser functions inside the AppRouter.js file.

const [user, setUser] = useState({});

const updateUser = (data) => {
  setUser((prevUser) => ({ ...prevUser, ...data }));
};

const resetUser = () => {
  setUser({});
};

So we will store the user-entered data in each step in the user state that's an object.

In the updateUser function, we're passing data to update the user state. In the updateUser function, we're first spreading out the user object values using the prevUser variable and then spreading out the data object so the resulting object will be the merging of two objects.

To update the state, we use the updater syntax of state with implicit return syntax for the object.

So this code:

setUser((prevUser) => ({ ...prevUser, ...data }));

is the same as the below code:

setUser((prevUser) => {
  return {
    ...prevUser,
    ...data
  };
});

As you can see above, if we want to implicitly return an object from an arrow function, we can skip the return keyword and enclose the object in round brackets.

This will make the code shorter and will also help you avoid typing mistakes in your code. Because of this, you will find that most React code is written using implicit return syntax.

So if we're in step 1 then we will pass the {first_name: 'Mike', last_name: 'Jordan' } as data and add it to the user state.

Then in step 2, if we pass {user_email: 'test@example.com', user_password: 'test@123'} as the data, then the updateUser function will update the user as shown below:

const prevUser = { first_name: 'Mike', last_name: 'Jordan' };
const data = { user_email: 'test@example.com', user_password: 'test@123' };

const result = { ...prevUser, ...data };
console.log(result); // { first_name: 'Mike', last_name: 'Jordan', user_email: 'test@example.com', user_password: 'test@123' }

Now, we have created the user state and updateUser function. So we need to pass it to each route that is connected to the step so we can save the user-entered data by calling the updateUser function.

Our current routes in the AppRouter.js file look like this:

<Switch>
  <Route component={FirstStep} path="/" exact={true} />
  <Route component={SecondStep} path="/second" />
  <Route component={ThirdStep} path="/third" />
</Switch>

So to pass the user and updateUser as props to the components connected to the route, we can't pass it like this:

<Route component={FirstStep} path="/" exact={true} user={user} updateUser={updateUser} />

Because this way props will be passed to the Route and not to the FirstStep component. So we need to use the following syntax:

<Route
  render={(props) => (
    <FirstStep {...props} user={user} updateUser={updateUser} />
  )}
  path="/"
  exact={true}
/>

Here, we're using the render props pattern for passing props. This will correctly pass the props and will also not re-create the FirstStep component on every re-render.

You can check out my Introduction to React Router course to learn more about why we need to use render instead of the component prop.

Now, after making this change for all the step-related routes, your routes will look like this:

<BrowserRouter>
  <div className="container">
    <Header />
    <Switch>
      <Route
        render={(props) => (
          <FirstStep {...props} user={user} updateUser={updateUser} />
        )}
        path="/"
        exact={true}
      />
      <Route
        render={(props) => (
          <SecondStep {...props} user={user} updateUser={updateUser} />
        )}
        path="/second"
      />
      <Route
        render={(props) => (
          <ThirdStep {...props} user={user}  />
        )}
        path="/third"
      />
    </Switch>
  </div>
</BrowserRouter>

Note that we're not passing the updateUser prop to the ThirdStep component route, because when we submit the form from step 3, we will be saving all the data directly into the database.

If you want you can pass the updateUser function to the ThirdStep component and save it to the state by calling the updateUser function (but it's not necessary).

Now, let's use the updateUser function inside these components to save the data.

So open the FirstStep.js and SecondStep.js files and inside the onSubmit handler function, and add props.updateUser(data) as the first statement.

// FirstStep.js
const onSubmit = (data) => {
  props.updateUser(data);
  props.history.push('/second');
};

// SecondStep.js
const onSubmit = (data) => {
  props.updateUser(data);
  props.history.push('/third');
};

Now, if you check the application, you will see the following screen:

As you can see, initially the AppRouter component state is an empty object. But when we submit the form in each step, the state object gets updated with the user-entered data.

Now, let's use that data saved in the state and populate it in the respective input fields when we come back to the previous step from the next step.

As you know, we're using react-hook-form to manage the changing data of our forms in the FirstStep and SecondStep component using the useForm hook.

But the useForm hook also takes an optional parameter which we can use to persist the values across route changes.

So change the below code from the FirstStep.js file:

const { register, handleSubmit, errors } = useForm();

to this code:

const { user } = props;
const { register, handleSubmit, errors } = useForm({
  defaultValues: {
    first_name: user.first_name,
    last_name: user.last_name
  }
});

Here, we're destructuring the user prop from the props object which we're passing in the route of the AppRouter.js file. Then we're using the defaultValues property to set the value for each input field.

Just to remind you, first_name and last_name are the names given to the input fields in FirstStep component which react-hook-form uses to track changing data.

Now, if you check the application, you will see the following screen:

As you can see, when we come back from step 2 to step 1, the data entered in step 1 is not lost. This is because we're re-setting it with the data from the user state when the component is mounted again on route change.

Now, let's add some similar code in the SecondStep.js file also:

const { user } = props;
const { register, handleSubmit, errors } = useForm({
  defaultValues: {
    user_email: user.user_email,
    user_password: user.user_password
  }
});

If you check the application, you will see the following screen:

As you can see, when we come back from step 3 to step 2 or step 1, the data entered in step 1 and step 2 is not lost. So we have successfully preserved the data across steps.

How to Add Animated Transitions to the App

Now, let's add a smooth sliding animation functionality to the app.

To add animation, we're using the very popular framer motion library.

Framer motion makes it easy to add animation using a declarative approach in the same way that React does things.

So let's add animation in the FirstStep component.

Open the FirstStep.js file and add the import statement for the framer motion library at the top of the file:

import { motion } from 'framer-motion';

To animate any element on the page, we need to prefix it with motion like this:

<div>Click here to animate it</div>

// the above code will need to be converted to

<motion.div>Click here to animate it</motion.div>

Using motion as a prefix will return a React component that has specific animating capabilities added so that we can pass props to that element.

So inside the FirstStep.js file, after adding the motion prefix to the following div:

<div className="col-md-6 offset-md-3">
...
</div>

it will look like this:

<motion.div className="col-md-6 offset-md-3">
...
</motion.div>

Once we add a motion prefix to it, we can provide extra props to that element like this:

<motion.div
  className="col-md-6 offset-md-3"
  initial={{ x: '-100vw' }}
  animate={{ x: 0 }}
>
...
</motion.div>

Here, we've provided an initial prop to specify the location from where the animation will begin. We want the entire form to be slid in from the left side so we provided the x value as -100vw. This means 100% viewport width from the left side. So the initial position of the form will be far left but not visible on the screen.

Then we provided the animate prop with an x value of 0 so the form will slide in from left and will come back to its original position on the page. If we provide a value of 10 for x then it will move to 10px on the right side from its original position.

Now, your entire JSX code in the FirstStep.js file will look like this:

return (
  <Form className="input-form" onSubmit={handleSubmit(onSubmit)}>
    <motion.div
      className="col-md-6 offset-md-3"
      initial={{ x: '-100vw' }}
      animate={{ x: 0 }}
    >
      <Form.Group controlId="first_name">
        <Form.Label>First Name</Form.Label>
        <Form.Control
          type="text"
          name="first_name"
          placeholder="Enter your first name"
          autoComplete="off"
          ref={register({
            required: 'First name is required.',
            pattern: {
              value: /^[a-zA-Z]+$/,
              message: 'First name should contain only characters.'
            }
          })}
          className={`${errors.first_name ? 'input-error' : ''}`}
        />
        {errors.first_name && (
          <p className="errorMsg">{errors.first_name.message}</p>
        )}
      </Form.Group>

      <Form.Group controlId="last_name">
        <Form.Label>Last Name</Form.Label>
        <Form.Control
          type="text"
          name="last_name"
          placeholder="Enter your last name"
          autoComplete="off"
          ref={register({
            required: 'Last name is required.',
            pattern: {
              value: /^[a-zA-Z]+$/,
              message: 'Last name should contain only characters.'
            }
          })}
          className={`${errors.last_name ? 'input-error' : ''}`}
        />
        {errors.last_name && (
          <p className="errorMsg">{errors.last_name.message}</p>
        )}
      </Form.Group>

      <Button variant="primary" type="submit">
        Next
      </Button>
    </motion.div>
  </Form>
);

Now, if you check the application, you will see the sliding animation on page load:

As you can see, the form slides in from the left side of the page but it does not yet look very smooth.

To make it a smooth animation, we can provide another transition prop in addition to the initial and animate props.

<motion.div
  className="col-md-6 offset-md-3"
  initial={{ x: '-100vw' }}
  animate={{ x: 0 }}
  transition={{ stiffness: 150 }}
>
...
</motion.div>

Here, we've added a transition prop with value of 150 for stiffness. You can try changing the value from 150 to something else and check which one looks best to you. I will use 150 here.

Now, if you check the application, you will see a smooth sliding animation on page load:

Let's make the same animation changes in the SecondStep.js and ThirdStep.js files:

import { motion } from 'framer-motion';
...
<motion.div
  className="col-md-6 offset-md-3"
  initial={{ x: '-100vw' }}
  animate={{ x: 0 }}
  transition={{ stiffness: 150 }}
>
...
</motion.div>

Now if you check the application, you will see a smooth sliding animation on page load for all 3 steps:

How to Setup the Backend with Node.js

We're done with all the basic functionality for the front-end. Now let's setup the backend server code so we can save the data entered in the form to MongoDB.

Create a new folder with the name server outside the src folder. Then create models and routers folders inside the server folder.

Now, execute the following command from the server folder from the terminal:

yarn init -y

This will create a package.json file inside the server folder so we can manage the dependencies.

Now, install the required dependencies by executing the following command from the server folder from terminal:

yarn add bcryptjs@2.4.3 cors@2.8.5 express@4.17.1 mongoose@5.11.18 nodemon@2.0.7

Next, create a new file with the name .gitignore inside the server folder and add the following line inside it so the node_modules folder will not be pushed to GitHub (if you decide to push your code to GitHub):

node_modules

Create a new file db.js inside the server folder with the following content:

const mongoose = require('mongoose');

mongoose.connect('mongodb://127.0.0.1:27017/form-user', {
  useNewUrlParser: true,
  useCreateIndex: true,
  useUnifiedTopology: true
});

Here, we're using the mongoose library to work with MongoDB. For the mongoose.connect method, we've provided a connection string with the form-user database as the name of the database.

You can give whatever name you want instead of form-user.

Now, create a new file with the name index.js inside the server folder and add the following contents inside it:

const express = require('express');
require('./db');

const app = express();
const PORT = process.env.PORT || 3030;

app.get('/', (req, res) => {
  res.send('<h2>This is from index.js file</h2>');
});

app.listen(PORT, () => {
  console.log(`server started on port ${PORT}`);
});

Now, open the server/package.json file and add the scripts section inside it:

"scripts": {
  "start": "nodemon index.js"
},

Here we're using the nodemon npm package that will restart the Express server if we make any changes in index.js or the files included in the index.js file. This way we don't have to manually restart the server on every change.

So your entire package.json file will look like this:

{
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "nodemon index.js"
  },
  "dependencies": {
    "bcryptjs": "2.4.3",
    "cors": "2.8.5",
    "express": "4.17.1",
    "mongoose": "5.11.18",
    "nodemon": "2.0.7"
  }
}

Now, open another terminal and execute the yarn start command from inside the server folder.

If you access http://localhost:3030/, you will see the following screen:

This shows that our Express server is correctly set up. Let's write Rest APIs to store the user registration data.

Create a new file called user.js inside the server/models folder with the following content:

const mongoose = require('mongoose');

const userSchema = mongoose.Schema(
  {
    first_name: {
      type: String,
      required: true,
      trim: true
    },
    last_name: {
      type: String,
      required: true,
      trim: true
    },
    user_email: {
      type: String,
      required: true,
      trim: true,
      validate(value) {
        if (!value.match(/^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/)) {
          throw new Error('Email is not valid.');
        }
      }
    },
    user_password: {
      type: String,
      required: true,
      trim: true,
      minlength: 6
    },
    country: {
      type: String,
      required: true,
      trim: true
    },
    state: {
      type: String,
      trim: true
    },
    city: {
      type: String,
      trim: true
    }
  },
  {
    timestamps: true
  }
);

const User = mongoose.model('User', userSchema);

module.exports = User;

Here, we've created a User schema to define the structure of the data stored in the User collection.

If you have never worked with the mongoose library then check out this article for an introduction.

How to Create the REST APIs

Create a new file called user.js inside the routers folder with the following content:

const express = require('express');
const User = require('../models/user');
const bcrypt = require('bcryptjs');
const router = express.Router();

router.post('/register', async (req, res) => {
 const { user_email, user_password } = req.body;

 console.log('req.body', req.body);

 let user = await User.findOne({ user_email });
 if (user) {
   return res.status(400).send('User with the provided email already exist.');
 }

 try {
   user = new User(req.body);
   user.user_password = await bcrypt.hash(user_password, 8);

   await user.save();
   res.status(201).send();
 } catch (e) {
   res.status(500).send('Something went wrong. Try again later.');
 }
});

module.exports = router;

Here, we've created a post API for the /register route. We will be passing the data to this API in JSON format. The Express server makes it available inside the req.body object so we're destructuring the email and password value from it:

const { user_email, user_password } = req.body;

Then using the findOne method of the User model, we're first checking if there is any user with the provided email address.

let user = await User.findOne({ user_email });

If such a user exists, then we're returning an error back to the client (which is our React app).

return res.status(400).send('User with the provided email already exist.');

It's always good to specify the HTTP response code of the error while sending back the response.

You can find all HTTP status codes and their meanings on this website.

Then we pass all the user data (like first_name, last_name, user_email, users_password, country, state and city) which is present in the req.body to the User constructor .

But we don't want to store the user-entered data into the database as it is. So we'll use the popular bcryptjs npm library to hash the password before saving it to the database.

user.user_password = await bcrypt.hash(user_password, 8);

Check out my article here to learn about bcryptjs in detail.

And once the password is hashed, we call the save method of the User model to save all the details along with hashed password into the MongoDB database.

await user.save();

Once we're done, we're sending back the response with the status code of 201 which describes that something has been created.

res.status(201).send();

Note that here we're not sending back any data – just a response saying that the request was successful and a new record was created.

Then at the end, we're exporting the express router so we can use it in the index.js file.

Now, open the server/index.js file and import the user router at the top of the file:

const userRouter = require('./routers/user');

As we're sending the data to register from React app to Node.js server in JSON format, we need to add the following code for the middleware:

app.use(express.json());

Also, after the PORT constant, add the following line of code:

app.use(userRouter);

So your entire server/index.js file will look like this:

const express = require('express');
const userRouter = require('./routers/user');
require('./db');

const app = express();
const PORT = process.env.PORT || 3030;

app.use(express.json());
app.use(userRouter);

app.get('/', (req, res) => {
  res.send('<h2>This is from index.js file</h2>');
});

app.listen(PORT, () => {
  console.log(`server started on port ${PORT}`);
});

Here, we've provided userRouter as a middleware for the Express app so that we can make API requests to it.

It's always good to separate out each router in its own file and include it using the app.use method. This avoids making the code larger by writing it in a single file.

Now, start your local MongoDB database server by running ./mongod --dbpath=<path_to_mongodb-data_folder> as explained in this article and keep it running.

And then restart the Express server by running yarn start from the server folder and keep it running.

Open another terminal and start the react app by running yarn start if you haven't already done it.

So now you will two separate terminals open – one for running the Express server app and another one running the React app as shown below:

Here, we're opening terminals inside VSCode. You can open the first terminal by going to the Terminal -> New Terminal menu in VS Code. Then just click the + icon to open additional terminals.

How to Call REST APIs from a React App

Now, let's make the code changes in our React app to make the API call to our /register API.

Open the ThirdStep.js file and replace the handleSubmit method with the following code:

const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const { user } = props;
      const updatedData = {
        country: countries.find(
          (country) => country.isoCode === selectedCountry
        )?.name,
        state:
          states.find((state) => state.isoCode === selectedState)?.name || '',
        city: selectedCity
      };

      await axios.post(`${BASE_API_URL}/register`, {
        ...user,
        ...updatedData
      });
    } catch (error) {
      if (error.response) {
        console.log('error', error.response.data);
      }
    }
  };

Here, once we submit the form in step 2, we call the handleSubmit method where we make an API call to our /register API:

await axios.post(`${BASE_API_URL}/register`, {
  ...user,
  ...updatedData
});

Here, we're passing the data to the /register API in the JSON format.

We store the country code in selectedCountry and the state code in selectedState state variables. These are denoted by isoCode, and we first use the array find method to find out the actual names related to that country and state code as shown below:

const updatedData = {
  country: countries.find(
    (country) => country.isoCode === selectedCountry
  )?.name,
  state:
    states.find((state) => state.isoCode === selectedState)?.name || '',
  city: selectedCity
};

Inside the selectedCity state variable we store the name so we don't need to use the filter method there.

If you want a quick refresher on the most widely used array methods (including array find method) check out my article here.

While using the find method for state, we've added the || condition. This is because if there is no available state for any selected country, then while accessing ?.name, it might come as undefined. To avoid storing undefined in the database, we use the || operator to store an empty string '' instead or undefined.

How to Test REST APIs

Now, let's check the application's functionality.

As you can see, when we try to submit the form in the step 3, we're getting a CORS (Cross-Origin Resource Sharing) error in the browser console.

This is because the browser does not allow us to access the data of an application running on another port – because we're running our React application on port 3000 and our Node.js application on port 3030.

This is for security reasons and violates cross-domain policies.

To fix this, we need to install the cors npm package and use it in our server/index.js file so that the Node.js server will allow any application to access its APIs.

Don’t worry, we will see how we can use the Node.js APIs without using cors later in this article. We'll also avoid needing to run two separate terminals to start our React and Node.js server.

For now, open the server/index.js file and add the import for cors as shown below:

const cors = require('cors');

Note that we've already installed the cors npm package while creating the Express server earlier.

And add it as an Express middleware before the app.use(userRouter) statement like this:

app.use(express.json());
app.use(cors());
app.use(userRouter);

Now your index.js file will look like this:

const express = require('express');
const cors = require('cors');
const userRouter = require('./routers/user');
require('./db');

const app = express();
const PORT = process.env.PORT || 3030;

app.use(express.json());
app.use(cors());
app.use(userRouter);

app.get('/', (req, res) => {
  res.send('<h2>This is from index.js file</h2>');
});

app.listen(PORT, () => {
  console.log(`server started on port ${PORT}`);
});

If you submit the form, you will see that the data has been correctly logged into the console:

And the data also gets saved into the database as shown below:

So now, we've successfully connected our front-end React app to the back-end Node.js app and saved the data to the database.

How to Show the Registration Feedback Popup

You might have noticed that we're not showing any indication that the data has been successfully saved to the database once we register the user. So let's do that now.

To show the success message, we'll use sweetalert2 which is a popular and customizable popup modal library.

Import it in the ThirdStep.js file as shown below:

import Swal from 'sweetalert2';

Inside the handleSubmit function, after the axios.post call, add the following code in the try block:

Swal.fire('Awesome!', "You're successfully registered!", 'success').then(
(result) => {
  if (result.isConfirmed || result.isDismissed) {
    props.history.push('/');
  }
}
);

and in the catch block add the following code:

if (error.response) {
  Swal.fire({
    icon: 'error',
    title: 'Oops...',
    text: error.response.data
  });
}

So your handleSubmit function will look like this now:

const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const { user } = props;
      const updatedData = {
        country: countries.find(
          (country) => country.isoCode === selectedCountry
        )?.name,
        state:
          states.find((state) => state.isoCode === selectedState)?.name || '', // or condition added because selectedState might come as undefined
        city: selectedCity
      };

      await axios.post(`${BASE_API_URL}/register`, {
        ...user,
        ...updatedData
      });
      Swal.fire('Awesome!', "You're successfully registered!", 'success').then(
        (result) => {
          if (result.isConfirmed || result.isDismissed) {
            props.history.push('/');
          }
        }
      );
    } catch (error) {
      if (error.response) {
        Swal.fire({
          icon: 'error',
          title: 'Oops...',
          text: error.response.data
        });
        console.log('error', error.response.data);
      }
    }
  };

If you check the application, you will see the following screen:

As you can see, if the user with the email address already exists in the database then we show an error message from the catch block.

And if the user email does not exist in the database, then we see the success popup as you can see below:

If you check the code of the popup for success, it looks like this:

Swal.fire('Awesome!', "You're successfully registered!", 'success').then(
  (result) => {
    if (result.isConfirmed || result.isDismissed) {
      props.history.push('/');
    }
  }
);

So if the user clicks on the OK button or clicks outside the popup modal, we redirect the user to step 1 using props.history.push('/');. But we also should clear the user-entered data from the input fields once the registration is successful. Let's do that now.

If you remember, we added a resetUser function inside the AppRouter component to clear the user state data.

Let's pass this function as a prop to the ThirdStep component. So your ThirdStep route will look like this:

<Route
  render={(props) => (
    <ThirdStep
      {...props}
      user={user}
      updateUser={updateUser}
      resetUser={resetUser}
    />
  )}
  path="/third"
/>

And inside the handleSubmit function of the ThirdStep.js file, before calling props.history.push('/'); call the resetUser function like this:

Swal.fire('Awesome!', "You're successfully registered!", 'success').then(
  (result) => {
    if (result.isConfirmed || result.isDismissed) {
      props.resetUser();
      props.history.push('/');
    }
  }
);

Now, if you register a new user, you will see that after registration, you will be redirected to step 1 and all the input fields will also be cleared.

How to Add Login Functionality to the App

We have added the entire registration functionality for the front-end and back-end. Let's add login functionality so we can check if a user with a provided email and password already exists and then retrieve the details of that user.

Open the routers/user.js file and add the following code inside it before the module.exports statement:

router.post('/login', async (req, res) => {
  try {
    const user = await User.findOne({ user_email: req.body.user_email });
    if (!user) {
      return res.status(400).send('User with provided email does not exist.');
    }

    const isMatch = await bcrypt.compare(
      req.body.user_password,
      user.user_password
    );

    if (!isMatch) {
      return res.status(400).send('Invalid credentials.');
    }
    const { user_password, ...rest } = user.toObject();

    return res.send(rest);
  } catch (error) {
    return res.status(500).send('Something went wrong. Try again later.');
  }
});

Here, we're first checking to see if the user with the provided email already exists using the findOne method. If no such user exists, then we return an error with a status code of 400.

If there is a user with the provided email address then we use the bcrypt.compare method to compare the original non-hashed password with the hashed password. If the hashed password does not match with the password from the user object, then we return an error saying Invalid credentials.

But if the password matches, then we create a new rest object with all the user properties except the hashed password using the ES9 rest operator for objects:

const { user_password, ...rest } = user.toObject();

This is because we don't want to return back the hashed password for security reasons.

Then we will send back the rest object with the password removed back to the client (our React app).

Now that we've created the back-end API, let's integrate the front-end part for our login functionality.

Create a new file called Login.js inside the components folder with the following code:

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Form, Button } from 'react-bootstrap';
import axios from 'axios';
import { BASE_API_URL } from '../utils/constants';

const Login = () => {
  const { register, handleSubmit, errors } = useForm();
  const [successMessage, setSuccessMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [userDetails, setUserDetails] = useState('');

  const onSubmit = async (data) => {
    console.log(data);

    try {
      const response = await axios.post(`${BASE_API_URL}/login`, data);
      setSuccessMessage('User with the provided credentials found.');
      setErrorMessage('');
      setUserDetails(response.data);
    } catch (error) {
      console.log(error);
      if (error.response) {
        console.log('error', error.response.data);
        setErrorMessage(error.response.data);
      }
    }
  };

  return (
    <Form className="input-form" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-md-6 offset-md-3">
        {errorMessage ? (
          <p className="errorMsg login-error">{errorMessage}</p>
        ) : (
          <div>
            <p className="successMsg">{successMessage}</p>

            {userDetails && (
              <div className="user-details">
                <p>Following are the user details:</p>
                <div>First name: {userDetails.first_name}</div>
                <div>Last name: {userDetails.last_name}</div>
                <div>Email: {userDetails.user_email}</div>
                <div>Country: {userDetails.country}</div>
                <div>State: {userDetails.state}</div>
                <div>City: {userDetails.city}</div>
              </div>
            )}
          </div>
        )}
        <Form.Group controlId="first_name">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            name="user_email"
            placeholder="Enter your email address"
            ref={register({
              required: 'Email is required.',
              pattern: {
                value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                message: 'Email is not valid.'
              }
            })}
            className={`${errors.user_email ? 'input-error' : ''}`}
          />
          {errors.user_email && (
            <p className="errorMsg">{errors.user_email.message}</p>
          )}
        </Form.Group>

        <Form.Group controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="user_password"
            placeholder="Choose a password"
            ref={register({
              required: 'Password is required.',
              minLength: {
                value: 6,
                message: 'Password should have at-least 6 characters.'
              }
            })}
            className={`${errors.user_password ? 'input-error' : ''}`}
          />
          {errors.user_password && (
            <p className="errorMsg">{errors.user_password.message}</p>
          )}
        </Form.Group>

        <Button variant="primary" type="submit">
          Check Login
        </Button>
      </div>
    </Form>
  );
};

export default Login;