SurplusServe transforms food waste into community wealth. In a world where one-third of all food is wasted while millions go hungry, we've built the ultimate platform connecting food donors with those in need. We bridge the gap between surplus food and food insecurity through intelligent location services and impactful tracking.

Powered by location intelligence, interactive maps, and beautiful modern design, SurplusServe creates sustainable ecosystems where businesses reduce waste, communities gain access to nutritious food, and everyone contributes to environmental sustainability. This isn't just another food app; it's a movement that turns excess into access, waste into worth.

• ✨ Features
• 📸 Preview
• 📁 Project Structure
• ⚙️ Technologies Used
• 🚀 Getting Started
• 🧭 Usage Guide
• 🎯 Core Features
• 🌈 Customization
• 🛠️ Future Enhancements
• 🤝 Contributing
• 📄 License
• 🙌 Credits
• 📢 Author

• 🎯 Food Location Finder – Discover nearby food banks, shelters, and community centers
  
• 🗺️ Interactive Map Integration – Real-time geolocation with OpenStreetMap
  
• 📊 Impact Tracking Dashboard – Visualize meals saved, CO₂ reduced, and people helped
  
• 📱 Easy Donation Interface – Simple form for food donation planning
  
• 🔍 Food Availability Browser – Find available food resources in your area
  
• 🌱 Environmental Analytics – Calculate waste reduction and carbon impact
  
• 👤 User Profiles – Personalized dashboards with achievement tracking
  
• 📱 PWA Ready – Installable progressive web app for mobile use
  
• ✨ Modern UI Design – Clean, intuitive interface with orange/white theme
  

Home Page	Food Locations

Donate Food	Receive Food

Impact Tracker	Profile Page

SurplusServe/
└── 📁SurplusServe_
     ├── 📁frontend/                        
     │    ├── 📁public/                      
     │    │    ├── 📁icons/                     # PWA application icons
     │    │    │    ├── icon-48.png            
     │    │    │    ├── icon-72.png            
     │    │    │    ├── icon-96.png            
     │    │    │    ├── icon-144.png           
     │    │    │    ├── icon-192.png           
     │    │    │    ├── icon-256.png           
     │    │    │    └── icon-512.png           
     │    │    │
     │    │    ├── 📁preview/                   # Application screenshots
     │    │    │    ├── Image_1.webp          
     │    │    │    ├── Image_2.webp          
     │    │    │    ├── Image_3.webp          
     │    │    │    ├── Image_4.webp          
     │    │    │    ├── Image_5.webp          
     │    │    │    └── Image_6.webp          
     │    │    │
     │    │    ├── _redirects                   # Netlify routing rules
     │    │    └── manifest.webmanifest         # PWA manifest file
     │    │
     │    └── 📁src/                         
     │    │    ├── 📁components/                # Reusable UI components
     │    │    │    ├── BottomNav.tsx           # Bottom navigation bar
     │    │    │    └── Header.tsx              # Page header component
     │    │    │ 
     │    │    ├── 📁pages/                     # Application pages
     │    │    │    ├── HomePage.tsx            # Landing/dashboard page
     │    │    │    ├── DonateFood.tsx          # Food donation interface
     │    │    │    ├── ReceiveFood.tsx         # Food receiving interface
     │    │    │    ├── FindLocations.tsx       # Location finder with maps
     │    │    │    ├── ImpactTracker.tsx       # Impact analytics dashboard
     │    │    │    └── ProfilePage.tsx         # User profile management
     │    │    │
     │    │    ├── App.tsx                      # Main application component
     │    │    ├── index.css                    # Global styles
     │    │    ├── main.tsx                     # Application entry point
     │    │    └── vite-env.d.ts                # Vite type definitions
     │    │
     │    ├── .gitignore                        # Git ignore rules
     │    ├── eslint.config.js                  # ESLint configuration
     │    ├── index.html                        # HTML entry point
     │    ├── package-lock.json                 # Dependency lock file
     │    ├── package.json                      # Frontend dependencies
     │    ├── postcss.config.js                 # PostCSS configuration
     │    ├── tailwind.config.js                # Tailwind CSS configuration
     │    ├── tsconfig.app.json                 # TypeScript app config
     │    ├── tsconfig.json                     # TypeScript configuration
     │    ├── tsconfig.node.json                # TypeScript node config
     │    └── vite.config.ts                    # Vite build configuration
     │
     ├── .gitattributes                         # Git attributes
     ├── LICENSE                                # MIT License file
     └── README.md                              # Project Documentation

• Node.js (v18 or higher)
• npm or yarn package manager
• Modern web browser with geolocation support

1. Clone The Repository

git clone https://github.com/yourusername/SurplusServe.git
cd SurplusServe/SurplusServe_/frontend

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

4. Open Your Browser Navigate to http://localhost:5173 to access SurplusServe!
   
   

# Create production build
npm run build

# Preview production build locally
npm run preview

1. Navigate to Donate Page – Click "Donate Food" from home or navigation
2. Explore Food Details – View different food categories and quantities
3. Find Nearby Locations – Use the location finder to identify drop-off points
4. Plan Your Donation – Understand the impact of your contribution
5. Track Your Impact – See how your donation helps the community

1. Browse Available Resources – Check "Receive Food" for nearby assistance
2. Use Location Finder – Find food banks, shelters, and community centers
3. Filter Options – Search by distance, food type, or service hours
4. Get Directions – Use integrated maps for navigation
5. Access Resources – Connect with local food assistance programs

1. View Impact Dashboard – Understand the scale of food waste and hunger
2. Track Community Progress – See collective impact metrics
3. Learn About Solutions – Discover how to get involved locally
4. Share Resources – Help spread awareness about food assistance
5. Build Your Profile – Track your personal contributions and engagement

• Real-time Geolocation: Find nearby food banks, shelters, and community centers using browser geolocation
• Interactive Maps: Powered by OpenStreetMap with custom food assistance icons
• Smart Radius Search: Adjust search distance from 1km to 25km
• Category Filtering: Filter by food bank, restaurant, grocery, bakery, or cafe
• One-tap Navigation: Direct integration with Google Maps for turn-by-turn directions
• Live Distance Calculation: Real-time distance calculations from your current location

• Comprehensive Analytics:

  const impactMetrics = {
    mealsSaved: 12,847,
    co2Reduced: 8.2, // tons
    peopleHelped: 3,200,
    partnersJoined: 127,
    waterSaved: 256 // thousand liters
  };

• Visual Progress Charts:
  • Monthly growth tracking with interactive graphs
  • Environmental equivalent visualizations
  • Top contributor rankings and recognition
• Personalized Statistics: Individual contribution tracking and goal setting

• Personal Dashboard: Track engagement, saved locations, and preferences
• Interactive Editing: Photo upload and profile information management
• Activity History: Log of location searches and resource views
• Settings Control: Notification preferences and display options
• Achievement System: Visual badges for community engagement

• Installable: Add to home screen on iOS and Android devices
• Responsive Design: Optimized for mobile, tablet, and desktop
• Fast Performance: Built with Vite for optimal loading speeds
• Cross-platform: Works across all modern browsers
• Offline-ready: Service worker integration for reliable access

• Modify tailwind.config.js to customize the orange/white color scheme
• Update PWA manifest in public/manifest.webmanifest for app branding
• Replace icons in public/icons/ directory with your organization's branding
• Adjust animation speeds and transitions in Framer Motion components

• Extend the Overpass API queries in FindLocations.tsx for more location types
• Add custom location categories specific to your region
• Integrate additional public food assistance databases
• Create region-specific food bank directories

• Modify navigation structure in BottomNav.tsx for your specific use case
• Add new page components in the pages/ directory
• Extend the impact tracking metrics to include local measurements
• Customize the map markers and popups for your organization

• Real-time Food Availability – Dynamic updates of available food resources
• Donation Scheduling – Calendar-based donation planning and coordination
• Volunteer Management – Volunteer opportunity listings and sign-ups
• Food Safety Resources – Guidelines and training materials
• Multilingual Interface – Support for multiple languages
• Accessibility Features – Enhanced support for users with disabilities
• Community Forums – Discussion boards for food assistance topics
• Educational Resources – Learning materials about food waste reduction
• Mobile Notifications – Push notifications for nearby food resources
• Social Sharing – Easy sharing of resources on social media

We welcome contributions to help fight food waste and feed communities!

1. Fork the repository

2. Create a feature branch

git checkout -b feature/improved-food-location-finder

3. Commit your changes

git commit -m "🍽️ Add: Enhanced location filtering capabilities"

4. Push to the branch

git push origin feature/improved-food-location-finder

5. Open a Pull Request
   
   

• 🗺️ Location data accuracy and coverage expansion
• 📱 Mobile user experience improvements
• 🎨 UI/UX design enhancements
• 🌍 Accessibility and inclusivity features
• 📊 Analytics and data visualization
• 🔧 Performance optimization
• 📚 Documentation and user guides
• 🧪 Testing and quality assurance

This Project is licensed under the MIT License. Feel free to explore and build upon it.
© 2025 Pranav Khalate

Permission Is Hereby Granted, Free Of Charge, To Any Person Obtaining A Copy...

• OpenStreetMap Contributors – Providing the mapping tiles and location data
• Overpass API – Enabling real-time queries for food assistance locations
• React Leaflet Team – Interactive mapping components for React
• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Lucide Icons – Beautiful, consistent icon library
• Framer Motion – Production-ready animations for React
• Local Food Banks & Community Organizations – Inspiration for real-world impact

Built With ❤️ For A Hunger-Free World

If SurplusServe helps you connect with food resources or understand food waste issues, please consider giving it a ⭐️ on GitHub. Your support helps raise awareness about food insecurity and inspires more developers to create solutions for social good.

At SurplusServe, We Believe That Technology Should Serve Humanity. Every Line Of Code, Every Interface Design, Every Location Pin On Our Map Represents A Potential Connection Between Surplus Food And Someone In Need.

Join Us In Building A World Where No Food Is Wasted And No Person Goes Hungry.

🌱 "The Greatest Threat To Our Planet Is The Belief That Someone Else Will Save It."

    – Robert Swan

Technical Note: This application currently operates as a frontend demonstration with mock data and real-time location services. The interactive maps, geolocation features, and impact tracking provide a complete user experience that showcases how technology can connect food resources with community needs.