DEV Community

Nuh
Nuh

Posted on

Building Roastr: A Vibe Coded Community Platform for Coffee Lovers

Over the past two days, I sat down and decided to start working on a new app using v0, an app that I call Roastr, which was designed for coffee lovers despite me personally being someone who doesn’t drink coffee. Building the app was easy, and I thought it was pretty much perfect from the outside, until I ran it through a free security tester, which exposed 27 major vulnerabilities.

This project was a part of my summer internship program at Perfai Security, a platform which does security testing for vibe coded applications. The vision behind building Roastr was for it to serve as an interactive, lighthearted, game-like platform for coffee people. Think of Pokemon Go, but for coffee lovers.

The goal of this app was simple: provide an engaging game-like platform for the public while promoting local businesses. On Roastr, users can browse an interactive map (currently of just the San Francisco Bay Area), highlighting local coffee shops. Additionally, for each coffee shop Roastr highlights their drinks which can be collected by users for points. The points that they collect are then shown on a personal dashboard which has badges, the total amount of drinks they’ve collected, a drink rarity index and more.

Tech Stack

Framework & Language

Next.js 16 (App Router, Server Components, Server Actions, Route Handlers)
TypeScript
React 19 Styling & UI
Tailwind CSS v4
shadcn/ui (built on base-ui and Radix primitives)
Lucide icons
Custom coffee-themed design system with rarity color tokens Backend & Database
Supabase (PostgreSQL)
Row Level Security (RLS) for role-based authorization
PostgreSQL RPC functions & triggers (atomic XP awards, drink collecting, badge logic, rating recalculation) Authentication
Supabase Auth
Email/password sign-in with email confirmation
Google OAuth
Five roles: Guest, User, Coffee Shop Owner, Moderator, Admin Storage
Supabase Storage (image/photo uploads for collected drinks) Maps
React Leaflet
OpenStreetMap tiles
Results
From a security perspective there were lots of fundamental issues that would not have been immediately apparent. Running it through Perfai Security’s platform exposed 27 critical issues, all which I would not have been able to pick up on without the help of their platform. This taught me something. Vibe-coded applications can seem perfect from the outside, with good functionality, engaging UI, a modern feel and more, but behind the scenes these apps are still lacking on the security front, which can lead to major issues down the line once these apps are fully deployed and in use.

Some Challenges I Faced
Amongst the main challenges that I faced was the lack of credits for v0. Because of this I had to compromise on certain features which I would have wanted to add, but ended up leaving out since they might have been excessive, and instead focusing on the fundamentals.

Try my app below:
roastr-seven.vercel.app

Top comments (0)