Multi-Step Form

Made with HTML, CSS, TypeScript, ReactJS, TailwindCSS
Bootstrapped with Vite

🖼 Screenshots • ℹ️ About • ⚙️ Tools • 🔨 How to Build Project • 📁 File Structure

📦 NPM Packages worth mentioning • 💡 Details • 🔗 Useful resources • 👤 Author

🖼 Screenshots

ℹ️ About

This is a solution to the challenge "Multi-Step Form" from Frontend Mentor (link).

The challenge is to build out this multi-step form and get it looking as close to the design as possible.

The 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

I made my own Figma prototype: https://www.figma.com/file/6ecRJPjwajwLiwWVPLbdCh/Multi-step-form

⚙️ Tools

• HTML5
  • ReactJS
• CSS
  • TailwindCSS
• TypeScript
  • ReactJS
  • Framer Motion
  • React Final Form
  • Vitest
• NodeJS
• Vite
• Github Pages

🔨 Build project

Command	Description
npm install	First of all install all required packages
npm start	Starts a local development web server
npm run build	Builds the project, and outputs to the ./build folder
npm run preview	Start a local web server that serves the built solution from ./build for previewing
npm run test:unit	Runs unit tests
npm run eslint	Check that code conforms to Eslint
npm run prettier:check	Check that code conforms to Prettier style
npm run prettier:format	Format code in src accoring to Prettier

📁 File Structure

├── 📁 .github
|   ├── 📁 workflows
|   |   └── 📝 main.yaml      CI/CD instructions for Github Actions
│   └── 📝 dependabot.yml     Instructions for Dependabot
|
├── 📁 docs                   Additional information, documentation 
│   └── 📁 results            Screenshots of how the application works after being fully developed
|
├── 📁 src                    Source files needed for application development
│   ├── 📁 assets             Static assets: images, icons, favicons
│   ├── 📁 components         React components
│   ├── 📁 pages              React page components
│   ├── 📁 utils              Utility functions
│   ├── 📝 App.tsx            App React component
│   ├── 📝 index.css          Tailwind declarations mainly
│   ├── 📝 index.html         Main html file
│   ├── 📝 index.tsx          Entry point for the module bundler
│   └── 📝 vite-end.d.ts      Some Typescript stuff for Vite
|
├── 📝 .eslintrc.json         ESLint configuration file
├── 📝 .gitignore             Instructions for Git about what files to ignore
├── 📝 LICENSE                MIT License. Basically you can do whatever you want with the code
├── 📝 README.md              Project description
├── 📝 package-lock.json      Keeps track of the exact version of every package that is installed
├── 📝 package.json           Various metadata relevant to the project, scripts, dependencies
├── 📝 postcss.config.cjs     PostCSS configuration file
├── 📝 tailwind.config.cjs    TailwindCSS configuration file
├── 📝 tsconfig.json          TypeScript configuration file
├── 📝 tsconfig.node.json     TypeScript configuration file for Vite
└── 📝 vite.config.js         Vite configuration file

📦 NPM Packages worth mentioning

tailwindcss	For CSS
vitest	Unit testing
framer-motion	Adds nice looking animations
classnames	Conditionally define sets of CSS classes
react-final-form, final-form	Form validation

💡 Details

Not that difficult at all. But I am not gonna use TailwindCSS in any upcoming projects! Styled Components are so much better! And the code looks much, much cleaner!

Features

• Nice animations
• Animated counters for final prices
• Unit tests
• Form validation with React Final Form

🔗 Useful resources

• How to deploy a react app on GH Pages - to put shortly, just use HashRouter in the application
• Github Actions - Введение в CI/CD - Introduction to CI/CD with Github Actions, in Russian. Helped me to get understand the basics
• Framer Motion - Official framer-motion docs

👤 Author

• Frontend Mentor - @GrbnvAlex
• Telegram - @Arlagonix
• Github - @arlagonix