felipeog / fm-multi-step-form

Here I used a Frontend Mentor challenge to experiment with Tailwind CSS and Legend-State

👨🏻‍💻 About me

Hello! My name is Felipe, and I'm a Frontend Developer.

Sometimes I write about Web Development on my blog.

🛠 Tech stack

💻 Projects

Experiments with graphics

• Good mood
• Homer
• Learn then do
• Random scribble
• Red flag
• Tumbling dice

Challenges

• Rocketseat #boraCodar
• Caju
• CSS Battle
• Frontend Mentor
  • Calculator
  • Feature cards
  • Multi step form
  • Tip calculator
• PEBMED
• Winnin

Courses

• Rocketseat Ignite
• LinkedIn Learning
• curso.dev
• Full Cycle
  • Desafio Go
  • Nginx com Node.js

Study

• AWK
• Bash

fm-multi-step-form's Issues

Step panel

Set colors

https://tailwindcss.com/docs/customizing-colors#using-custom-colors

Add toasts

• Install React Toastify
• Style toast

Toggle

Use SVGR to prevent layout shift

https://react-svgr.com

Submit form pressing `enter`

Currency formatter

Button

Rocketseat's 3 Tips for Scaling React Apps with TailwindCSS

• Variants
  • solid
  • link
• Schemes
  • regular
  • highlight

Add Change button to Summary step

Set favicon

Set font family

https://tailwindcss.com/docs/font-family#customizing-your-theme

Implement mobile version

Configure Formik

https://formik.org/docs/overview#installation

Create success handlers

Animate form errors show/hide

Inception

Tools

• React
• Tailwind CSS
• Framer Motion
• Toastify
• Legend-State

Font weight

• Match the design

Create a custom hook to handle navigation

Create error handlers

Improve form validation on first render

• Implement warning toasts

Header

Configure Motion

https://www.framer.com/motion/introduction/#quick-start

Configure Tailwind

https://tailwindcss.com/docs/guides/vite#react

Steps navigation

Step indicator

Animate plan card growing/shrinking

Text input

Add phone number mask

Steps

• Personal information
• Plan
• Add-ons
• Confirmation
• Thank you

Improve price formatter

• Add a function that formats the price with recurrence shorthand (e.g $9/mo, $99/yr)

Configure Legend

https://legendapp.com/open-source/state/getting-started/#install-legend-state

Set store

Set constants

• Plans
• Addons
• Recurrence

Put form data in the store

Card

• Hover state
• Active state

Checkbox

Sidebar

Uninstall Formik

Initialize React app with Vite

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest