Next.js Multi-Step Form Application

This project is a multi-step form application built using Next.js with TypeScript, Tailwind CSS, and PostCSS. The application follows the atomic design principles and leverages React context for global state management.

Table of Contents

• Installation
• Project Structure
• Features
• Usage
• Available Scripts
• Technologies Used
• Contributing
• License

---

Installation

1. Clone the repository:

   git clone https://github.com/your-username/next-multi-step-form.git
   cd next-multi-step-form

2. Install the dependencies:

   npm install

3. Run the development server:

   npm run dev

   Open http://localhost:3000 to view the application.

---

Project Structure

├── app/
│   ├── form/                # Components for different form steps
│   ├── layout.tsx           # Layout component
│   └── page.tsx             # Main page component
│
├── components/
│   ├── atoms/               # Small reusable components
│   ├── molecules/           # More complex components composed of atoms
│   └── templates/           # High-level templates like MultiForm
│
├── context/
│   └── MultiFormContext.tsx  # Global state for multi-step forms
│
├── interfaces/              # TypeScript interfaces
│   └── commons.ts           # Common interfaces used in the app
│
├── public/
│   ├── assets/              # Static assets (images, icons, etc.)
│
├── styles/
│   └── globals.css          # Global CSS
│
├── utils/
│   ├── constants.ts         # Application constants
│   └── helpers.ts           # Helper functions
│
├── .eslintrc.js             # ESLint configuration
├── tailwind.config.ts       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project metadata and scripts

---

Features

• Multi-step form functionality
• Context API for managing form state across steps
• Responsive design using Tailwind CSS
• TypeScript for static type checking
• Atomic design structure for reusable components

---

Usage

To start the application in development mode, run:

npm run dev

The app will be available at http://localhost:3000.

Form Flow

The application includes a multi-step form under the /app/form/ directory. Each step of the form is a separate component (Form1.tsx, Form2.tsx, etc.). The form flow is managed via the MultiFormContext, ensuring that state persists between form steps.

---

Available Scripts

In the project directory, you can run the following commands:

• npm run dev: Runs the app in development mode.
• npm run build: Builds the app for production.
• npm run lint: Lints the codebase using ESLint.
• npm run format: Formats the codebase using Prettier.

---

Technologies Used

• Next.js – React framework for server-rendered apps.
• TypeScript – Static typing for JavaScript.
• Tailwind CSS – Utility-first CSS framework.
• PostCSS – A tool for transforming CSS.
• React Context API – State management across form steps.
• Atomic Design – Modular, reusable component architecture.

---

Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss any changes.

---

License

This project is licensed under the MIT License. See the LICENSE file for more details.