MENU

Fun & Interesting

Building a Multi-Step Form with MERN Stack Part 1 Frontend | Step-by-Step Tutorial

Brett Westwood - Software Engineer 4,049 lượt xem 2 years ago
Video Not Working? Fix It Now

GitHub Code Here 👇

https://github.com/bwestwood11/multi-step-form-example

Private 1 on 1 Help 👇
https://calendly.com/dabrettwestwood/30min

Join my FREE Discord to talk and network about web development! 👇
https://discord.gg/rKXNDnE32N

In this tutorial, you'll learn how to create a multi-step form using the MERN (MongoDB, Express, React, Node.js) stack. Multi-step forms are a great way to improve user experience and gather information in a more organized manner.

Throughout the tutorial, we'll cover important topics like state management, proper techniques, and conditional rendering. By the end of this tutorial, you'll have a fully functional multi-step form that you can customize and use in your own projects. So, join us and take your skills to the next level with MERN stack!

This is part 1 of a 2 part series. In this part we will go over the frontend by creating a React app.

We will style, setup the state, the logic and more so you can get started on your own multi-step form.

If you find this video valuable, please hit that like button and subscribe for more similar content.

Time Stamps
0:00 Intro
1:01 Setup Folders/Create React App
2:44 Clean up Folders from default
4:50 TailwindCSS setup
8:11 Create Component and Pages Folder
10:58 Import Folders where need be
13:28 Styling the CSS of the Form
27:30 Making the Form Functional - Logic
40:32 Styling the inputs and labels
52:30 State Management for the form
01:05:08 Password Hide/Show
01:17:57 Outro

Comment