CardWave

A Next.js application for creating and sharing beautiful digital postcards with enhanced features.

Features

• User Authentication: Secure login and registration with NextAuth.js
• Beautiful Templates: Choose from a variety of professionally designed templates
• Rich Text Editor: Create personalized messages with formatting options
• Image Upload: Add your own images to postcards
• Sharing Options: Share via email, social media, or direct link
• Public/Private Settings: Control who can see your postcards
• Scheduled Sending: Schedule postcards to be sent on special occasions
• Real-time Collaboration: Create postcards together with friends and family
• Analytics: Track views and interactions with your postcards
• Mobile Responsive: Works great on all devices
• Dark Mode Support: Choose between light and dark themes

Tech Stack

• Frontend: Next.js 14 with App Router, React, TypeScript
• Styling: Tailwind CSS
• Authentication: NextAuth.js
• Database: PostgreSQL with Prisma ORM
• State Management: React Hooks and Context API
• UI Components: Custom components with Radix UI primitives
• Deployment: Ready for Vercel deployment

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• PostgreSQL database

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/cardwave.git
   cd cardwave

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   • Copy .env.example to .env
   • Update the database connection string and other variables

4. Set up the database:

   npx prisma migrate dev

5. Run the development server:

   npm run dev
   # or
   yarn dev

6. Open http://localhost:3000 in your browser.

Setting Up Environment Variables with AWS

Database Setup with Amazon RDS

1. Create a PostgreSQL database using Amazon RDS:

   • Go to the AWS Management Console
   • Navigate to RDS
   • Click "Create database"
   • Select PostgreSQL
   • Configure settings (choose a DB instance identifier, username, and password)
   • Make sure to note down the endpoint, port, username, and password

2. Update your .env file with the RDS connection string:

   DATABASE_URL="postgresql://username:password@your-rds-endpoint:5432/cardwave"
   

Authentication Setup

1. Create a NextAuth secret:

   • You can generate a secure random string using:

     openssl rand -base64 32

   • Add it to your .env file:

     NEXTAUTH_SECRET="your-generated-secret"
     NEXTAUTH_URL="http://localhost:3000" # For development
     

2. Set up Google OAuth (optional):

   • Go to the Google Cloud Console
   • Create a new project
   • Navigate to "APIs & Services" > "Credentials"
   • Create OAuth client ID credentials
   • Add authorized JavaScript origins and redirect URIs
   • Add the credentials to your .env file:

     GOOGLE_CLIENT_ID="your-google-client-id"
     GOOGLE_CLIENT_SECRET="your-google-client-secret"
     

Image Storage with Amazon S3

1. Create an S3 bucket:

   • Go to the AWS Management Console
   • Navigate to S3
   • Create a new bucket with appropriate permissions
   • Enable CORS for your domain

2. Create IAM credentials:

   • Go to IAM in the AWS Console
   • Create a new user with programmatic access
   • Attach the AmazonS3FullAccess policy (or create a custom policy with limited permissions)
   • Note down the access key and secret

3. Add S3 credentials to your .env file:

   AWS_S3_BUCKET_NAME="your-bucket-name"
   AWS_S3_REGION="your-bucket-region"
   AWS_ACCESS_KEY_ID="your-access-key"
   AWS_SECRET_ACCESS_KEY="your-secret-key"
   

Deployment Environment Variables

When deploying to production:

1. Update the NEXTAUTH_URL to your production URL
2. Consider using AWS Secrets Manager or Parameter Store to securely store your production secrets
3. If deploying to Vercel, add all environment variables in the Vercel project settings

Project Structure

cardwave/
├── app/                  # Next.js App Router
│   ├── api/              # API routes
│   ├── (auth)/           # Authentication pages
│   ├── dashboard/        # User dashboard
│   ├── create/           # Postcard creation
│   ├── postcards/        # Postcard viewing
│   └── page.tsx          # Homepage
├── components/           # React components
├── lib/                  # Utility functions
├── prisma/               # Database schema
└── public/               # Static assets

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with ❤️ by CardWave Team