Moodboard meets Tinder — A fun way to collect design feedback from clients and stakeholders.
🌅 Note: Moodr has been sunsetted and is now open source. Read the original announcement: Moodr is an experiment by Dine
Moodr started as an internal joke at Dine and became a real tool. We imagined a platform where clients could browse moodboards and give feedback, just like they do on dating apps — swipe right to like, swipe left to pass.
- 📤 Upload designs — Drag and drop images to create a project
- 🔗 Share with anyone — No sign-up required for voters
- 👆 Swipe to vote — Intuitive Tinder-like voting experience
- 📊 Real-time insights — See results as votes come in
- 🎨 Perfect for — Brand identity, UI designs, color palettes, and more
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS 4
- Authentication: Clerk
- Database: PostgreSQL via Prisma (Neon recommended)
- Storage: Vercel Blob
- Animations: Framer Motion
- Deployment: Vercel
- Node.js 18+
- pnpm (recommended) or npm
- PostgreSQL database (we recommend Neon)
- Clerk account for authentication
- Vercel account for blob storage
-
Clone the repository
git clone https://github.com/dinehq/moodr.git cd moodr -
Install dependencies
pnpm install
-
Set up environment variables
cp .env.example .env.local
Fill in your credentials in
.env.local:POSTGRES_PRISMA_URL— Your PostgreSQL connection URL (pooled)POSTGRES_URL_NON_POOLING— Your PostgreSQL connection URL (direct)BLOB_READ_WRITE_TOKEN— Vercel Blob storage tokenNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY— Clerk publishable keyCLERK_SECRET_KEY— Clerk secret keyCLERK_WEBHOOK_SECRET— Clerk webhook secret
-
Set up the database
pnpm prisma generate pnpm prisma db push
-
Run the development server
pnpm dev
Open http://localhost:3000 to see the app.
Moodr uses Clerk webhooks to sync user data. Set up a webhook in your Clerk dashboard:
- Go to Webhooks in Clerk Dashboard
- Add endpoint:
https://your-domain.com/api/webhooks/clerk - Subscribe to:
user.created,user.updated,user.deleted - Copy the signing secret to
CLERK_WEBHOOK_SECRET
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm fix |
Format code with Prettier |
pnpm analyze-db |
Analyze database size and usage |
pnpm kill-orphans |
Clean up orphaned blob storage files |
pnpm reset-db |
The easiest way to deploy Moodr is with Vercel:
Make sure to:
- Set up all environment variables in Vercel
- Connect your PostgreSQL database
- Create a Vercel Blob store
- Configure Clerk webhooks for your production URL
moodr/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── admin/ # Admin dashboard
│ ├── projects/ # Project pages
│ └── ...
├── components/ # React components
├── lib/ # Utilities and helpers
├── prisma/ # Database schema
├── public/ # Static assets
└── scripts/ # Utility scripts
Moodr has a simple role system:
| Role | Projects | Images per Project |
|---|---|---|
| Free | 3 | 10 |
| Pro | Unlimited | Unlimited |
| Admin | Unlimited | Unlimited |
Roles are managed via Clerk's privateMetadata.
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Built with ❤️ by Dine — A design studio based in Beijing with more than ten years of experience, creating brand identities and digital experiences that connect and inspire.
Moodr was an experiment. Thanks to everyone who tried it out!