FreshFind Market Map

Crowdsourced produce & craft pricing from every stall, everywhere.

A market map design tool built with React, TypeScript, Three.js, and GSAP — featuring immersive 3D visualizations, reputation-based karma systems, and real-time price alerts.

Features

• 3D Market Tunnel — Scroll-driven hero animation using Three.js shaders
• Interactive Market Map — 3D top-down view of districts with animated price markers
• Dual-Track Karma System — Reputation scoring for shoppers and merchants
• Price Alerts — Subscription UI with item-based tracking
• Offline-First PWA — Cached prices, Capacitor wrapper for native access

Tech Stack

• React 19 + TypeScript + Vite
• Three.js — 3D rendering (WebGL2)
• GSAP + ScrollTrigger — scroll-driven animations
• Tailwind CSS — utility-first styling
• shadcn/ui — component primitives
• Lucide — icon library

Getting Started

npm install
npm run dev

Open http://localhost:3000.

Scripts

Script	Purpose
npm run dev	Start development server
npm run build	Type-check and build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Project Structure

src/
├── components/     # Reusable UI components
│   └── ui/         # shadcn/ui primitives
├── hooks/          # Custom React hooks
├── lib/            # Utility functions
├── pages/          # Page-level components
├── sections/       # Page sections (Hero, Map, Value, Alerts, Footer)
├── App.css         # Legacy styles
├── App.tsx         # Root component
├── index.css       # Tailwind + custom styles
└── main.tsx        # Entry point

License

MIT