batangas-lowkey-eatery-2

byPaul Black

You are a front-end developer and UI/UX designer. Build a simple, responsive, mobile-first prototype website called "Batangas Lowkey Eatery" for a class presentation. ## ABOUT THE PROJECT 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. ## IMPORTANT RULES - FRONTEND ONLY. No backend, no database, no login, no API calls. - Use hardcoded sample data stored in a single JavaScript file (data.js) or JSON array. - Must work when opened locally and look good on both phone and desktop. - Keep the code simple and easy to explain. ## TECH - Plain HTML, CSS, and JavaScript (no frameworks), OR a single-file React + Tailwind app. Choose the simplest option. - Use free images (Unsplash links or placeholder images). ## PAGES / SECTIONS 1. Home - Header with logo text "Batangas Lowkey Eatery" and a short tagline: "Find hidden, verified local eats in Batangas City" - Search bar - Filter chips: All, Eatery, Street Food, Turo-turo - Dropdown filters: Barangay and Price Range (₱ / ₱₱ / ₱₱₱) - "Verified only" toggle - Grid of eatery cards 2. Eatery Card - Photo, name, category, barangay, price range, rating, and a green "Locally Verified" badge 3. Eatery Detail (modal or separate section) - Large photo, description, address, opening hours, menu highlights, contact number, "Open in Maps" button, and a Share button (copy link) 4. Featured Section - 2-3 eateries labeled "Promoted" to show the revenue model 5. Footer - Short "About Us" and group name (Group 7) ## FUNCTIONALITY (all done with JavaScript on the sample data) - Live search by name - Filter by category, barangay, price, and verified only - Click a card to open its details - "Save to Favorites" heart button (store in localStorage, no login) - Show "No results found" message when filters match nothing ## SAMPLE DATA Create 10 sample eateries in different Batangas City barangays. Each has: id, name, category, barangay, address, priceRange, rating, isVerified, isPromoted, hours, description, menuHighlights, contact, image. ## RESPONSIVE DESIGN - Mobile-first, breakpoints at 768px and 1024px - Cards: 1 column on mobile, 2 on tablet, 3 on desktop - Bottom navigation bar on mobile (Home, Featured, Favorites), top navbar on desktop - Buttons at least 44px tall, readable fonts, high contrast - Simple loading effect and smooth hover animations ## DESIGN STYLE Warm, friendly, local feel. Use a clean color palette (blue for headings, green for the verified badge, red for accents). Big food photos, rounded cards, simple icons. ## DELIVERABLES 1. Complete code (index.html, style.css, script.js, data.js) in separate code blocks 2. Short instructions: "Save the files in one folder and open index.html" 3. A 3-sentence explanation I can say during my presentation about how it works Keep everything simple and beginner-friendly.