🏆 Winner of the Fraser Group challenge at HackNotts

Fraser Street is an immersive 3D marketplace: sellers set up virtual shops by turning product photos into 3D models, and buyers explore the street, inspect items on a podium, and add them to their basket - all in the browser.

• 3D product viewing with a podium for close inspection
• Sellers upload photos → auto‑generated 3D meshes placed in‑store
• Explore multiple branded shops along a virtual street
• Real‑time, multi‑user experience via WebSockets

• Frontend: Next.js, React, TailwindCSS, Three.js (@react-three/fiber, drei)
• Backend: Flask (image upload, processing, downloads)
• Realtime: Flask‑SocketIO, socket.io‑client
• 3D Generation: TripoSR (image → mesh)

1. Backend (Flask)

cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python app.py  # http://localhost:5000

2. Realtime server

cd realtime-server
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python app.py  # http://localhost:7001

3. Frontend (Next.js)

cd 3d-model
echo "NEXT_PUBLIC_WS_URL=http://localhost:7001" > .env.local
npm install && npm run dev  # http://localhost:3000

Open http://localhost:3000, upload a product photo as a seller to generate a 3D model, place it in your shop, then explore and add items to your basket as a buyer.