A modern, interactive smart farm management web application built with React + Vite. The dashboard provides real-time monitoring and control across farm operations including weather, irrigation, fleet tracking, sensors, and a 3D interactive map.
- Project Overview
- Tech Stack
- Project Structure
- Getting Started
- Team Workflow — Branching Strategy
- Section Assignments
- Available Scripts
- Contributing Guidelines
This application serves as a centralized control panel for a smart farm. It includes the following pages/modules:
| Page | Route | Description |
|---|---|---|
| Login | /login |
Authentication screen |
| Dashboard | / |
Overview of weather, mini-map, and quick stats |
| Map | /map |
3D interactive farm map (Three.js) |
| Fleet | /fleet |
Farm vehicle and equipment tracking |
| Sensors | /sensors |
Live sensor data and readings |
| Irrigation | /irrigation |
Irrigation control and scheduling |
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 8 | Build tool and dev server |
| React Router v7 | Client-side routing |
| Tailwind CSS v4 | Utility-first styling |
| Three.js | 3D rendering |
| @react-three/fiber | React renderer for Three.js |
| @react-three/drei | Three.js helpers and abstractions |
| ESLint | Code linting |
SE Project/
├── public/
│ ├── favicon.svg
│ └── icons.svg
├── src/
│ ├── assets/ # Static images and SVGs
│ ├── components/ # Shared layout components
│ │ ├── Layout.jsx # Main layout wrapper
│ │ ├── TopNavBar.jsx # Top navigation bar
│ │ ├── Sidebar.jsx # Sidebar navigation
│ │ └── BottomNavBar.jsx # Mobile bottom navigation
│ ├── pages/ # One file per route/section
│ │ ├── Login.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Map.jsx
│ │ ├── Fleet.jsx
│ │ ├── Sensors.jsx
│ │ └── Irrigation.jsx
│ ├── App.jsx # Route definitions
│ ├── App.css
│ ├── index.css
│ └── main.jsx # App entry point
├── index.html
├── vite.config.js
├── eslint.config.js
├── package.json
└── .gitignore
Make sure you have the following installed on your machine before proceeding:
- Node.js v18 or higher → Download here
- npm v9 or higher (comes with Node.js)
- Git → Download here
To verify your installations:
node --version
npm --version
git --versionOpen your terminal and run:
git clone https://github.com/AgriSenseNet/agri-dashboard.gitThen navigate into the project folder:
cd agri-dashboardInstall all required packages:
npm install
⚠️ Do NOT commit thenode_modules/folder. It is already excluded via.gitignore. Always runnpm installafter cloning or pulling new changes.
Start the local dev server with hot-reload:
npm run devOnce running, open your browser and visit:
http://localhost:5173
This project is developed collaboratively. Each team member works on a dedicated branch for their assigned section. Never commit directly to main.
Use the following naming format for your branch:
feature/<section-name>
Examples:
feature/dashboard
feature/map
feature/fleet
feature/sensors
feature/irrigation
feature/login
Follow these steps every time you start working:
1. Make sure you are on main and up to date:
git checkout main
git pull origin main2. Create and switch to your feature branch:
git checkout -b feature/your-section-nameIf your branch already exists (e.g., you created it before), switch to it instead:
git checkout feature/your-section-name git pull origin feature/your-section-name
3. Make your changes — edit your assigned files inside src/pages/ or src/components/.
4. Stage and commit your work regularly:
git add .
git commit -m "feat(dashboard): add weather card component"Use clear, descriptive commit messages. A good format is:
feat(<section>): short description of what you did
Examples:
feat(map): add 3D greenhouse scene
fix(sensors): correct temperature unit display
style(fleet): update vehicle card layout
Once your section is ready for review:
1. Push your branch to the remote:
git push origin feature/your-section-name2. Open a Pull Request (PR) on GitHub:
- Go to the repository on GitHub
- Click "Compare & pull request"
- Set the base branch to
main - Add a clear title and description of what you built
- Request a review from your team lead or another team member
3. Address any review comments, make changes on your branch, and push again. The PR will update automatically.
4. Once approved, your branch will be merged into main by the team lead.
Each student is responsible for a specific section of the application. Work only within your assigned files unless coordinated with the team.
| Section | Branch | Primary Files |
|---|---|---|
| Login Page | feature/login |
src/pages/Login.jsx |
| Dashboard | feature/dashboard |
src/pages/Dashboard.jsx |
| Map (3D) | feature/map |
src/pages/Map.jsx |
| Fleet Management | feature/fleet |
src/pages/Fleet.jsx |
| Sensors | feature/sensors |
src/pages/Sensors.jsx |
| Irrigation | feature/irrigation |
src/pages/Irrigation.jsx |
| Shared Components | feature/components |
src/components/ |
📌 If you need to modify a shared component (e.g.,
Sidebar.jsx,TopNavBar.jsx), coordinate with the rest of the team first to avoid merge conflicts.
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the app for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint to check for code issues |
- Keep your code clean and well-commented.
- Follow the existing file and component naming conventions (PascalCase for components).
- Do not install new npm packages without discussing with the team first.
- Resolve merge conflicts carefully — always keep both your changes and the upstream changes in mind.
- Pull from
mainfrequently to stay up to date and minimize conflicts:git pull origin main
- If you're unsure about anything, ask before pushing — it's easier to fix early.