Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Multi-step form built w/ (React + Styled Components) πŸ‘¨β€πŸ’»

#accessibility#lighthouse#react#react-router#styled-components
Adrianoβ€’ 33,960

@AdrianoEscarabote

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


πŸ‘¨β€πŸ’» Hello everyone.

This was a very challenging project, I dealt with a lot of bugs during development and also managed to learn a lot! I'm very happy with the result, I managed to practice a lot of new things, including the use of Hooks. One of the hooks that helped me the most during development was (useEffect), it was perfect for dealing with the side effect and it was also very important for passing form data through components using the Context API.

I had never used react router before and this was my first time. One tool that helped me a lot to keep my app running smoothly, as well as being able to monitor my project's accessibility and SEO, was the lighthouse!

I added:

  • πŸ‘¨β€πŸ’» 404 error page
  • 🎨 Animations during component rendering

Feel free to suggest code improvements!

Thanks! 😊

Community feedback

@aandreluis

Posted

Very good project, congrats! But, the validation on email input doesn't work well, same the input being required, the form go to next step πŸ€”

Marked as helpful

0

Adrianoβ€’ 33,960

@AdrianoEscarabote

Posted

@aandreluis Thanks for letting me know, I'll fix it!

1
anass sanbaβ€’ 450

@sanba-anass

Posted

hi adriano congrats u did a great job ! ihave a question : how did u navigate without refreshing the page between pages. thanks in advance!

1

Adrianoβ€’ 33,960

@AdrianoEscarabote

Posted

@anasssanba1 this is a feature that react-router allows is called SPA - Single Page Application, I recommend reading a little about it when you're learning react, it's really good.

1
anass sanbaβ€’ 450

@sanba-anass

Posted

@AdrianoEscarabote oh thank you so much !! really cool stuff

1
Daniloβ€’ 200

@OneBitMance

Posted

Good job my friend!

Congrats on finishing this project and especially on learning new stuff! 🀩

Keep coding, you rock! 🧑

1

Adrianoβ€’ 33,960

@AdrianoEscarabote

Posted

@OneBitMance thanks bro, I'm glad you like it!

1
Devesh shuklaβ€’ 260

@deveshshukla

Posted

Gr8 Work Bruh...πŸ‘

1

Adrianoβ€’ 33,960

@AdrianoEscarabote

Posted

@deveshshukla Thaanks!!

0
AHMED BOUSALEHβ€’ 50

@bousaleh50

Posted

congrates on finishing this project, i also started a project that dealing with forms and inputs handling i'll build it using react so your code was realy helpfull, but there is somthing i'd like to add, at the step 2,select plan when i'm selecting a plane the button next step is changed and turned to be clickable but when i'm click on the same plan in a way to cancele it the button next step is still clickabel,so here is your next challenge to ,i'd like to make the button unclickable unless i choised or i seleced a plan. i hope you understand my point of view because my English is not very good

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord