Petit Meme

petit-meme.io

Meme management and sharing platform with video support, premium subscriptions, and a TikTok-style reels experience. Built as a full-stack React 19 application with server-side rendering.

Available in French and English.

Features

• Video meme library with HLS streaming and reels navigation
• User authentication (email/password, Twitter OAuth)
• Bookmarking and favorites system
• Premium subscriptions via Stripe
• Full-text search powered by Algolia
• Admin dashboard for content management (upload, moderation, analytics)
• Meme import directly from Twitter/X URLs
• SEO-optimized with structured data and dynamic Open Graph images
• Transactional emails (verification, password reset)

Tech Stack

Category	Technology
Framework	TanStack Start (React 19, SSR, Nitro)
Routing	TanStack Router (file-based)
Data Fetching	TanStack Query
Forms	TanStack Form
Database	Prisma ORM + PostgreSQL
Auth	Better Auth
Payments	Stripe
Video	Bunny CDN + HLS.js
Search	Algolia
Email	Resend + React Email
Styling	Tailwind CSS 4 + shadcn/ui
Validation	Zod
State	Zustand
Analytics	Algolia Analytics

Infrastructure

Service	Purpose
Vercel	Hosting (serverless, auto-deploy from main)
Neon	PostgreSQL database
Bunny CDN	Video storage and HLS delivery
Stripe	Payment processing and subscriptions
Algolia	Search indexing
Resend	Transactional emails
Algolia	Search and analytics

Prerequisites

• Node.js 24
• pnpm 12
• A PostgreSQL database
• Stripe account (test or live)
• Bunny CDN account with a video library
• Algolia account with a search index
• Resend account

Getting Started

1. Clone and install

git clone https://github.com/viclafouch/petit-meme
cd petit-meme
pnpm install

2. Environment variables

Copy the example file and fill in your values:

cp .env.example .env.development

3. Database setup

Push the schema to your database:

pnpm exec prisma migrate dev

4. Run the development server

pnpm run dev

Database Migrations

Prisma Migrate is used to manage schema changes safely across environments.

Local development

After modifying prisma/schema.prisma:

pnpm exec prisma migrate dev --name descriptive_name

This creates a migration file, applies it to the local database, and regenerates the Prisma Client.

Production deployment

Vercel auto-deploys on push to main. After a deploy that includes new migrations:

pnpm run prisma:migrate:prod

This uses .env.production (pulled via vercel env pull --environment=production .env.production, the flag is required or the CLI pulls the development scope) which contains the production DATABASE_URL. It applies only pending migrations and is safe and idempotent.

Rules

• Migrations must be additive only: new optional fields, new indexes, new tables
• Never drop or rename columns, tables, or enums on production
• New required fields must have a @default() value
• Never use prisma db push on production
• Always review the generated SQL before committing

Stripe Webhooks

Stripe webhooks handle subscription lifecycle events (creation, renewal, cancellation).

Local development

Use the Stripe CLI to forward events to your local server:

stripe listen --forward-to localhost:3000/api/auth/stripe/webhook

The CLI outputs a webhook signing secret (whsec_...). Add it to your .env.development as STRIPE_WEBHOOK_SECRET.

Production

1. Go to Stripe Dashboard > Webhooks
2. Add endpoint: https://yourdomain.com/api/auth/stripe/webhook
3. Select the relevant subscription and checkout events
4. Copy the signing secret to your production environment

Available Scripts

Command	Description
pnpm run dev	Start development server
pnpm run build	Build for production
pnpm start	Start production server
pnpm run check	Typecheck, lint, Knip, unit tests and format check, cached by Turbo
pnpm run typecheck	TypeScript check
pnpm run lint	oxlint
pnpm run lint:fix	Auto-fix lint issues
pnpm run knip	Find unused files, exports and dependencies
pnpm run prisma:migrate:dev	Apply pending migrations (via .env.development)
pnpm run prisma:migrate:prod	Apply pending migrations (via .env.production)
pnpm run prisma:seed:dev	Seed database (via .env.development)
pnpm run email:dev	Preview email templates on port 3001

Project Structure

src/
├── routes/        # Pages (TanStack Router file-based routing)
├── server/        # Server functions (auth, memes, admin, payments)
├── components/    # React components organized by domain
├── lib/           # Library integrations (auth, algolia, stripe, bunny)
├── constants/     # App constants, types, and env validation
├── helpers/       # Pure utility functions
├── utils/         # Business logic utilities
├── hooks/         # Custom React hooks
├── stores/        # Zustand stores
├── db/            # Prisma client and generated types
└── i18n/          # Internationalization

prisma/            # Schema and migrations
emails/            # React Email templates
crons/             # Scheduled jobs (Algolia sync, Bunny updates)

Deployment

The app is deployed on Vercel with automatic deploys from the main branch.

Vercel automatically installs dependencies, builds the app, and deploys serverless functions. Database migrations must be applied separately after each deploy that includes schema changes.

License

Private - All rights reserved