Multi-Step Form Project

This project showcases a React-based multi-step form with modern routing, dynamic user interface components. It demonstrates a strong understanding of component-based architecture, React Router integration, and creating reusable components for a seamless user experience.

Table of Contents

• Project Overview
• Features
• Getting Started
• Technologies Used

Project Overview

The Multi-Step Form Project is designed to highlight my skills in frontend development, focusing on implementing interactive and dynamic user flows. This project includes a homepage and a form page, utilizing React’s powerful state management and routing features. The design emphasizes reusability, scalability, and best practices for code quality.

Purpose

This project is part of an internship interview assignment to demonstrate proficiency in React, routing, and handling complex UI interactions.

Features

• Routing: Navigation between a homepage and a form page.
• Dynamic UI: Components such as cards and forms dynamically render data.
• Custom Components: Reusable components like Card, Dropzone, and FormContainer.

Key Files

• main.jsx: Entry point rendering the app.
• App.jsx: Defines routes for the application.
• Home.jsx: Displays the homepage layout.
• Form.jsx: Contains the multi-step form component.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v14 or later)
• npm (v6 or later)

Installation

1. Clone the repository:

   git clone https://github.com/binushshrestha2080/codeavater.git

2. Navigate to the project directory:

   cd codeavater

3. Install dependencies:

    npm install

Running the App

1. Start the development server:

   npm run dev

Technologies Used

• React: Component-based library for building user interfaces.
• React Router: For routing between pages.
• Vite: Fast build tool for modern web development.
• CSS: For styling the UI.
• ESLint: For maintaining code quality.