https://github.com/adrianoescarabote/multi-step-form

Multi-step form built w/ React + Styled Components
https://github.com/adrianoescarabote/multi-step-form

javascript react reactjs styled-components

Last synced: 23 days ago
JSON representation

Multi-step form built w/ React + Styled Components

• Host: GitHub
• URL: https://github.com/adrianoescarabote/multi-step-form
• Owner: AdrianoEscarabote
• License: mit
• Created: 2022-12-31T03:07:59.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-02T13:56:11.000Z (4 months ago)
• Last Synced: 2024-11-20T18:44:07.917Z (3 months ago)
• Topics: javascript, react, reactjs, styled-components
• Language: JavaScript
• Homepage: https://multi-step-form-adrianoescarabote.vercel.app/
• Size: 3.96 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
- Active app [click here](https://multi-step-form-adrianoescarabote.vercel.app/)

## VIDEO

https://user-images.githubusercontent.com/101136987/216338677-18ddef07-5943-47a7-a917-b47099f4b08e.mp4

# Frontend Mentor - Multi-step form solution

This is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

## Overview

### The challenge

Users should be able to:

- Complete each step of the sequence

- 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

## My process

### Built with

- [React](https://reactjs.org/) - JS library

- [Styled Components](https://styled-components.com/) - For styles

### Continued development

Multi-step form built with React and Styled Components!

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, I took the opportunity to add a 404 error page. A tool that helped me a lot was lighthouse, to keep my application performing well, in addition to being able to monitor accessibility and SEO of my project, all with a score from 0 to 100! Here are the notes according to the tool:

- Performance: 87/100

- Accessibility: 100/100

- Best practices: 100/100

- SEO: 92/100

I'm really excited to keep evolving! 🚀

## Author

- Linkedin - [AdrianoEscarabote](https://www.linkedin.com/in/adriano-escarabote-944b02233/)

- Frontend Mentor - [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)

- Instagram - [@ogdrian](https://www.instagram.com/ogdrian/)

- Twitter - [@drianEscarabote](https://twitter.com/drianEscarabote)