Local Harvest
A marketplace app connecting local vendors and shoppers for produce pre-orders
Overview
Local Harvest was built as part of the British Columbia Institute of Technology’s first interdisciplinary student project. Our 3-person development team implemented a full prototype from a design student’s Figma handoff, including the complete UI system (colors, logos, assets, and layouts), translating the design into a working web experience.
The app works like a farmer’s market marketplace: users browse markets and vendors, add items to a cart, adjust quantities, and place an order. Due to time limits, checkout was implemented as scheduling (pickup/delivery or pay-at-market) instead of online payment.
Key Features
- Browse markets, vendors, and products
- Cart management: add/remove items, adjust quantities
- Vendor inventory management: add/update products
- Pre-order checkout with pickup scheduling and pay-at-market
- View order history
Tech Stack
Challenge
Since this was our first time collaborating as a 3-person team, the early stage was disorganized—unclear ownership, inconsistent folder structure, and confusion about how to split work without stepping on each other’s changes. Because we were building directly from a design handoff, we also had to move fast while staying faithful to the Figma UI, which added pressure to keep everyone aligned.
On the frontend, we made the mistake of leaning on Figma’s CSS export to “speed things up.” The generated CSS was unstable and hard to maintain (ID-based selectors, inconsistent naming, and styles applied element-by-element rather than reusable components). With EJS server-side rendering and vanilla CSS, it became time-consuming to fix layout issues and keep styling consistent across pages.
Solution
To solve collaboration issues, we divided responsibilities by strengths and by feature area. I focused on backend and data flow, while the others focused more on UI and styling. We also adopted a feature-based structure (each feature in its own file/module) so everyone knew exactly where to work, which reduced merge conflicts and made debugging much simpler.
For the styling problem, we shifted from “trust the export” to a controlled cleanup workflow: test in-browser, fix what breaks, consolidate repeated styles, and refactor the worst offenders into reusable classes. We also made a pragmatic scope decision: keep checkout as scheduling (pickup/delivery or pay-at-market) instead of payments, so we could deliver a complete end-to-end experience within the timeline.