This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
This 4 step form and confirmation page require different components to be rendered based on user input. There is a desktop and mobile version. The template and styling dynamically change with the screen size. There is email and phone validation. Buttons and phones update the final order summary. State stores data so users can go back and edit previous pages, get feedback messages, switch between plans and calculate the order total.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
Checkout screeshots folder
This is my first Frontend Mentor project. I wanted to pick something manageable that would test new and old skills. I used the languages, libraries and frameworks that I've been practicing recently, went to their websites for install guides, opened up vsCode and got to work. I started with the mobile version and step by step, one page at a time, began adding components and content. Then I styled it while referencing the design folder. Finally I added javascript logic and typescript. Whenever I got stuck, I would look for help on youtube and google.
- React
- Next.js
- Tailwind
- Typescript
- Mobile-first workflow
This was the first time I used typescript in my own project. I'm happy to get back to react and the frontend. Using tailwind, flex, grid and positioning/styling concepts to create a responsive product was challenging and fun. I used regex tests to check for valid emails and phone numbers. I used state, javascript and buttons to make the form interactive, which was good practice too.
I took the easy way out to stop typescript from being mad at me several times. I also want to work on not repeating code, making everything more dynamic and utilizing best practices in general. I need to get more comfortable customizing tailwind, and more easily use flex box, position properties and grid to fit my project's specific needs. Some of my jsx elements and attributes were wrong. I want to get faster at everything.
- Github - adamcodes2843
- Frontend Mentor - @adamcodes2843