An open API service indexing awesome lists of open source software.

https://github.com/parthha12/tiktok-to-table


https://github.com/parthha12/tiktok-to-table

Last synced: 26 days ago
JSON representation

Awesome Lists containing this project

README

          

# TikTok-to-Table

Paste a TikTok recipe link → AI extracts the recipe → admin approves → kitchen cooks → customer tracks.

## Flow

```
Customer submits TikTok URL
→ oEmbed fetch + Claude Haiku extraction
→ Admin reviews & edits recipe
→ Admin approves (or rejects)
→ Kitchen staff starts cooking (with optional notes)
→ Kitchen marks done
→ Customer status page updates automatically
```

## Stack

- **Next.js 15** (App Router, Turbopack), TypeScript, Tailwind CSS v4
- **PostgreSQL + Prisma 6**
- **Clerk** for admin/kitchen auth (optional in dev)
- **Anthropic Claude Haiku** for recipe extraction (optional, graceful fallback)
- **Zod** for runtime validation

## Prerequisites

- Node.js 20+
- Docker (for local Postgres)

## Setup

### 1. Environment

```bash
cp .env.example .env
```

| Variable | Required | Purpose |
|----------|----------|---------|
| `DATABASE_URL` | Yes | PostgreSQL connection string |
| `ANTHROPIC_API_KEY` | No | AI recipe extraction via Claude Haiku |
| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | No | Auth for `/admin` and `/kitchen` |
| `CLERK_SECRET_KEY` | No | Auth for `/admin` and `/kitchen` |

Without Clerk keys the app runs in dev-only open mode (no login required, amber banners shown). Set them before deploying to production.

Without `ANTHROPIC_API_KEY` the app still works — it fetches the TikTok video title via oEmbed and uses it as a placeholder. Admin can always edit the recipe before approving.

### 2. Start Postgres

```bash
docker-compose up -d
```

### 3. Install and migrate

```bash
npm install
npm run db:push # create tables from schema
npm run db:seed # load demo orders (optional)
```

### 4. Run

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

---

## Routes

| Route | Auth | Purpose |
|-------|------|---------|
| `/` | Public | Submit a TikTok URL |
| `/order/[id]` | Public | Customer order status (polls every 8 s) |
| `/admin` | Required | All orders table |
| `/admin/orders/[id]` | Required | Edit recipe, approve, or reject |
| `/kitchen` | Required | Kitchen queue — start cooking, add notes, mark done |
| `/sign-in` | — | Clerk sign-in |

## API

| Method | Path | Auth | Description |
|--------|------|------|-------------|
| `POST` | `/api/orders` | Public | Submit TikTok URL → parse → create order |
| `GET` | `/api/orders` | Required | List all orders |
| `GET` | `/api/orders/:id` | Required | Order detail |
| `PATCH` | `/api/orders/:id` | Required | Edit recipe (title, ingredients, steps) |
| `POST` | `/api/orders/:id/approve` | Required | Approve order (`parsed` → `approved`) |
| `POST` | `/api/orders/:id/reject` | Required | Reject order (`parsed`/`approved` → `rejected`) |
| `POST` | `/api/orders/:id/kitchen` | Required | Start / complete cooking (accepts optional `notes`) |
| `GET` | `/api/kitchen/orders` | Required | Kitchen queue (approved + cooking) |
| `GET` | `/api/public/orders/:id` | Public | Customer-facing status |

## Recipe parser

`services/recipeParser.ts` runs in three tiers:

1. **TikTok oEmbed + Claude Haiku** — fetches video title/author, sends to Claude for structured extraction. Requires `ANTHROPIC_API_KEY`.
2. **TikTok oEmbed only** — uses the video title as recipe name with a placeholder body.
3. **Fallback** — deterministic placeholder if oEmbed fails (private video, invalid URL, rate-limited).

Admin can always edit the extracted recipe before approving.

## Scripts

| Script | Description |
|--------|-------------|
| `npm run dev` | Next.js dev server (Turbopack) |
| `npm run build` / `npm start` | Production build & start |
| `npm run lint` | ESLint |
| `npm run db:push` | Push schema changes (local dev) |
| `npm run db:migrate` | Create versioned migration |
| `npm run db:seed` | Load demo orders |
| `npm run db:studio` | Prisma Studio GUI |

## Project layout

```
app/ # Next.js routes and API handlers
components/ # Client-side UI components
lib/ # Prisma singleton, auth, logger, validations
services/ # Recipe parser (TikTok oEmbed + Claude)
prisma/ # schema.prisma + seed
types/ # Shared TypeScript interfaces
```

## Deployment (Vercel + Supabase)

- Set `DATABASE_URL` to Supabase's Postgres pooler connection string.
- Set `ANTHROPIC_API_KEY`, Clerk keys in Vercel Environment Variables.
- Run `prisma migrate deploy` against production DB from CI or locally with the production `DATABASE_URL`.

## License

Private — add a license as needed.