Frontend Mentor - Multi-step form solution

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.

Demo

Live Site URL: https://cleberpereiradasilva.github.io/multi-form/

Overview
My process
- Built with
- Composition
Author

Overview

The challenge

Users should be able to:

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
You can see the breefing in the folder briefing

Screenshot

Destop	Mobile

How to run

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Built with

CSS custom properties
Flexbox
React - JS library
Next.js - React framework
Tailwindcss - For styles
Github - For stored, shared and deploy
Redux - For stored application state
Radix - Unstyled, accessible components for building high‑quality design systems and web apps in React.

Composition

I used the composition pattern to create components.

To see how you can create `Form`` component, see below:

<Form.Root className="w-full h-full" onSubmit="{handleSubmit}">
  <div className="h-full w-full flex  flex-col justify-between">
    <Steps.One className={activeStep === 1 ? "" : "hidden"} />
    <Steps.Two className={activeStep === 2 ? "" : "hidden"} />
    <Steps.Three className={activeStep === 3 ? "" : "hidden"} />
    <Steps.Sumary className={activeStep === 4 ? "" : "hidden"} />
    <Steps.Thanks className={activeStep === 5 ? "" : "hidden"} />
  </div>
</Form.Root>

If you want more about composition, I recommend checking out FrontEnd Mastery to learn more.

Redux

To memange the application state I use Redux and put a state display in botton of page.

Author

Website - Cleber Silva
Frontend Mentor - @cleberpereiradasilva

cleberpereiradasilva/multi-form