🍽️ Ridha Foods - UMKM Kuliner

Platform e-commerce modern untuk UMKM kuliner dengan AI assistant terintegrasi

Demo • Fitur • Tech Stack • Quick Start • Arsitektur • API • Kontribusi

📸 Demo

🏠 Homepage Hero section dengan statistik dan menu unggulan	🤖 AI Assistant Chatbot multi-provider untuk rekomendasi menu
📋 Katalog Menu Filter interaktif berdasarkan kategori	📄 Detail Menu Halaman detail dengan pairing suggestions

🔗 Live Demo: Jalankan npm run dev dan buka http://localhost:3000 atau bisa akses mirror berikut https://testhac.biezz.my.id https://hackathonweb2.biezz.my.id https://kulinaai.biezz.my.id https://kulina-ai.vercel.app

✨ Fitur Utama

🏠 Landing Page yang Menarik

Fitur	Deskripsi
Hero Section	Statistik real-time (25K+ menu terjual, rating 4.8/5) dengan dual CTA
Menu Showcase	Grid menu unggulan dengan badge kategori dan label best seller
Selling Points	Animasi hover effect menggunakan Framer Motion
Testimonials	Review pelanggan dalam layout card yang elegan
CTA Section	Promosi catering dengan gradient background

🤖 AI Chat Assistant (RAG-Style)

┌─────────────────────────────────────────────────────────────┐
│  🤖 Chatbot Features                                        │
├─────────────────────────────────────────────────────────────┤
│  ✅ Multi-provider: Claude, Gemini, Kolosal                 │
│  ✅ Context-aware dengan data menu UMKM                     │
│  ✅ Rekomendasi porsi & pairing otomatis                    │
│  ✅ Sanitasi input (redaksi email & telepon)                │
│  ✅ Suggestion chips untuk quick questions                  │
└─────────────────────────────────────────────────────────────┘

📋 Katalog Menu Interaktif

7 Filter Dinamis: Semua, Pedas, Tidak Pedas, Keluarga, Personal, Dingin, Hangat
Responsive Grid: Otomatis menyesuaikan jumlah kolom
Static Generation: Pre-rendered untuk performa optimal
Detail Page: Gambar HD, tags, dan CTA ke AI chat

🎨 Desain Modern

🌙 Dark Theme dengan mesh gradient yang elegan
🖱️ Custom Cursor dengan snap-to-element effect
✨ Smooth Animations menggunakan Framer Motion
📱 Mobile-First responsive design

🛠️ Teknologi

Tech Stack Overview

┌─────────────────────────────────────────────────────────────┐
│                        FRONTEND                              │
├─────────────────────────────────────────────────────────────┤
│  Next.js 14.2      │  App Router, SSG, API Routes           │
│  React 18.3        │  Server Components, Hooks               │
│  TypeScript 5.6    │  Full type safety                       │
│  Tailwind CSS 3.4  │  Utility-first styling                  │
│  Framer Motion 12  │  Animations & transitions               │
│  Lucide React      │  SVG icon library                       │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│                        BACKEND                               │
├─────────────────────────────────────────────────────────────┤
│  API Routes        │  Serverless endpoints                   │
│  AI Proxy Layer    │  Multi-provider integration             │
│  Input Sanitizer   │  PII redaction & validation             │
└─────────────────────────────────────────────────────────────┘

Dependencies

Package	Version	Purpose
`next`	14.2.10	React framework
`react`	18.3.1	UI library
`typescript`	5.6.3	Type system
`tailwindcss`	3.4.14	CSS framework
`framer-motion`	12.23.25	Animations
`lucide-react`	0.556.0	Icons
`clsx`	2.1.1	Classname utility
`tailwind-merge`	3.4.0	Tailwind class merging

🚀 Quick Start

Prerequisites

node --version  # v18.0.0 atau lebih tinggi
npm --version   # v8.0.0 atau lebih tinggi

Installation

# 1️⃣ Clone repository
git clone https://github.com/yourusername/ridha-foods.git
cd ridha-foods

# 2️⃣ Install dependencies
npm install

# 3️⃣ Setup environment (opsional untuk AI chat)
cp .env.example .env.local
# Edit .env.local dengan API key Anda

# 4️⃣ Jalankan development server
npm run dev

🌐 Buka di Browser

http://localhost:3000

Environment Variables

Buat file .env.local di root project:

# ═══════════════════════════════════════════════════════════════
# 🔑 AI PROVIDER CONFIGURATION
# ═══════════════════════════════════════════════════════════════

# Kolosal API (required untuk provider Kolosal)
KOLOSAL_API_KEY=your_kolosal_api_key_here
KOLOSAL_MODEL=Llama 4 Maverick

# ═══════════════════════════════════════════════════════════════
# 🔗 OPTIONAL: Override Provider URLs
# ═══════════════════════════════════════════════════════════════

# PROVIDER_BASEURL_CLAUDE=https://your-claude-endpoint.com
# PROVIDER_BASEURL_GEMINI=https://your-gemini-endpoint.com
# PROVIDER_BASEURL_KOLOSAL=https://api.kolosal.ai/v1/chat/completions

📁 Arsitektur

Project Structure

📦 ridha-foods/
│
├── 📂 public/                    # Static assets
│   └── favicon.svg
│
├── 📂 src/
│   │
│   ├── 📂 app/                   # Next.js App Router
│   │   ├── 📄 layout.tsx         # Root layout (fonts, metadata)
│   │   ├── 📄 page.tsx           # Homepage
│   │   ├── 📄 globals.css        # Global styles
│   │   │
│   │   ├── 📂 menu/
│   │   │   ├── 📄 page.tsx       # Katalog menu + filter
│   │   │   └── 📂 [id]/
│   │   │       └── 📄 page.tsx   # Detail menu (SSG)
│   │   │
│   │   └── 📂 api/
│   │       ├── 📂 chat/
│   │       │   └── 📄 route.ts   # AI chat endpoint
│   │       └── 📂 health/
│   │           └── 📄 route.ts   # Health check
│   │
│   ├── 📂 components/            # React Components
│   │   ├── 📄 hero.tsx           # Hero section
│   │   ├── 📄 menu-showcase.tsx  # Menu grid
│   │   ├── 📄 selling-points.tsx # USP cards
│   │   ├── 📄 testimonials.tsx   # Customer reviews
│   │   ├── 📄 cta-section.tsx    # Call-to-action
│   │   ├── 📄 floating-chat.tsx  # 🤖 AI chatbot widget
│   │   ├── 📄 navbar.tsx         # Navigation
│   │   ├── 📄 cursor.tsx         # Custom cursor
│   │   ├── 📄 Tabs.tsx           # Tab component
│   │   ├── 📄 TabSelect.tsx      # Tab selector
│   │   └── 📂 ui/
│   │       └── 📄 card-hover-effect.tsx
│   │
│   ├── 📂 data/
│   │   └── 📄 menu.ts            # Menu data & types
│   │
│   └── 📂 lib/
│       ├── 📄 aiClient.ts        # AI provider integration
│       ├── 📄 aiSanitizer.ts     # Input sanitization
│       └── 📄 utils.ts           # Utility functions (cn)
│
├── 📄 tailwind.config.ts         # Tailwind configuration
├── 📄 next.config.mjs            # Next.js configuration
├── 📄 tsconfig.json              # TypeScript configuration
└── 📄 package.json               # Dependencies

Component Flow

┌─────────────────────────────────────────────────────────────┐
│                      layout.tsx                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │  Cursor + Navbar                                      │    │
│  └─────────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────────┐    │
│  │                    page.tsx                           │    │
│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐             │    │
│  │  │   Hero   │ │  Menu    │ │ Selling  │             │    │
│  │  │ Section  │ │ Showcase │ │  Points  │             │    │
│  │  └──────────┘ └──────────┘ └──────────┘             │    │
│  │  ┌──────────┐ ┌──────────┐                          │    │
│  │  │Testimoni │ │   CTA    │                          │    │
│  │  │   als    │ │ Section  │                          │    │
│  │  └──────────┘ └──────────┘                          │    │
│  └─────────────────────────────────────────────────────┘    │
│  ┌─────────────────────────────────────────────────────┐    │
│  │               FloatingChat (Fixed)                    │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘

🔌 API Reference

`POST /api/chat`

AI chat endpoint dengan multi-provider support.

Request

POST /api/chat HTTP/1.1
Content-Type: application/json

{
  "question": "Rekomendasi menu untuk 10 orang?",
  "provider": "claude",
  "context": "Katalog menu..."
}

Field	Type	Required	Description
`question`	string	✅	Pertanyaan user
`provider`	string	❌	`claude` \| `gemini` \| `kolosal` (default: `claude`)
`context`	string	❌	Context menu (auto-generated jika tidak ada)

Response

{
  "message": "Untuk 10 orang, saya sarankan Paket Keluarga...",
  "provider": "claude"
}

Error Responses

Status	Body	Cause
`400`	`{"error": "Pertanyaan kosong."}`	Empty question
`502`	`{"error": "Gagal memanggil AI"}`	AI provider error

`GET /api/health`

Health check endpoint.

Response

{
  "status": "ok",
  "timestamp": "2024-12-07T10:00:00.000Z"
}

📊 Data Model

MenuItem Type

type MenuItem = {
  id: string;              // Unique identifier (slug)
  name: string;            // Nama menu
  description: string;     // Deskripsi menu
  price: number;           // Harga (IDR)
  category: string;        // Kategori
  tags: string[];          // Tags untuk filtering
  spicyLevel?: number;     // Level pedas 1-5
  bestSeller?: boolean;    // Flag best seller
  imageUrl: string;        // URL gambar (Unsplash)
  profile: {
    spice: "pedas" | "tidak pedas";
    serve: "keluarga" | "personal";
    temp: "hangat" | "dingin";
  };
};

Sample Data

Menu	Price	Category	Profile
Rendang Rumah	Rp68.000	Lauk Rumahan	🌶️ Pedas, 👨‍👩‍👧‍👦 Keluarga, 🔥 Hangat
Ayam Bakar Madu	Rp54.000	Lauk Rumahan	🌿 Tidak Pedas, 👨‍👩‍👧‍👦 Keluarga, 🔥 Hangat
Nasi Liwet Komplit	Rp49.000	Nasi Box	🌿 Tidak Pedas, 👨‍👩‍👧‍👦 Keluarga, 🔥 Hangat
Sambal Matah Fresh	Rp18.000	Sambal	🌶️ Pedas, 👤 Personal, ❄️ Dingin
Es Cincau Kelapa	Rp22.000	Minuman	🌿 Tidak Pedas, 👤 Personal, ❄️ Dingin

🎨 Design System

Color Palette

┌─────────────────────────────────────────────────────────────┐
│  PRIMARY COLORS                                              │
├─────────────────────────────────────────────────────────────┤
│  Dark        #0b1021   ████████  Background utama           │
│  Brand 500   #2d6bfa   ████████  Primary brand color        │
│  Accent      #f59e0b   ████████  Highlights, CTAs           │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│  BRAND SCALE                                                 │
├─────────────────────────────────────────────────────────────┤
│  50   #f0f7ff   ░░░░░░░░                                    │
│  100  #d7e9ff   ░░░░░░░░                                    │
│  200  #b3d5ff   ▒▒▒▒▒▒▒▒                                    │
│  300  #82b6ff   ▒▒▒▒▒▒▒▒                                    │
│  400  #4d90ff   ▓▓▓▓▓▓▓▓                                    │
│  500  #2d6bfa   ████████                                    │
│  600  #1d4ae3   ████████                                    │
│  700  #173ab5   ████████                                    │
│  800  #153291   ████████                                    │
│  900  #132d78   ████████                                    │
└─────────────────────────────────────────────────────────────┘

Typography

Font	Usage	Weights
Space Grotesk	Headlines, display text	400-700
Manrope	Body text, paragraphs	400-600

Shadows

/* Card shadow - untuk elevated components */
shadow-card: 0 25px 50px -12px rgba(0,0,0,0.3)

/* Soft shadow - untuk subtle elevation */
shadow-soft: 0 10px 30px rgba(0,0,0,0.12)

📝 Available Scripts

Script	Command	Description
Dev	`npm run dev`	Start development server with hot reload
Build	`npm run build`	Create optimized production build
Start	`npm run start`	Run production server
Lint	`npm run lint`	Run ESLint for code quality
Type Check	`npm run typecheck`	TypeScript type checking

🔧 Configuration Files

`tailwind.config.ts`

Custom font families (Space Grotesk, Manrope)
Extended color palette dengan brand colors
Custom shadows (card, soft)
Mesh gradient background

`next.config.mjs`

Image optimization settings
External image domains whitelist

`tsconfig.json`

Path aliases: @/* → src/*
Strict mode enabled
ES2017 target

🔒 Security Features

Input Sanitization (`aiSanitizer.ts`)

// Otomatis redaksi data sensitif
sanitizeQuestion("Email saya john@gmail.com")
// → "Email saya [REDACTED_EMAIL]"

sanitizeQuestion("WA 081234567890")
// → "WA [REDACTED_PHONE]"

Server-Only Functions

AI client hanya berjalan di server
API keys tidak terekspos ke client
Environment variable validation

🤝 Kontribusi

Kami menyambut kontribusi dari komunitas!

How to Contribute

# 1️⃣ Fork repository
# Klik tombol "Fork" di GitHub

# 2️⃣ Clone fork Anda
git clone https://github.com/YOUR_USERNAME/ridha-foods.git

# 3️⃣ Buat branch fitur
git checkout -b feature/amazing-feature

# 4️⃣ Commit perubahan
git commit -m "feat: add amazing feature"

# 5️⃣ Push ke branch
git push origin feature/amazing-feature

# 6️⃣ Buat Pull Request
# Buka GitHub dan klik "New Pull Request"

Commit Convention

Type	Description
`feat`	Fitur baru
`fix`	Bug fix
`docs`	Dokumentasi
`style`	Formatting, styling
`refactor`	Refactoring code
`test`	Testing
`chore`	Maintenance

📄 License

MIT License

Copyright (c) 2024 Ridha Foods

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

📞 Kontak

🙏 Acknowledgments

Next.js - The React Framework
Tailwind CSS - Utility-first CSS
Framer Motion - Animation library
Lucide - Beautiful icons
Unsplash - Free images

Made with ❤️ for UMKM Indonesia 🇮🇩

⬆️ Kembali ke Atas

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
LICENSE		LICENSE
README.md		README.md
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

biezz-2/KulinaAI

Folders and files

Latest commit

History

Repository files navigation

🍽️ Ridha Foods - UMKM Kuliner

📸 Demo

✨ Fitur Utama

🏠 Landing Page yang Menarik

🤖 AI Chat Assistant (RAG-Style)

📋 Katalog Menu Interaktif

🎨 Desain Modern

🛠️ Teknologi

Tech Stack Overview

Dependencies

🚀 Quick Start

Prerequisites

Installation

🌐 Buka di Browser

Environment Variables

📁 Arsitektur

Project Structure

Component Flow

🔌 API Reference

POST /api/chat

Request

Response

Error Responses

GET /api/health

Response

📊 Data Model

MenuItem Type

Sample Data

🎨 Design System

Color Palette

Typography

Shadows

📝 Available Scripts

🔧 Configuration Files

tailwind.config.ts

next.config.mjs

tsconfig.json

🔒 Security Features

Input Sanitization (aiSanitizer.ts)

Server-Only Functions

🤝 Kontribusi

How to Contribute

Commit Convention

📄 License

📞 Kontak

🙏 Acknowledgments

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

`POST /api/chat`

`GET /api/health`

`tailwind.config.ts`

`next.config.mjs`

`tsconfig.json`

Input Sanitization (`aiSanitizer.ts`)

Packages