A modern React/Next.js coffee marketplace frontend — built in the open, for engineers who want real experience.
🌐 Live Demo · 🟢 Good First Issues · 💬 Community
| Repository | ⭐ Stars | 🍴 Forks |
|---|---|---|
| 🔧 Backend |  |
 |
| 🎨 Frontend |  |
 |
| 🧪 QA |  |
 |
⭐ If this project helps you learn or inspires you, please give it a star — it means a lot to the community!
📋 Prerequisites: Node.js 20+, Docker Desktop
# 1. 📥 Clone
git clone https://github.com/Sunagatov/Iced-Latte-Frontend.git && cd Iced-Latte-Frontend
# 2. 📝 Copy the example env file
cp .env.example .env.local
# 3. 📦 Install dependencies
npm ci
# 4. ▶️ Run
npm run dev🌐 App runs at http://localhost:3000
⚠️ The backend must be running for products and login to work. See Getting Started Option A to start it with one Docker command.
💡 See Getting Started for Docker setup, E2E tests, and troubleshooting.
🧪 Run the tests:
npm test
Live application interface: iced-latte.uk
Iced Latte is a non-profit sandbox project started in 2022 as a private pet project, then 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 first participants were students, Telegram channel subscribers, and mentees from ADPList and Women In Tech. The project has since grown and earned recognition from both the open-source community and the wider tech community.
⭐ If this project helps you learn or inspires you, please give it a star — it means a lot to the community!
Iced Latte has earned recognition from the broader tech community.
- The backend repository reached GitHub's Trending page — listed among resources "the GitHub community is most excited about today" — gaining 85 stars in a single day with 27 active contributors. (link to the archive)
- Iced Latte made it to the finals of KaiCode — an annual open-source festival launched by Huawei, which positions itself as an incubator of open-source technologies and rewards the most promising projects. Iced Latte was selected among 412 applications and placed in the third group of 26 finalist repositories considered for the prize. Jury members are not allowed to assess their own projects, so the selection was fully independent.
- Iced Latte was recognized by JetBrains — a leading software company specializing in intelligent development tools. As an active participant in the open-source community, JetBrains supports recognized global open-source projects by providing complimentary licenses for non-commercial development. JetBrains granted Iced Latte 8 free All Products Pack licenses (February 2024, License Reference No. D379769990).
- Iced Latte was recommended by Eddie Jaoude — one of the most influential open-source experts, a GitHub Star with 174K followers on X and 17.6K on LinkedIn — who called it a great example of a Java open-source project. Many Iced Latte contributors shared their positive experience in the comments.
| 📂 Category | 🔧 Technology |
|---|---|
| 💻 Core | Next.js 15 + TypeScript 5 + React 19 |
| 🗃️ State Manager | Zustand |
| 🎨 CSS Framework | TailwindCSS 4 |
| 📡 Data Fetching | Axios + SWR |
| 📝 Forms | React Hook Form + Yup |
| 🧪 Testing | Jest, React Testing Library, Playwright |
| 🚢 Deployment | Docker, GitHub Actions, Vercel |
src/
├── 📁 app/ # Next.js App Router pages
│ ├── 📁 api/ # API proxy route (avoids CORS)
│ ├── 📁 cart/ # Cart page
│ ├── 📁 checkout/ # Checkout page
│ ├── 📁 favourites/ # Favourites page
│ ├── 📁 orders/ # Orders page
│ ├── 📁 product/ # Product detail page
│ ├── 📁 profile/ # User profile page
│ ├── 📁 signin/signup/ # Auth pages
│ └── 📄 layout.tsx # Root layout
├── 📁 features/ # Feature-based modules
│ ├── 📁 addresses/ # Delivery addresses
│ ├── 📁 auth/ # Auth (login, register)
│ ├── 📁 cart/ # Shopping cart
│ ├── 📁 favorites/ # Favourites
│ ├── 📁 products/ # Product catalog
│ ├── 📁 reviews/ # Product reviews
│ └── 📁 user/ # User profile
└── 📁 shared/ # Cross-feature shared code
├── 📁 api/ # Axios client
├── 📁 components/ # Shared UI components
├── 📁 providers/ # App-level providers
├── 📁 types/ # Shared TypeScript types
└── 📁 utils/ # Utility functions
🚫 No Kubernetes, no cloud-managed services — the app ships as a Docker container directly via SSH.
The full production setup is in the backend docker-compose.yml. On every merge to master, GitHub Actions builds and pushes a Docker image to production automatically. CI runs on every push and PR to development. Only maintainers can merge to master.
🔍 Explore the .github/ folder for the full CI/CD pipeline.
🎉 Contributions are welcome. Here's how to get involved:
| 🎯 Situation | 🚀 Action |
|---|---|
| 🐛 Found a bug | Open an issue with the bug label |
| 💡 Want a feature | Start a Discussion first |
| 👨💻 Ready to code | Pick a good first issue, comment "I'm on it" |
| 🔧 Big change | Comment on the issue before writing code — many tickets have hidden constraints |
| 🏷️ Label | 📝 Meaning |
|---|---|
🟢 good first issue |
Simple, well-scoped — great for first-timers |
🔴 bug |
Something is broken |
🔵 high priority |
Do this first |
🟡 enhancement |
Accepted improvement to an existing module |
🟠 new feature |
New functionality — discuss before starting |
⚪ idea |
Needs design discussion — don't implement yet |
- 🔍 Search existing issues before opening a new one
- 📝 Clearly describe observed vs expected behaviour
- 🚀 For minor fixes, just open a PR directly
- 🎯 Keep PRs focused — one concern per PR
- ✅ Make sure
npm run testpasses locally before pushing - 🔗 Reference the issue number in your PR description
🤝 Forks are welcome. Please share useful features back via PR so the community benefits and your fork stays easy to sync.
📜 CC BY-NC 4.0 — free for educational and personal use with author attribution. Commercial use requires explicit written permission from the author (zufar.sunagatov@gmail.com).
- 💬 Telegram community: Zufar Explained IT
- 👤 Personal Telegram: @lucky_1uck
- 📱 WhatsApp: Message me
- 📧 Email: zufar.sunagatov@gmail.com
- 🐛 Issues: GitHub Issues