Shifty Loyalty - Next.js

A digital loyalty card management system for small businesses, built with Next.js 14, React, and PostgreSQL.

Features

• Multi-business support: Owners can manage multiple businesses
• Loyalty programs: Create stamp cards or points-based rewards
• Customer self-registration: QR codes for easy customer sign-up
• Digital cards: Mobile-friendly card view with progress tracking
• Staff rostering: Employee scheduling and auto-assignment
• Wallet integration: Google Pay pass generation (Apple Wallet requires certificates)

Tech Stack

• Framework: Next.js 14 with App Router
• Database: PostgreSQL with Prisma ORM
• Auth: NextAuth.js with credentials provider
• Styling: Tailwind CSS
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database (or use Vercel Postgres / Neon)

Local Development

1. Install dependencies:

   cd shifty-next
   npm install

2. Set up environment variables:

   cp .env.example .env

   Edit .env with your database credentials:

   DATABASE_URL="postgresql://..."
   DIRECT_URL="postgresql://..."
   NEXTAUTH_SECRET="your-secret-key"
   NEXTAUTH_URL="http://localhost:3000"
   NEXT_PUBLIC_APP_URL="http://localhost:3000"
   

3. Set up the database:

   npx prisma db push

4. Run the development server:

   npm run dev

5. Open http://localhost:3000

Deploy to Vercel

Option 1: One-Click Deploy

Option 2: Manual Deploy

1. Push to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/yourusername/shifty-next.git
   git push -u origin main

2. Import to Vercel:

   • Go to vercel.com/new
   • Import your repository
   • Vercel will auto-detect Next.js

3. Add environment variables in Vercel dashboard:

   • DATABASE_URL - Your Postgres connection string (pooled)
   • DIRECT_URL - Your Postgres connection string (direct)
   • NEXTAUTH_SECRET - Generate with openssl rand -base64 32
   • NEXTAUTH_URL - Your Vercel domain (e.g., https://shifty.vercel.app)
   • NEXT_PUBLIC_APP_URL - Same as NEXTAUTH_URL

4. Set up database:

   • Use Vercel Postgres or Neon
   • Run migrations: npx prisma db push

Database Options

Vercel Postgres (Recommended)

1. Go to your Vercel project → Storage → Create Database
2. Select Postgres
3. Copy the connection strings to your environment variables

Neon

1. Create account at neon.tech
2. Create a new project
3. Copy the connection string

Supabase

1. Create project at supabase.com
2. Go to Settings → Database
3. Use the "Connection string" with your password

Project Structure

shifty-next/
├── app/
│   ├── api/                 # API routes
│   ├── card/[cardId]/       # Customer card view
│   ├── join/[businessId]/   # Customer registration
│   └── owner/               # Owner dashboard pages
├── components/              # React components
├── lib/                     # Utilities (auth, db, utils)
├── prisma/                  # Database schema
└── public/                  # Static assets

License

MIT