Responsive Multi-step form using React and Sass

What are you most proud of, and what would you do differently next time?

What I learned

Through this challenge, I learned about the following useful practices, tools, techniques, and frameworks for front-end development.

React

This is my first React project. This challenge gave me an opportunity to learn how to use the React JS framework to build webpages. The challenge presented me with enough tasks which propelled me to learn a lot about React features such as Virtual DOM, Components, JSX, Hooks, Updater functions, Props, Event handling, Prop types, and more...

Sass and SCSS

It was also my first time using Sass in a project. I have always preferred having full control over my styling rather than using a CSS framework or library. But I also wanted to make use of certain features that native CSS does not have, which led me to learn about how to make use of a CSS preprocessor instead, through my research I was able to publish this article about CSS preprocessors, and I found Sass to be the best option. I learned about amazing Sass features such as the indentation syntax, @import rule, compiling a Sass file to CSS, @mixin rule, Nestng, @include rule, Variables, Functions, conditional styling with @if and @else rule, and the SCSS block syntax.

Vite

Deciding to build out my solution for this challenge with React required me to learn about how to create a React project with the Vite development server and how to run builds for my project. While learning Vite, I was able to get a very good understanding of Hot Module Replacement (HMR).

Techniques and Code

In this section, I list out a few techniques I am proud that I got to learn about while building out this solution.

• How to create a custom checkbox:

• How to extract a numbers from a string:

function extractNumericValues(AlNmStr) {
  const numericValues = AlNmStr.match(/\d+/g).join("");
  return Number(numericValues);
}

• How to update styles conditionally from a JS variable

Monthly

What challenges did you encounter, and how did you overcome them?

I had a lot of challenges going through the process of building out this solution and the fact that I decided to use React and Sass which I was still relatively new to, to build out this advanced challenge made it a whole lot more challenging.

Challenge

The most challenging aspect of this project for me was how to update the Finishing up section with the values clicked from the previous steps and when the user changes the plan payment time frame.

Solution

I was able to overcome that challenge by setting a common state between all the steps, which re-renders the components once a change is made to that state.