Crop Mapping Platform — Frontend

A Web-Based Interface for Large-Scale Crop Type Monitoring

This repository contains the frontend application for the Crop Mapping Platform, built with React + Vite, providing an intuitive interface to explore large-scale crop maps, seasonal outputs, district-level summaries, and analytics generated by the backend crop classification pipeline.

The platform is designed for agricultural researchers, policymakers, and GIS analysts who need fast, interactive access to crop data across Punjab and Sindh.

---

✨ Features

• 🗺 Interactive Crop Map Viewer using Google Maps
• 📍 District-Wise Crop Statistics rendered from backend JSON outputs
• 🖼 PNG/TIFF map visualization for seasonal and annual crop mapping
• 🔍 Search & Navigate to any district or tile
• ⚡ Fast, lightweight Vite-powered build
• 🔗 Seamless API Integration with the backend inference system
• 📱 Responsive UI for desktop and tablet devices

---

📁 Repository Structure

cropmapping-platform-frontend/
├── src/
│   ├── components/
│   ├── pages/
│   ├── layouts/
│   ├── api/
│   ├── hooks/
│   ├── assets/
│   ├── App.jsx
│   └── main.jsx
├── public/
├── index.html
├── package.json
├── vite.config.js
└── README.md

This structure may vary slightly depending on updates, but the core organization remains similar.

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (LTS recommended)
• npm or yarn

---

🔧 Installation

Clone the repo:

git clone https://github.com/umerkay/cropmapping-platform.git
cd cropmapping-platform

Install dependencies:

npm install
# or
yarn install

---

🔐 Environment Variables

Create a .env.development file in the root directory and add:

VITE_API_URL=https://umerkk164-cropmapping-server.hf.space/
VITE_GOOGLE_MAPS=your_google_maps_api_key

You may also add a .env.production file for deployment if needed.

---

▶️ Running the App

Start the development server:

npm run dev
# or
yarn dev

Your app will be available at:

http://localhost:3000

---

📦 Production Build

To create an optimized production build:

npm run build
# or
yarn build

The final build will be generated inside the dist/ folder.

To preview the production build locally:

npm run preview

---

🌐 Deployment

The frontend can be deployed on:

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages
• Any static hosting service

Since this is a Vite app, deployment is lightweight and fast.

---

🔗 Backend Repository

The full backend (model inference, stitching pipeline, JSON output generation) is available here:

👉 https://github.com/umerkay/cropmapping-server-two

---

For questions, collaborations, or dataset access:

Muhammad Umer Khan Shalina Riaz Syed Hashir Ahmad Kazmi

Contact mukhan.bscs21seecs@seecs.edu.pk MachVis Lab, NUST

📄 License

This project is licensed under the MIT License.