Submitted over 2 years ago

Intro component with signup form, made with Vite, React, Scss

react, vite, sass/scss

Goran•500

@GoranK89

A solution to the Intro component with sign-up form challenge

Preview Code

Solution retrospective

Hello,

here I focused on practicing custom hooks, portal, conditional component rendering, and useReducer.

The Terms & Services link has a basic popup and there is a "fake" rudimentary loading and successful form submission message (the collected data is just displayed in the console).

The submit button is disabled until every input is filled out properly.

If I missed anything, please let me know! ✌

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Gaurav Singh•440
@Gaurav4604
Posted over 2 years ago
Hi! Congratulations on completing the challenge! It looks amazing 🥳.

I had a few ideas for the project (some of them are definitely over-engineered).
- Adding a placeholder div under the input, so that your input container, doesn't resize when the user fails the form-field validation
- Success/error based url routing react router helps for the same
- Transitions for the error states in the form you can try out this or this (more advanced)
- Simple redux store to record the form input and perform validation on the same redux toolkit helps focus on state independent from the component level state
Marked as helpful

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