NextWish - Birthday Greeting Generator (Next.js)

A modern Next.js application for creating beautiful personalized birthday greetings with multiple templates.

Features

• 🎨 3 Beautiful Templates: Classic Birthday Card, 3D Photo Carousel, Interactive Gift Card
• 📸 Custom Photo Upload: Add personal photos to greetings
• ⏱️ 2-Day Link Expiry: Greeting links automatically expire after 2 days
• 🔗 Shareable Links: Easy sharing via WhatsApp, Email, Twitter
• 🚀 Built with Next.js 15: Modern React framework with App Router
• 📱 Fully Responsive: Works perfectly on all devices
• ⚡ Vercel Ready: Optimized for Vercel deployment

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Deployment: Vercel
• File Upload: Formidable
• UUID Generation: uuid

Project Structure

nextwish-app/
├── app/
│   ├── api/
│   │   ├── templates/route.ts          # Get available templates
│   │   ├── generate/route.ts           # Generate greeting
│   │   ├── greeting/[id]/route.ts      # Greeting info/delete
│   │   ├── cleanup-expired/route.ts    # Cleanup expired greetings
│   │   └── route.ts                    # API info
│   ├── greeting/[id]/page.tsx          # View greeting page
│   ├── page.tsx                        # Homepage
│   └── layout.tsx                      # Root layout
├── lib/
│   ├── config.ts                       # Configuration constants
│   └── utils.ts                        # Utility functions
├── public/
│   ├── templates/                      # Template files
│   │   ├── birday_temp1/
│   │   ├── birday_temp2/
│   │   └── birday_temp3/
│   ├── generated/                      # Generated greetings
│   ├── uploads/                        # Temporary uploads
│   ├── app.js                          # Client-side JavaScript
│   └── style.css                       # Styles
└── package.json

Local Development

1. Install Dependencies:

   npm install

2. Run Development Server:

   npm run dev

3. Access the Application: Open http://localhost:3000

Deployment to Vercel

Option 1: Using Vercel CLI

1. Install Vercel CLI:

   npm i -g vercel

2. Login to Vercel:

   vercel login

3. Deploy:

   vercel

4. Deploy to Production:

   vercel --prod

Option 2: Using Vercel Dashboard

1. Go to vercel.com
2. Click "Add New..." → "Project"
3. Import your Git repository
4. Vercel will auto-detect Next.js and configure settings
5. Click "Deploy"

Environment Variables

No environment variables are required for basic operation. The app uses file-based storage in the public directory.

API Endpoints

GET /api

Get API information

GET /api/templates

Get available templates

Response:

{
  "success": true,
  "templates": [
    {
      "id": "template1",
      "name": "Classic Birthday Card",
      "description": "...",
      "required_fields": ["name", "user_image", "message"],
      "optional_fields": []
    }
  ]
}

POST /api/generate

Generate a new birthday greeting

Form Data:

• template_id: Template ID (template1, template2, or template3)
• name: Recipient's name
• message: Birthday message (required for template1 and template3)
• user_image: Single photo (required for template1)
• images: 10 photos (required for template2)

Response:

{
  "success": true,
  "greeting_id": "uuid",
  "greeting_url": "https://yourdomain.com/greeting/uuid",
  "template_used": "template1",
  "recipient_name": "John",
  "uploaded_files": ["user_photo.jpg"],
  "created_at": "2024-10-26T...",
  "expires_at": "2024-10-28T...",
  "valid_for_days": 2,
  "expiry_notice": "This link will expire on October 28, 2024 at 10:00 PM"
}

GET /api/greeting/[id]

Get greeting information

DELETE /api/greeting/[id]

Delete a greeting

POST /api/cleanup-expired

Cleanup all expired greetings

Features Breakdown

Template 1: Classic Birthday Card

• Requires: User photo, custom message
• Features: Animated balloons, cake, fireworks
• Perfect for: Personal birthday wishes

Template 2: 3D Photo Carousel

• Requires: Exactly 10 photos
• Features: Rotating 3D carousel with music
• Perfect for: Photo memories showcase

Template 3: Interactive Gift Card

• Requires: Custom message
• Features: Interactive gift box animation
• Perfect for: Elegant birthday wishes

Link Expiry System

• All greeting links expire after 2 days
• Expired greetings are automatically deleted
• Users are notified of expiry date when creating greetings
• Manual cleanup available via /api/cleanup-expired endpoint

Production Considerations

1. File Storage: Currently uses file-based storage. For production, consider:

   • Cloud storage (AWS S3, Vercel Blob, Cloudinary)
   • Database for metadata
   • CDN for asset delivery

2. Security:

   • File upload validation is implemented
   • Directory traversal protection included
   • Consider adding rate limiting
   • Add CSRF protection for forms

3. Scaling:

   • Implement background job for cleanup
   • Use serverless functions efficiently
   • Consider caching strategies

4. Monitoring:

   • Add error tracking (Sentry, LogRocket)
   • Monitor storage usage
   • Track greeting creation metrics

License

MIT License - Feel free to use and modify for your projects!

Support

For issues or questions, please open an issue on the repository.

Conversion Notes

This project was converted from Flask to Next.js for better Vercel deployment compatibility and modern React features. All original functionality has been preserved and enhanced with TypeScript type safety.