POS System - Point of Sale Application

A modern Point of Sale (POS) system built with Next.js, Supabase, and PostgreSQL.

Tech Stack

• Frontend/Backend: Next.js 16 with App Router
• Database: PostgreSQL (via Supabase)
• ORM: Prisma
• Authentication & Storage: Supabase
• Styling: Tailwind CSS
• Language: TypeScript

Project Structure

├── app/                  # Next.js app router pages and layouts
├── lib/                  # Utility libraries and configurations
│   ├── prisma.ts        # Prisma client singleton
│   └── supabase.ts      # Supabase client configuration
├── prisma/
│   └── schema.prisma    # Database schema and models
└── public/              # Static assets

Getting Started

Prerequisites

• Node.js 18+ installed
• A Supabase account and project
• npm or yarn package manager

Installation

1. Clone the repository (if not already done)

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root directory with the following variables:

   # Supabase Configuration
   NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   
   # Database URL (Connection Pooling - for queries)
   DATABASE_URL="postgresql://postgres:[PASSWORD]@[HOST]:6543/postgres?pgbouncer=true"
   
   # Direct Database URL (for migrations)
   DIRECT_URL="postgresql://postgres:[PASSWORD]@[HOST]:5432/postgres"

   How to get these values from Supabase:

   • Go to your Supabase project dashboard
   • Navigate to Settings → API
   • Copy the Project URL to NEXT_PUBLIC_SUPABASE_URL
   • Copy the anon/public key to NEXT_PUBLIC_SUPABASE_ANON_KEY
   • Navigate to Settings → Database
   • Find the Connection Pooling section for DATABASE_URL (port 6543)
   • Find the Connection String section for DIRECT_URL (port 5432)

4. Generate Prisma Client:

   npx prisma generate

Development

Run the development server:

npm run dev

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

Database Management

Creating Migrations

When you define your database schema in prisma/schema.prisma, create a migration:

npx prisma migrate dev --name your_migration_name

This will:

• Create SQL migration files
• Apply the migration to your database
• Regenerate Prisma Client

Prisma Studio

To view and edit your database data visually:

npx prisma studio

Reset Database

To reset your database (⚠️ This will delete all data):

npx prisma migrate reset

Using Prisma ORM

Import the Prisma client in your files:

import prisma from '@/lib/prisma'

// Example: Query data
const users = await prisma.user.findMany()

// Example: Create data
const newUser = await prisma.user.create({
  data: {
    name: 'John Doe',
    email: 'john@example.com'
  }
})

Using Supabase

Import the Supabase client:

import { supabase } from '@/lib/supabase'

// Example: Query data
const { data, error } = await supabase
  .from('your_table')
  .select('*')

// Example: Upload file
const { data, error } = await supabase.storage
  .from('bucket-name')
  .upload('file-path', file)

Next Steps

1. Define your database schema in prisma/schema.prisma
2. Create your first migration: npx prisma migrate dev --name init
3. Build your POS features (products, sales, inventory, etc.)
4. Set up authentication with Supabase Auth

Important Notes

• The DATABASE_URL uses connection pooling (port 6543) for optimal performance with serverless functions
• The DIRECT_URL uses a direct connection (port 5432) required for running migrations
• Prisma client is configured as a singleton to prevent connection pool exhaustion
• All environment variables are validated on application start

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Learn More

• Next.js Documentation
• Prisma Documentation
• Supabase Documentation
• Tailwind CSS Documentation