AgriGate

Inspiration

Local farmers often struggle to reach end consumers due to fragmented distribution channels and high middle‑man fees. AgriGate was born to bridge that gap, empowering growers to sell directly and shoppers to access fresher, more sustainable produce.

What it does

AgriGate connects farmers and consumers on a single platform.

  • Farmers can list and manage inventory, view orders, and track sales.
  • Consumers browse by category, subcategory, price or proximity, add to cart, and checkout seamlessly.

How we built it

  • Frontend: React, React Router, Supabase client
  • Backend/BaaS: Supabase for authentication, database, and storage
  • State Management: Zustand (useCart store)
  • Styling: Tailwind CSS + custom CSS modules
  • Deployment: Vercel for frontend, Supabase hosting

Challenges we ran into

  • Efficient client‑side sorting vs. offloading to Supabase
  • Dynamically generating seller filters per category
  • Handling image fallbacks (e.g. carrot.png) for products with missing URLs

Accomplishments that we're proud of

  • Real‑time product listing updates via Supabase queries
  • Fully responsive slide‑out menu (SlideOutMenu.css)
  • Custom cart store (useCart.jsx) with quantity initialization

What we learned

  • How to integrate Supabase filters, sorting and pagination
  • Best practices for dropdowns and click‑outside handlers in React
  • Structuring a multi‑category marketplace with dynamic sub‑navigation

What's next for AgriGate

  • Add real‑time chat for buyer‑seller negotiation
  • Implement subscription boxes & recurring orders
  • Roll out geolocation‑based “closest farm” recommendations
  • Enhance analytics dashboard for farmers to track trends

Built With

Share this project:

Updates