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
- figma
- javascript
- node.js
- react
- render
- supabase
- vite
Log in or sign up for Devpost to join the conversation.