A modern full-stack web application that enables customers to browse menus, customize orders, and make seamless transactions at a coffee shop — all in real time.

---

📚 Table of Contents

• Overview
  • Features
• Tech Stack
• Getting Started

---

📖 Overview

This application is built to streamline and modernize the coffee shop ordering experience. Users can place orders online, track their order status, and pay directly through the platform. The app also supports admin functionalities for product and order management.

✨ Features

• Interactive Menu & Custom Orders
  Customers can browse the full coffee menu, choose drink sizes, customize preferences (e.g., sweetness, toppings), and add to cart.

• Admin Dashboard
  Admin users can add/edit menu items, manage stock, handle orders, and track transactions.

• Online Payment Integration
  Integrated with Midtrans for secure online payments via bank transfers, e-wallets, and credit cards.

• Authentication & Authorization
  Secure login, registration, and role-based access control using Supabase Auth.

• Responsive UI
  Optimized for all devices using Tailwind CSS with a clean and intuitive interface.

---

🛠 Tech Stack

Frontend

• React
• TypeScript
• Vite
• Tailwind CSS

Backend

• Express.js
• Prisma ORM
• Supabase (Auth & Storage)
• Midtrans (Payment Gateway)
• UltraMsg (Whatsapp API)

Database

• PostgreSQL (managed by Supabase)

---

🚀 Getting Started

To run this app locally, follow the steps below:

📦 1. Clone the Repository

git clone https://github.com/mickooos/setengahLima.git
cd setengahLima

📁 2. Install Dependencies

# Client
cd client
npm install 

# Admin
cd admin
npm install 

# Server
cd server
npm install

🔐 3. Setup Environment Variables

Create .env files in both client/, admin/ and server/ directories.

server/.env

DATABASE_URL=your_postgres_database_url
SUPABASE_URL=https://your-supabase-url.supabase.co
SUPABASE_KEY=your-supabase-service-role-key
MIDTRANS_SERVER_KEY=your-midtrans-server-key
ULTRAMSG_API_URL=your-ultramsg-api-url
ULTRAMSG_INSTANCE_ID=your-ultramsg-instance
ULTRAMSG_API_TOKEN=your-ultramsg-api-token

client/.env

VITE_API_URL=your-api-url
VITE_MIDTRANS_API_URL=your-midtrans-api-url
VITE_MIDTRANS_CLIENT_KEY=your-midtrans-client-key

admin/.env

VITE_API_URL=your-api-url
VITE_REACT_ADMIN_ACCESS_KEY=your-admin-access-key

🧱 4. Database Setup

Use Prisma to push the schema and generate the client:

cd server
npm run migrate
npm run seed

🏃 5. Run the App

# Start server
cd server
npm run serve

# Start client && admin (in another terminal)
cd client 
npm run dev

cd admin
npm run dev

App Preview

📚 Resources

• Midtrans Documentation
• Supabase Documentation
• Prisma ORM Documentation
• React Documentation
• Tailwind CSS Documentation
• Vite Documentation
• Express.js Documentation
• UltraMsg