Skip to content

ericgitangu/interactive-birthday-card

Repository files navigation

🎉 Interactive Birthday Card Template 🎉

Logo

A powerful, interactive, and shareable birthday card built with Next.js, Tailwind CSS, Turbopack, upstash, vercel blob storage, redis, postgres and Prisma.


🌟 Features

🎂 Personalized Cards

Create unique cards with tailored visuals and messages.

Credits to Sora by OpenAI for video generation.

Card


🔥 Interactive Candles

Blow out candles with dynamic animations based on the user's generation.

Candles


✍️ Signatures and Wishes

Invite friends to sign the card and leave heartfelt messages.

Signatures


🔗 Shareable Links

Easily share personalized cards with secure OAuth-based authentication.

Shareable


🖼️ Gallery

Share personalized images in an auto-scroll gallery, performs manipulations to ensure the perfect fit. Images are drawn randomly through the app, dynamic image rendering based on the slug (params), Served from Vercel Blobs and optimized in addition to NextJS Image optimization for lazy performant loads.

Gallery


🛠 Built With

  • Next.js: For server-side rendering and the App Router.
  • Turbopack: For lightning-fast builds.
  • Tailwind CSS: For responsive and beautiful UI.
  • Prisma: For database ORM.
  • NextAuth: For secure OAuth.
  • Upstash: KV Store
  • Vercel Storage Blob: Store static assets -images acts as our CDN
  • Redis: Storage of hot key pair for user's birthday wishes

Next.js Tailwind CSS Prisma NextAuth


🚀 Getting Started

Prerequisites

  • Node.js Node.js v18+
  • Redis Upstash Redis account for storage.

License

This project is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International. See the LICENSE file for details.