01 — What Is This App?
A restaurant discovery and ordering guide for New York City dining. The app fetches a JSON dataset of six curated NYC restaurants and renders a searchable, filterable grid. Users can browse restaurant cards, open a full detail panel with the complete menu, add dishes and drinks to a persistent cart, and proceed through a mock checkout flow.
The aesthetic mirrors a luxury editorial food publication: dark near-black backgrounds, Playfair Display serif headlines in warm cream, gold accents for prices and ratings, a grid layout with thin separator lines, and slide-in panels for detail views — all deliberately upscale and unhurried.
02 — App Behavior
- 01A loading screen with animated dots and the wordmark "TABLE" fades out once the JSON fetch resolves. A sticky header with an "Your Order (0)" cart button remains visible while scrolling.
- 02Hero section displays the guide name, tagline ("Dine Remarkably"), and a brief description — purely editorial, no interaction.
- 03Controls bar includes a live search field (filters by restaurant name, dish name, or neighborhood), dynamically generated borough filter buttons (built from fetched data), and a sort dropdown (Featured / Rating / Price / Name).
- 04Restaurant grid renders cards with large serif numbering, name, neighborhood, borough, address, average price per person, price level ($ to $$$$), and three top dish tags. Cards animate in with staggered fade-up delays.
- 05Clicking a card opens a right-side-sliding modal panel showing full stats, star rating display, a complete "Famous Dishes" list with prices and descriptions, and a Drinks list — each with an "+" add-to-order button.
- 06The order cart panel slides in from the right when "Your Order" is clicked. It shows all added items grouped with quantity controls (+ / −), and calculates subtotal, NYC tax (8.88%), 20% tip suggestion, and grand total.
- 07A "Place Order" button triggers a checkout confirmation overlay listing the total, restaurant names, and item count. A "Clear Order" button resets the cart with a toast notification. After checkout, cart is emptied.
- 08An animated toast notification slides up from the bottom whenever an item is added to the cart, showing the item name.
03 — Unexpected / Issues
Cart Not Persistent
The cart is in-memory only. Refreshing the page empties it completely — there's no localStorage save, which matters if users want to compare options before committing.
Mixed-Restaurant Orders
The app allows adding items from multiple restaurants simultaneously with no warning — real ordering apps block this or clearly group items. The checkout message quietly concatenates restaurant names.
No Restaurant Photos
The JSON apparently includes no image URLs, so all cards are text-only — surprising for a dining guide where food photography is usually central to the appeal.
Stars Half-Rendering
The star rating HTML function renders a Unicode "½" character rather than a proper half-star glyph, which looks inconsistent with the full ★/☆ characters used otherwise.