This project is a comprehensive multi-step wizard form for adding detailed farm information, built as a solution for a Frontend Intern assignment.
The application features a clean, responsive, and user-friendly interface that guides users through a complex data-entry process.
The core of the application is a modal-based, 4-step wizard that handles:
- Dynamic form sections
- Client-side validation
- State management (with React Hooks)
It also includes a dashboard page for data visualization, demonstrating component-based architecture and routing with React Router.
- Step 1: Farm Details → Collect farm name, area, and location
- Step 2: Add Reservoir → Add one or more reservoirs with details
- Step 3: Add Polyhouse → Form for polyhouse specifications
- Step 4: Zone Info → Configure zones within each polyhouse
- Add/remove multiple reservoirs and polyhouses on the fly
- Required fields validated at each step
- Prevents incomplete submissions
- Clear, user-friendly error messages
- Wizard displayed as a modal dialog over the main dashboard
- Matches provided UI designs
- Separate page
/apexchart - Charts powered by ApexCharts
- Showcases data visualization skills
- Built with React + Hooks
- Tailwind CSS for responsive, mobile-first design
| Technology | Description |
|---|---|
| React.js | The core JavaScript library for building the component-based user interface. |
| Vite | A modern frontend build tool that provides a fast development server and bundles the code for production. |
| Tailwind CSS | A utility-first CSS framework used for all styling to rapidly build a custom and responsive design. |
| React Router | The standard library for handling client-side routing and navigation between different pages. |
| ApexCharts | A powerful charting library used to create the data visualization dashboard. |
| Lucide React | A lightweight and clean library for all the SVG icons used in the application. |
# Clone the repo
git clone https://github.com/your-username/your-repo.git
# Navigate into project
cd your-repo
# Install dependencies
npm install
# Run the app
npm start