🧴 SkinGuide

A bilingual skincare product guide with an AI-powered recommendation chatbot.

Users browse a curated catalog of 65+ international skincare products, filter by skin need and budget range, and chat with SkinBot — an LLM-powered assistant with conversational memory that recommends products from the real catalog only.

🌐 Available in English and Spanish · 💬 AI chatbot answers in the user's language

---

✨ Features

• Catalog with combined filters — filter products by skin need (acne, dryness, dark spots, texture, sensitivity, anti-aging, oily skin) and budget range (budget / mid-range / high-end) simultaneously
• SkinBot, an AI assistant — powered by Llama 3.1 8B via Cloudflare Workers AI:
  • Recommends only from the real catalog (dynamic system prompt built from live database data)
  • Conversational memory — full chat history is sent on every request, so it remembers context, follow-ups, and even your name
  • Asks for your budget before recommending, and answers in the page's language
  • Markdown-formatted responses rendered with react-markdown
• Internationalization (i18n) — full EN/ES support with next-intl: localized routes (/en, /es), translated UI, and a language switcher
• Database seeding — one command populates 65 curated products, fully typed against the Prisma schema enums

🛠️ Tech stack

Layer	Tech
Frontend	Next.js 16 (App Router), React, TypeScript, Tailwind CSS
Backend	Next.js API Routes, Prisma ORM
Database	PostgreSQL 16 (Docker)
AI	Cloudflare Workers AI — llama-3.1-8b-instruct
i18n	next-intl

🏗️ Architecture highlights

• Dynamic system prompt: on every chat request, the API fetches the catalog from PostgreSQL and injects it into the LLM's system prompt — the bot always recommends from current data
• Conversational memory: the frontend accumulates the chat in React state and sends the full history with each request; the API translates it to the LLM's role/content message format
• Type-safe data layer: Prisma enums (Necesidad, Presupuesto) are generated as TypeScript types, so even the seed script is validated at compile time

🚀 Getting started

# 1. Install dependencies
npm install

# 2. Start PostgreSQL in Docker
docker run --name skindb -e POSTGRES_PASSWORD= \
  -e POSTGRES_DB=skinguide -p 5432:5432 -d postgres:16

# 3. Set up environment variables (see .env.example)
# DATABASE_URL, CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN

# 4. Run migrations and seed 65 products
npx prisma migrate dev
npx prisma db seed

# 5. Start the dev server
npm run dev

Built by Maria Juliana Arias · Portfolio