Litoral na Mesa — Delivery platform for coastal cities

About • Features • Technologies • Structure • Getting Started • Cities

Litoral na Mesa is a food delivery platform focused on coastal cities in São Paulo state — Caraguatatuba, Ilhabela, São Sebastião and Ubatuba. It connects customers to local restaurants and stores, offering a complete ordering experience from browsing to checkout.

This codebase handles the Frontend experience, built with Next.js 15 App Router + TypeScript + CSS Modules, and distributed as a Progressive Web App (PWA) with adaptive layouts for mobile and desktop.

---

📌 About

The platform serves the four main cities of the northern coast of São Paulo, offering users a familiar delivery app experience through any browser — no installation required. The app adapts its layout based on the user's device, delivering a native-like mobile interface and a rich desktop interface side by side from the same codebase.

---

✨ Features

Implemented

• Landing page with sections: hero, features, how it works, meals showcase, cities, footer
• Location selector to choose city before accessing the app
• Adaptive layout: dedicated mobile app shell and desktop web shell from the same codebase
• Shop listing with category filters, advanced filters, and promotional banners
• Shop profile with menu, delivery fees, reviews, and favorites
• Pizza builder with multi-flavor selection (up to 4 flavors with visual split preview)
• Shopping cart with item management and CartBar overlay
• Checkout flow with delivery method selection, payment method selection, and address input
• Order tracking page with status timeline
• My Orders page with order history and rating component
• My Addresses with address form management
• Coupons page
• Favorites page
• My Account page
• Side menu (mobile) and floating menu (desktop)
• Skeleton loading states for images and list items
• PWA support with manifest and service worker via next-pwa
• 29 food and product categories

Planned

• User authentication and session management
• Real-time order status updates
• Backend API integration
• Push notifications

---

🛠 Technologies

• Next.js — Framework baseado em React para criação de aplicações web rápidas
• TypeScript — Linguagem com tipagem forte para um código mais escalável
• CSS Modules — Estilização modular e com escopo isolado
• Framer Motion v12 — Biblioteca de animações para React
• next-pwa v5 — Suporte a PWA com service worker para Next.js

---

📁 Structure

src/
├── app/                         # Next.js App Router — pages and layouts
├── components/
├── styles/                      # Global CSS variables and base styles
├── contexts/                    # React contexts (Location, ShopPage, ShoppingCart)
├── controllers/                 # Business logic controllers (Addresses)
├── features/                    # Feature modules (auth types)
└── hooks/                       # Custom hooks (back layers, custom back action)

---

🚀 Getting Started

Requirements

• Node.js 18+
• npm or yarn

Running locally

# Clone the repository
git clone https://github.com/issagomesdev/lnm-delivery.git
cd lnm-delivery

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Available scripts

npm run dev        # Start development server with Turbopack
npm run build      # Build for production
npm run start      # Start production server
npm run lint       # Run ESLint
npm run test:pwa   # Build and serve to test PWA behavior

---

🏖 Cities

The platform currently covers the following coastal cities:

City	State
Caraguatatuba	São Paulo
Ilhabela	São Paulo
São Sebastião	São Paulo
Ubatuba	São Paulo