Food Waste Reduction System Using React
The Food Waste Reduction System is a full-stack web application designed to connect food donors with people who need food. It helps reduce food wastage by allowing donors to list surplus food and receivers to browse and claim available donations. The system uses React for the frontend, Java Servlets and JSP for backend functionality, and MySQL for database management.
The application includes separate roles for donors, receivers, and administrators. It also integrates Google Maps to help users identify food pickup locations and navigate to donors. This project gives students practical experience in web development, database connectivity, role-based access, and third-party API integration.
Complete Advance AI Topics: Click Here
Real Time Projects on YouTube:- DecodeIT
What Is the Food Waste Reduction System?
The Food Waste Reduction System is a web-based platform that helps redistribute surplus food instead of allowing it to go to waste. Donors can share food details, receivers can claim available donations, and administrators can monitor platform activities.
Project Overview
| Project Details | Description |
|---|---|
| Project Name | Food Waste Reduction System |
| Frontend | React |
| Backend | Java Servlets and JSP |
| Database | MySQL |
| Type | Full-Stack Web Application |
Available Features
1. User Authentication and Role Management
The system supports three user roles: Donor, Receiver, and Admin. Each role has access to its relevant dashboard and functionality, helping organize the donation process.
2. Profile Management
Users can manage their profiles and update personal information, including their name, phone number, address, and profile picture.
3. Donor Module
Donors can create food donation listings with descriptions, quantities, pickup times, and locations. They can also upload food images to help receivers understand what is available.
4. Receiver Module
Receivers can browse available food donations, view descriptions and images, and claim food directly through the application. Google Maps helps them locate donors and access directions.
5. Admin Module
The administrator can monitor platform activities, oversee food donations and claims, and help ensure that the system is being used appropriately.
6. Google Maps Integration
The application supports browser geolocation to capture donor pickup locations. Receivers can view available donations as map pins, open information windows, and use the View on Map option to access navigation directions.
Technology Stack
- React: Builds the interactive and responsive frontend.
- Java Servlets: Handles server-side requests and application logic.
- JSP: Supports Java-based web page functionality.
- MySQL: Stores user profiles, donation listings, and claim information.
- Google Maps: Helps users identify food pickup locations.
- Apache Tomcat: Runs the Java web application.
Software and Tools Required
- Java JDK
- Node.js and npm
- MySQL
- Apache Tomcat 9 or compatible configuration
- Visual Studio Code
- Web Browser
How to Download
The complete package is available so you can run, study, and submit it with confidence. It includes:
- Full Source Code
- Project Report
- Synopsis
- PPT Presentation
Screenshot
How to Install and Run the Project in VS Code?
Follow these steps to configure the database, start the Java backend, and run the React frontend. Folder names and commands may vary depending on the supplied project structure.
Step 1: Create the MySQL Database
Open MySQL Workbench or the MySQL terminal and execute:
CREATE DATABASE foodwaste;
USE foodwaste;Import the provided SQL schema to create the required tables. Verify the tables using:
SHOW TABLES;Step 2: Configure the Java Backend
- Open the backend project in VS Code or a compatible Java IDE.
- Configure Apache Tomcat 9.
- Open
DBUtil.javaand update the MySQL connection settings.
private static final String URL =
"jdbc:mysql://localhost:3306/foodwaste";
private static final String USER = "root";
private static final String PASS = "yourpassword";Replace yourpassword with your actual MySQL password. Deploy the application on Tomcat and ensure the backend is running.
Step 3: Install Frontend Dependencies
Open a VS Code terminal and navigate to the frontend folder:
cd frontend
npm installStep 4: Configure API Communication
Configure the React frontend to send API requests to the deployed Java backend. If the project uses Create React App, its package.json may support a proxy entry. Set the proxy to the actual local Tomcat application URL. The exact URL depends on the deployed application context.
Step 5: Start the React Application
Run the frontend using:
npm startOpen the local address displayed in the terminal. Confirm that the React frontend can communicate with the Java backend and that the MySQL connection works correctly.
How to Use the Food Waste Reduction System?
Donor
- Register and log in as a donor.
- Add food donations with quantities, pickup details, locations, and images.
- Make surplus food available for receivers to claim.
Receiver
- Register and log in as a receiver.
- Browse available donations and review their details.
- Claim suitable donations and use Google Maps to find pickup locations.
Admin
- Log in using an authorized administrator account.
- Monitor donation listings and claims.
- Oversee platform activities and user participation.
Why Is This Project Useful for Students?
The Food Waste Reduction System helps students understand how a full-stack application connects a frontend, backend, and relational database. It provides practical exposure to React, Java Servlets, JSP, MySQL, role-based functionality, and Google Maps integration.
Beyond technical learning, the project demonstrates how software can address a real-world issue. By creating a platform for sharing surplus food, students can explore the role of technology in reducing waste and supporting communities.
Frequently Asked Questions
1. What is the Food Waste Reduction System?
It is a web application that connects food donors with receivers so surplus food can be claimed instead of wasted.
2. Which technologies are used in this project?
The project uses React, Java Servlets, JSP, MySQL, and Google Maps integration.
3. What are the main user roles?
The three main roles are Donor, Receiver, and Admin.
4. Which database is used?
MySQL is used to store application data, including user profiles, food donations, and claim records.
5. How does Google Maps help users?
Google Maps helps receivers view donation locations and access directions to food pickup points.
Final Thoughts
The Food Waste Reduction System is a practical student project that combines full-stack web development with a meaningful social purpose. It helps students learn frontend development, Java backend programming, database management, and map integration while demonstrating how a digital platform can support food redistribution.
Keywords: Food Waste Reduction System, food waste management system project, food donation website project, food waste management system in Java, food waste reduction project report, food donation system using React and Java, food waste management project documentation
