Farm Fresh Direct

Inspiration

Living in a suburban community, I saw a gap: local farmers struggled to reach consumers, and we craved transparent, organic food. I wanted to build something that honored both—creating a warm, immersive space that felt as genuine as the farms themselves.

What it does

Farm Fresh Direct lets users explore local farm profiles, shop seasonal produce, subscribe to curated fresh boxes, and book farm experiences (tours, U-pick, cooking classes)—all with a focus on sustainability and local connection.

How we built it

We started with Figma for UI/UX, leaning into earthy tones and bold typography. Using React/Next.js for structure, we integrated Framer Motion for scroll animations/parallax, TailwindCSS for responsive grids, and GSAP for animated stats/cart interactions. Every element was built for desktop/mobile, prioritizing accessibility.

Challenges we ran into

Balancing rich animations (parallax, hover effects) with accessibility (respecting prefers-reduced-motion); ensuring smooth filter animations for farm/product cards across devices; perfecting the sticky nav transition from transparent to solid.

Accomplishments that we're proud of

Creating a fully responsive, immersive experience that feels personal (farm stories, warm design) while being functional; acing accessibility standards; crafting microinteractions (cart pulses, image zooms) that feel joyful but not overwhelming.

What we learned

Animations can elevate UX without sacrificing performance/accessibility; responsive grid design for dynamic content (farms/products) requires intentional mobile-first planning; prioritizing user trust (transparent farm info) drives engagement.

What's next for this project

Add user accounts to save favorite farms/subscriptions; integrate local delivery route optimization; partner with more regional farms to expand the directory; add a farm event calendar for real-time booking updates.

Built With

• css3
• javascript
• next.js
• react