☕ Production-grade Next.js 16 / React 19 frontend for a coffee marketplace.
🚀 A real-world learning project with catalog browsing, authentication, cart, checkout, favorites, orders, reviews, responsive UI, client state, and test automation.
🌐 Live Demo · 🚀 Getting Started · 🔌 Backend API · 🟢 Good First Issues · 💬 Community
Live application interface: iced-latte.uk
Iced Latte is not just a demo repository. The broader project ecosystem has been noticed by developers, contributors, mentors, tooling companies, and open-source communities.
| Recognition | Why it matters | Proof |
|---|---|---|
| 1. 🔥 GitHub Trending May 22, 2024 |
The backend repository reached GitHub Trending and gained 85 stars in one day with 27 active contributors. | Archive |
| 2. 🥉 KaiCode 2024 Finalist Developer festival selection |
Selected among 412 applications for a developer festival backed by Huawei. | KaiCode 2024 |
| 3. 🛠️ JetBrains Open Source License Contributor tooling support |
JetBrains granted 8 All Products Pack licenses to support contributors. | JetBrains OSS |
| 4. 👨💻 Recommended by a GitHub Star Community endorsement |
Publicly recommended as a strong Java project example, with contributors sharing their experience. | LinkedIn post |
⭐ These milestones show that Iced Latte is a real collaborative engineering project, not a toy example.
Iced Latte Frontend is the customer-facing web application for the Iced Latte coffee marketplace. It connects to the Spring Boot backend and gives contributors practical experience with a real Next.js codebase, product flows, API integration, authentication, state management, responsive UI, and automated testing.
Iced Latte started in 2022 as a private pet project. It was later opened to the community to give junior engineers, students, and mentees practical experience in a real tech project with processes similar to those in actual tech teams. The project has since grown and earned recognition from the wider developer community.
⭐ If this project helps you learn or inspires you, please give it a star — it means a lot to the community!
Iced Latte is split into three focused repositories so contributors can work on backend, frontend, or QA independently.
| Repository | What it contains | Best for | Stats |
|---|---|---|---|
| 🔧 Backend | Java 25, Spring Boot 4, PostgreSQL, Redis, MinIO, Stripe, OpenAPI | Backend engineers, Java learners, API contributors |   |
| 🎨 Frontend | Next.js, React, TypeScript, TailwindCSS, product UI, frontend tests | Frontend engineers, UI contributors, React learners |   |
| 🧪 QA | Test automation, quality workflows, end-to-end coverage | QA engineers, test automation learners, release-quality contributors |   |
⭐ If this project helps you learn or inspires you, please give it a star — it helps more contributors discover the ecosystem.
📖 New here? Start with the Getting Started Guide.
It explains every step slowly: what to install, how to run the frontend, how to start the backend, how Docker fits in, and what to do when something fails.
✅ You need these installed first:
- Node.js 22.18+
- Docker Desktop
⚡ Already comfortable with the terminal? Use the short path:
git clone https://github.com/Sunagatov/Iced-Latte-Frontend.git
cd Iced-Latte-Frontend
cp .env.example .env.local
npm ci
npm run dev🔌 The backend must be running for products, login, cart sync, checkout, and orders to work. The Getting Started Guide shows the recommended backend + frontend setup.
🌐 Frontend: http://localhost:3000
🔌 Backend API: http://localhost:8083/api/v1
🧪 Run the checks:
npm run lint
npm run tsc -- --noEmit
npm test🎭 Run E2E tests:
npm run test:e2e🎭 E2E tests require the app running on
http://localhost:3000.
| Category | Technologies |
|---|---|
| 💻 Core frontend | Next.js 16, React 19, TypeScript 5, Node.js 22.18+ |
| 🎨 Styling & UI | TailwindCSS 4, React Icons, responsive layouts |
| 🧭 Routing & app shell | Next App Router, route handlers, layouts, providers |
| 📡 API integration | Axios, Axios Cache Interceptor, SWR |
| 🗃️ State management | Zustand, custom session orchestration |
| 📝 Forms & validation | React Hook Form, Yup |
| 🔐 Auth flows | Sign-in, sign-up, password reset, registration confirmation, token/session helpers |
| 🧪 Testing & quality | Jest 30, React Testing Library, Playwright, ESLint 9, Prettier, SonarCloud |
| 🚢 Delivery | Docker, GitHub Actions, Vercel config |
- 📄 Getting Started — local run modes, Docker setup, backend connection, environment variables, troubleshooting
- 📄 Architecture: Feature Packaging — feature-first frontend structure: keep UI, state, hooks, and helpers close to the owning feature
- 📄 Authentication — auth flows and frontend/backend auth behavior
- 📄 E2E Test Plan — Playwright coverage plan and scenarios
- 📄 Security Policy — security policy and vulnerability reporting
- 📄 Code of Conduct — community standards and expected behavior
- 📄 LICENSE — Apache License 2.0
src/
├── app/ # Next App Router entries, route handlers, shell layout, providers
│ ├── api/ # Next route handlers and proxy endpoints
│ ├── layout/ # Header, footer, and app-shell UI
│ └── providers/ # App bootstrap and global runtime wiring
├── features/ # Product/domain slices
│ ├── addresses/ # Delivery address management
│ ├── auth/ # Sign-in, sign-up, password reset, auth guards
│ ├── cart/ # Shopping cart flows and state
│ ├── checkout/ # Checkout flow
│ ├── favorites/ # Favorites
│ ├── home/ # Home page route and hero section
│ ├── orders/ # Orders and order success
│ ├── payment/ # Payment-facing frontend logic
│ ├── products/ # Catalog and product details
│ ├── reviews/ # Reviews and ratings
│ ├── session/ # Session orchestration across auth/cart/favorites
│ └── user/ # Profile and user account flows
├── shared/ # Cross-feature building blocks
│ ├── api/ # Axios client
│ ├── auth/ # Cookies, token helpers, session tracing
│ ├── config/ # Feature flags, routes, constants
│ ├── types/ # Shared TypeScript types
│ ├── ui/ # Reusable UI primitives
│ └── utils/ # Generic utilities
└── types/ # Global declaration files
Iced Latte is built in the open and welcomes contributors who want practical experience with a real Next.js/React codebase.
| I want to... | Start here |
|---|---|
| 🟢 Make my first contribution | Pick a good first issue and comment "I'm on it" |
| 🐛 Report a bug | Open an issue with clear observed vs expected behavior |
| 💡 Suggest a feature | Start a Discussion before implementation |
| 🔧 Make a larger change | Comment on the issue first so hidden constraints can be clarified |
Before opening a PR:
- 🎯 Keep the change focused on one concern
- ✅ Run
npm run lint,npm run tsc -- --noEmit, andnpm test - 🔗 Reference the related issue
- 📖 Read the full Contributing Guide
⚠️ By contributing, you agree to the project license and contribution terms described in LICENSE.
Iced Latte is licensed under the Apache License 2.0. See LICENSE for details.
The Iced Latte name, logo, domain, visual identity, and other brand assets are not licensed for use in a way that suggests official endorsement, partnership, or ownership without explicit written permission.
- 💬 Telegram community: Project community
- 👤 Personal Telegram: @lucky_1uck
- 📱 WhatsApp: Message me
- 📧 Email: [email protected]
- 🐛 Issues: GitHub Issues
❤️