Farmora — Farm to Door E-commerce Marketplace by Ehan Siddique

Farmora is a full-featured farm-to-door e-commerce marketplace designed and developed by Ehan Siddique. I built the project from the ground up to explore what it takes to run a real multi-vendor marketplace, where independent farms sell directly to customers and the platform earns a commission on every sale.

The application combines a complete shopping experience, a live 3-day delivery tracker, farmer storefronts with photo uploads, a commission-based admin dashboard, one-click demo accounts, a blog and full search engine optimisation.

Unlike a simple storefront template, Farmora includes the business logic required to manage three different roles, split every sale between the platform and the farmer, track orders through delivery and keep pages fast even when the backend is slow or unavailable.

Project Overview

I wanted Farmora to feel like a real marketplace product rather than a product grid with a cart.

Customers can browse produce by category or by farm, filter and sort the catalogue, read reviews, save items to a wishlist, apply coupon codes, check out and follow their order live until it reaches the door.

Farmers get their own dashboard where they publish products with photos, follow incoming orders and see exactly what they earn after the platform fee.

Behind the marketplace is an administration system built around the platform's real revenue: a 10% commission on product sales, with sales reporting, product moderation, user management and a contact inbox.

The application uses Firebase Authentication and Cloud Firestore for accounts and data, Supabase Storage for farmer photo uploads, the Pexels CDN for responsive product photography and Vercel for hosting.

My Role

Role: Full-Stack Developer Developer: Ehan Siddique Project Type: Personal Full-Stack Project Application: Multi-Vendor E-commerce Marketplace

I designed and developed Farmora independently, including the user interface, application architecture, local-first data layer, commission logic, delivery tracking system, farmer and admin dashboards, SEO, automated screenshot testing and deployment.

Core Features

Shopping Experience

Farmora includes a complete storefront with 40 products from 8 partner farms across 8 categories.

The shopping experience includes:

• Product search
• Filters for category, farm, price, organic and in-stock items
• Six sort options
• Paginated product listings
• Product gallery with hover zoom and swipe
• Product reviews and ratings
• Wishlist
• Recently viewed and best-seller sections
• Cart with a free-delivery progress bar
• Coupon codes
• Tax and delivery calculation
• Checkout with demo card payment or cash on delivery

Farm profile pages show each farm's story, location, certifications and products, so customers always know who grew their food.

Live 3-Day Delivery Tracker

Every order on Farmora is delivered within 72 hours and moves through five stages:

Placed → Packed at Farm → Shipped → Out for Delivery → Delivered

The tracker includes:

• A live progress bar with a moving delivery truck
• Estimated delivery date and time
• A countdown that updates while the page is open
• Order cancellation until the order ships
• A printable invoice
• A public tracking page that works with just an order number

The current stage is calculated from the time the order was placed, so the tracker is always accurate without any background job.

Farmer Dashboard

Farmers manage their own storefront from a dedicated dashboard.

Farmers can:

• Publish new products
• Upload product photos to Supabase Storage
• Edit and delete products
• See low-stock warnings
• Follow orders with delivery progress
• Edit their farm profile

The dashboard shows gross sales, the 10% platform fee, net earnings (90%) and a 7-day earnings chart.

Administration Dashboard and Commission Model

Farmora earns 10% of the product price on every sale. The farmer keeps the other 90%. Delivery fees and tax are not counted as platform revenue, and cancelled orders count for nothing.

Administrators can monitor:

• Platform earnings (10% commission)
• Sales volume
• Farmer payouts
• Daily commission over the last 7 days
• Commission by category
• Top-selling products
• Users and farms

Administrators can review every sale with its commission and farmer payout, filter and export sales to CSV, approve, hide, reject, feature, edit or delete products, assign products to farms, suspend and reactivate users and read messages from the contact form.

Administrators do not see a cart, "My Orders" or delivery screens, because the admin role is for running the marketplace, not buying from it.

Demo Accounts and Sign-Up

The login page first asks whether the visitor is a customer or a farmer.

For each role, visitors can:

• View a demo account instantly, with no password
• Create their own account with Firebase email/password authentication
• Sign in to an existing account

A separate admin demo lets recruiters and visitors explore the full administration dashboard.

Blog and Content Pages

Farmora includes a journal with six full articles about seasonal eating, recipes and the partner farms, each on its own page.

The site also includes About, Contact, FAQ, Sell on Farmora, Shipping & Returns, Terms, Privacy and a custom 404 page.

Performance

The first version of Farmora took up to about 6 seconds to show a page. Every page waited on a Firestore read, and when Firestore could not be reached, each read hung until it timed out.

I rebuilt the data layer to be local-first:

• Every read returns immediately from seed data and the browser's local storage
• Firestore is fetched in the background with a 4-second timeout and cached
• A farmora:data event re-renders the page when new data arrives
• If Firestore cannot be reached, it is skipped for the rest of the session
• If a single collection is blocked by security rules, only that collection stays local

I also reduced the JavaScript loaded on every page:

• The Firebase SDK is loaded with dynamic import() once the browser is idle
• Shared first-load JavaScript per page dropped from about 215 KB to about 106 KB
• The Supabase client only loads when a farmer uploads a photo
• Product photos use responsive srcset from 320 to 1280 pixels with lazy loading

Images and Automated Visual Testing

Every product, category, farm and page uses a real photograph.

To make sure every image loads and matches its product, I built a GitHub Actions workflow that:

• Builds the application
• Opens every page in Playwright
• Saves full-page desktop and mobile screenshots
• Renders contact sheets of every product photo
• Checks the HTTP status of every photo URL

The workflow caught 10 broken photo links and several photos that did not match their product. Where no matching photo existed, I renamed the product instead of showing a misleading image.

SEO

Farmora is built to be found by search engines:

• Unique titles, descriptions and canonical URLs on every page
• Open Graph and Twitter preview tags
• A generated social preview image using next/og
• JSON-LD structured data for the website, organisation, author, products and blog posts
• Product structured data with price, stock and ratings
• A generated sitemap.xml with all products, farms and blog posts
• A robots.txt that keeps carts, checkout and dashboards out of search results
• Server-rendered product names, prices and descriptions

Architecture

Farmora organises its logic into dedicated modules instead of placing data operations inside UI components.

Important modules include:

• lib/db.js — local-first data layer with background Firestore sync
• lib/firebase.js — lazy-loaded Firebase app, authentication and Firestore
• lib/supabase.js — on-demand Supabase client for photo uploads
• lib/stats.js — commission, payout and revenue calculations
• lib/delivery.js — delivery stage and countdown logic
• lib/seo.js — site metadata and structured data builders
• context/AuthContext.jsx — sessions, sign-up and demo logins
• context/ShopContext.jsx — cart, wishlist and recently viewed items

Firestore collections include users, products, orders, reviews, messages and newsletter.

The commission rate is defined once (COMMISSION_RATE = 0.1) and shared by both dashboards, so the admin's commission and the farmer's fee always match. An order with $42.00 of produce earns Farmora $4.20 and the farmer $37.80.

Engineering Highlights

One of the most important parts of this project was keeping the interface fast and reliable regardless of the backend's state.

Other engineering considerations included:

• Rendering every page instantly from local data
• Splitting revenue correctly between the platform and farmers
• Calculating delivery stages from timestamps instead of background jobs
• Restricting each role to the screens it needs
• Lazy-loading third-party SDKs to cut bundle size
• Verifying every product image automatically in CI
• Server-rendering product content for SEO
• Keeping uploaded media separate from database records

Quality Assurance

Before release, I tested Farmora with:

• Production builds with next build
• A Playwright crawl of every route at desktop and mobile widths, with no page errors and no horizontal overflow
• Checks on all 79 internal links
• End-to-end flows for demo logins, checkout through to the delivery tracker, and admin access rules

Responsive Design

Farmora is designed to work across desktop and mobile devices, down to 390-pixel-wide phones.

The interface adapts its layout for smaller screens, with a mobile menu, stacked product grids and a sticky add-to-cart bar on product pages.

A first-visit splash screen, a top progress bar on every page change and spinner loading states keep navigation feeling smooth, and animations respect the "reduce motion" setting.

Current Limitations

Checkout is currently a demo and does not process real payments.

Data syncs with Firestore in the background rather than through real-time listeners, so changes made by other users appear on the next refresh.

Every order follows the same 72-hour delivery timeline rather than farm-specific delivery areas or time slots.

These limitations provide clear opportunities for future development and scaling.

Future Improvements

Possible future improvements include:

• Real payments with Stripe
• Firestore real-time listeners
• Stricter security rules with uploads limited to signed-in farmers
• Delivery areas and time slots per farm
• Farmer payout reports
• Push and email order notifications
• A full end-to-end test suite in CI

Developer Guide

To run Farmora locally, Node.js 18.17 or newer is required.

git clone https://github.com/Fehan999/Farmora.git
cd Farmora
npm install
npm run dev

The development application runs locally at http://localhost:3000.

Available commands include:

npm run dev
npm run build
npm run start
npm run screenshots

Environment variables can be configured for Firebase, Supabase and the site URL. When they are missing, the app falls back to the bundled demo configuration.

Before deploying changes, the application should successfully pass the production build and the screenshot workflow.

About the Developer

I'm Ehan Siddique, a full-stack web developer focused on building modern web applications with technologies including React, Next.js, JavaScript, Firebase, Supabase and modern frontend development tools.

Farmora is one of my larger personal projects and was designed and developed end-to-end as a practical exploration of marketplace business logic, role-based dashboards, performance optimisation, SEO and automated testing.

Explore my other projects: Projects

Tech stack

• Next.js
• React.js
• Tailwind CSS
• JavaScript
• Firebase
• Supabase
• Vercel
• Playwright
• GitHub Actions
• SEO