batangas-lowkey-eatery

byJOHN PAUL OCINA

You are a senior full-stack developer and UI/UX designer. Build a responsive, mobile-first web application called "Batangas Lowkey Eatery" that works well on phones, tablets, and desktops, and can be installed as a PWA. ## PROJECT CONTEXT Batangas Lowkey Eatery is a free food directory that helps people find verified, hidden local eateries in Batangas City. It focuses on small eateries, street food, and turo-turo spots that delivery apps and tourist sites skip. It is built for locals, with barangay-level detail. Problems it solves: - Small local eateries are missing online - Facebook posts about food spots are scattered and disorganized - Delivery apps charge fees and markups - Reviews feel tourist-focused, not local - It is hard to tell which info is trustworthy ## USER ROLES 1. Diner (public, no login needed to browse): students, young workers, families who want cheap, filling meals nearby. 2. Vendor: eatery owners who want free exposure and optional promoted listings. 3. Admin: verifies listings and manages content. ## CORE FEATURES Diner side: - Home page with search bar, category chips (Eatery, Street Food, Turo-turo), and a "Near my barangay" filter - Search and filter by name, category, barangay, price range (budget-friendly), and "Verified only" - Eatery detail page: photos, description, address, barangay, opening hours, price range, menu highlights, contact info, map link, and a "Locally Verified" badge - "Discover Hidden Gems" section and a "Featured / Promoted" section (clearly labeled as promoted) - Local reviews and ratings (login required to post) - Save favorites (login required) - Share button (Facebook, Messenger, copy link) and a QR-code-friendly URL for each eatery Vendor side: - Register/login and claim or submit an eatery listing - Dashboard to edit details, photos, hours, and menu highlights - View basic stats (page views, searches, saves) - Request a promoted listing or featured spotlight Admin side: - Review and approve or reject submitted listings - Mark listings as "Locally Verified" with verification notes - Manage categories, barangays, users, and promoted listings - Dashboard with key metrics: monthly active users, number of verified listings, searches per user, vendors with promoted listings ## RESPONSIVE DESIGN REQUIREMENTS - Mobile-first, then scale up (breakpoints: 360px, 768px, 1024px, 1280px) - Bottom navigation bar on mobile; top navbar on desktop - Card grid: 1 column on mobile, 2 on tablet, 3-4 on desktop - Touch-friendly buttons (min 44px), readable fonts, high-contrast colors - Fast loading on slow mobile data: lazy-load images, compress assets, skeleton loaders - PWA support: manifest, service worker, installable "Add to Home Screen", basic offline page - Accessible: semantic HTML, alt text, keyboard navigation, ARIA labels ## DESIGN STYLE - Warm, friendly, local feel (food-inspired colors, with an accent matching a blue/green/red palette) - Clean cards, big food photos, simple icons - Short, plain-language text; mix of English and light Filipino/Batangueño tone is welcome ## SUGGESTED TECH STACK (can be swapped) - Frontend: Next.js (React) + Tailwind CSS - Backend/Database: Supabase (PostgreSQL, Auth, Storage) - Maps: Google Maps link or Leaflet/OpenStreetMap - Hosting: Vercel ## DATABASE (minimum tables) users (role), eateries (name, category, barangay, address, price_range, hours, description, contact, status, is_verified, is_promoted), eatery_photos, menu_items, reviews, favorites, barangays, categories, promotions, page_views, search_logs ## OUT OF SCOPE No online ordering, delivery, or payment processing. This is a directory only. Revenue comes from promoted listings and featured vendor spotlights. ## DELIVERABLES 1. Project folder structure 2. Database schema (SQL) with sample Batangas City data (at least 10 eateries across different barangays) 3. Full working code for all pages and components, explained step by step 4. Setup and deployment instructions 5. A short list of improvements for a future native mobile app phase Start by confirming the folder structure and database schema, then build page by page, beginning with the Home page and Eatery Detail page.