PinStory

Inspiration

Growing up in Kenya, I was raised on oral storytelling traditions. Elders shared tales tied to specific places — a hill where ancestors settled, a river where a love story began, a market where a trade deal was struck. These stories gave places meaning beyond their physical presence.

In today's digital age, that connection between place and story is fading. We pass through cities unaware of the deeply personal human experiences rooted in each location.

The idea for PinStory came during a quiet walk in Nairobi. I saw an elderly man sitting under a baobab tree and wondered: What stories has this tree witnessed?

That moment sparked the realization:
Every place is layered with memories — first kisses, moments of joy or grief — yet these stories often vanish. PinStory aims to preserve and share these experiences for others to discover.

What it does

PinStory is a Progressive Web App (PWA) for location-based storytelling. It enables users to:

• Share personal stories, memories, or local legends tied to specific locations.
• Discover narratives from others based on where they are.
• Experience places more meaningfully through human stories layered onto the map.

Imagine walking through a city and hearing someone’s real-life experience tied to that very spot.

How we built it

Frontend

• React: Modular component-based structure.
• Vite: Fast build and development tooling.
• Tailwind CSS: Rapid and responsive styling.
• Lucide React: Consistent iconography.

Backend & Database

• Supabase:
  • PostgreSQL for structured data (users, stories, likes, views, ads).
  • Authentication with Google OAuth.
  • Row-Level Security (RLS) for fine-grained access control.
  • Database functions/triggers for counting views, likes, and ad metrics.

Key Features

• Story Creation: Users add stories with images and map locations.
• Interactive Feed: Infinite scroll with native ads for free users.
• Engagement Tools: Likes and view tracking with basic analytics.
• AI Audio: ElevenLabs integration for text-to-speech storytelling.
• Premium Subscription: Ad-free, early story access via mock RevenueCat.
• PWA Features: Offline content caching, installable on home screen.

Challenges we ran into

• Data Modeling & RLS: Balancing public story access with private user data.
• Feed Performance: Injecting ads and handling lazy loading smoothly.
• API Reliability: Handling rate limits and failures from ElevenLabs and Google Maps.
• Authentication Flow: Managing state between guest and authenticated sessions.
• Monetization Design: Seamless ad integration without degrading UX.
• Cross-Platform Support: Ensuring consistent UI across devices and browsers.

Accomplishments that we're proud of

• Innovation in Storytelling:
  PinStory introduces a new social paradigm — follow places, not people.

• Inclusive Design:
  Serves both tourists and locals. Anonymous posting empowers vulnerable storytelling.

• Technical Achievement:
  Built a performant, offline-capable, location-based app using modern web tools.

What we learned

• PWAs Are Powerful:
  Service workers, offline mode, and install prompts bring native-like UX to the browser.

• Supabase Mastery:
  RLS, auth, and database functions provided a scalable backend-as-a-service experience.

• API Integrations:
  Learned to handle authentication, rate limits, and fallback strategies for ElevenLabs and Google Maps.

• Frontend Optimization:
  Infinite scrolling and lazy loading enhanced performance with large datasets.

• Monetization UX:
  Blending ads and subscriptions while preserving a clean interface was a key design skill.

What's next for PinStory

• Launch to the Public
• Gather User Feedback
• Iterate Based on Real-World Usage
• Explore More Monetization Options
• Integrate with Additional Platforms (e.g. iOS/Android Storefronts)

Built With

• css
• html5
• javascript
• sql
• supabase
• typescript