Localpinned

• 

  Local pinned preview

Inspiration

We kept walking past independent cafés, pottery workshops and bookshops in our neighbourhoods that had no online presence beyond a flaky Instagram page. Meanwhile, high-street chains and delivery giants dominated every map and search result. We wanted a discovery tool that felt like a curated local magazine instead of a yellow-pages directory — one that champions independents, surfaces events, and gives owners a direct way to be seen and to earn.

What it does

Local Pinned is a map-first discovery board for independent UK businesses and community events.

• Discover — Browse an interactive abstract map, filter by category, search by town or business name, and open editorial- style business profiles with stories, photos, reviews, events and offers. • Save & RSVP — Users can favourite businesses and RSVP to local workshops or markets. • Pin a business — Owners add themselves through a step-by-step form; the listing appears immediately on the map. • Claim & upgrade — Owners can claim a listing and upgrade to Premium (£9/mo) or Featured (£29/mo) via Stripe Checkout, unlocking verified badges, extra photos and promoted map placement. • Events Music Hub — A creative tool that uses the Web Audio API and AI to generate procedural soundscapes and promotional videos for events, with optional YouTube upload via Firebase Auth.

If no Stripe key is configured, the claim flow falls back to demo mode so the UI can still be evaluated.

How we built it

• Frontend: Vite 6 + React 19 + TypeScript + Tailwind CSS 4, with motion for animations. • Backend: Express server written in TypeScript, run with tsx. • Payments: Stripe SDK for Checkout sessions (/api/create-checkout-session, /api/checkout-session) and audio-product checkout. CLI : Codex was use to generate the framework and architecture direction. • AI & media: Open AI and Google Gemini API for mood analysis, video-prompt generation and lyrics; Replicate API for AI music generation; fluent-ffmpeg and ffmpeg-static for audio/video rendering. • Auth/storage: Firebase Auth for Google sign-in and optional YouTube uploads; browser localStorage for favourites, RSVPs and user-added listings in this prototype. • Design system: A warm, editorial palette (Alabaster, Terracotta, Sage Moss) documented in DESIGN.md.

Challenges we ran into

1. No persistent backend yet. Favourites, RSVPs and listings live in localStorage, so data is tied to one browser.
2. Stripe trust model. The app currently applies premium status on the frontend after the success redirect; without webhooks, a determined user could refresh the success URL and gain premium without paying.
3. Tunnel reliability for demos. Free tunnels (localtunnel, Cloudflare quick tunnels) kept returning 503/400 because of network restrictions and host-checking, so we cycled through several providers to get a stable public link.
4. AI provider fallbacks. Gemini rate limits and API key failures meant building fallback chains to OpenRouter and keyword- based heuristics so the music and mood tools keep working.
5. Large bundle size. Firebase and motion push the production JS bundle over 500 kB, which we will code-split later.

Accomplishments that we're proud of

• Built a full, styled full-stack prototype with real Stripe checkout in a short time. • Integrated an end-to-end AI audio pipeline: text → mood analysis → music generation → FFmpeg rendering → optional YouTube upload. • Created a cohesive editorial design system that feels warm and artisanal rather than generic. • Made the app demo-friendly: it runs end-to-end without any .env configuration, falling back gracefully to demo data.

What we learned

• Frontend-only state is fast to prototype but fragile. Moving state to a backend is the first blocker before any real revenue or user accounts can work. • Payment flows need verification, not just redirects. Stripe webhooks are essential for production trust. • Tunnels are great for demos but not products. A public deploy (Vercel/Netlify + a hosted backend) is the only reliable way to share a hackathon project with judges. • AI APIs are powerful but unpredictable. Fallbacks and keyword heuristics are necessary for a smooth user experience.

What's next for Local Pinned

1. Backend & database — Replace localStorage with PostgreSQL/Supabase and add consumer/business accounts.
2. Stripe webhooks — Add /api/stripe/webhook to verify checkout.session.completed and invoice.paid events.
3. Stripe Products/Prices — Move from inline price_data to durable Product/Price objects and customer subscriptions.
4. Owner analytics dashboard — Real metrics for profile views, map-pin clicks, offer redemptions and favourites.
5. Paid event ticketing — Sell tickets to workshops with a 9% platform fee for Local Pinned.
6. Deploy to production — Host the frontend and backend on a public platform with a custom domain.

Built With

• codex