🧸 ZAVIO — Premium Toy Shop

Zavio is a high-end e-commerce platform dedicated to premium toys. Built with a focus on high-performance, maintainable architecture, and an immersive user experience using modern web technologies.

---

✨ Key Features

• 🤖 AI-Powered Assistant: Integrated contextual chatbot using Groq Cloud (Llama 3.3 70B) to assist customers with product inquiries.
• 🛡️ Advanced Admin Dashboard: Robust management suite with Kanban order tracking, real-time analytics, and optimistic UI updates.
• 🗺️ Interactive Store Locator: Integrated Leaflet maps for finding physical store locations.
• 🎨 Premium UI/UX: Custom-crafted experience featuring glassmorphism, Framer Motion animations, and a responsive design system.
• 🏗️ Structured Architecture: Adheres to a strict MVC (Model-View-Controller) pattern with a dedicated service layer for scalability.

---

🛠️ Technology Stack

Layer	Technologies
Frontend	Next.js 16 (App Router), Framer Motion, Tailwind CSS 4
Backend	Next.js API Routes, NextAuth.js
Database	Drizzle ORM, MySQL (TiDB Cloud) / Local JSON Fallback
AI/ML	Groq SDK (Llama 3.3 70B), Ollama (Local support)
Mapping	Leaflet & React Leaflet

---

🏗️ Technical Architecture

The project follows a modular MVC structure to ensure clean separation of concerns:

zavio/
├── app/            ← Next.js App Router (Routing & API handlers)
├── controllers/    ← Business Logic & custom hooks
├── models/         ← Data schemas & validation logic
├── views/          ← Pure UI components & Layouts
├── services/       ← External API integrations & DB queries
├── lib/            ← Utility functions & shared config
└── public/         ← Static assets (images, icons)

System Diagrams

Detailed architectural diagrams are available in the root directory (PlantUML format):

• 📊 System Architecture: High-level overview of component interactions.
• 📉 Database ERD: Schema definition and entity relationships.
• 🛣️ API Design: Sequence diagrams for endpoint flows.
• 👤 Use Case: User and Admin interaction flows.

---

🚀 Getting Started

1. Installation

git clone https://github.com/camt-pathathai/953261-953202-term-project-tang-wang-jeng-co-ltd.git
cd zavio
npm install

2. Environment Setup

Create a .env.local file:

# Database Configuration
DB_HOST=your_host
DB_PORT=4000
DB_USER=your_user
DB_PASSWORD=your_password
DB_NAME=toys_shop
DB_SSL=true

# Authentication
NEXTAUTH_SECRET=your_secret
NEXTAUTH_URL=http://localhost:3000

# AI Integration
GROQ_API_KEY=your_key_here

3. Initialize Database

npm run setup

4. Run Development Server

npm run dev

---

👤 Admin Access

Credential	Value
URL	/admin
Email	admin@zavio.com
Password	Zavio@Admin2024

---

🤝 The Team (Tang Wang Jeng Co., Ltd)

• Day (เดย์): Full-Cycle Developer. Solely architected and built the entire platform (frontend, backend, database, and AI integration).
• Garfield (การ์ฟิลด์) and Kookkik (กุ๊กกิ๊ก): Minor frontend styling and copy tweaks (colors and text only).

---

Built with ❤️ for 953261-953202 Term Project