This is a Next.js project with Mantine UI components and Prisma database integration.

• ⚡️ Next.js 16 with App Router
• 🎨 Mantine UI components library
• 🗄️ Prisma ORM with PostgreSQL database
• 📝 Full CRUD operations for posts
• 🔔 Toast notifications
• 💅 Modern, responsive UI

First, install dependencies:

npm install

Start the PostgreSQL database:

npm run db:start

This will start a PostgreSQL container on port 5432.

If you have PostgreSQL installed locally, make sure it's running and create a database:

CREATE DATABASE abideguide;

Create a .env file in the root directory:

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/abideguide?schema=public"

Note: If using Docker Compose, the default credentials are:

• User: postgres
• Password: postgres
• Database: abideguide
• Port: 5432

Generate the Prisma client and push the schema:

npm install
npm run db:push

Or use migrations (recommended for production):

npm run db:migrate

Run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

This project uses Prisma with PostgreSQL.

The easiest way to run PostgreSQL locally is using Docker Compose:

# Start the database
npm run db:start

# Stop the database
npm run db:stop

# Reset the database (removes all data)
npm run db:reset

Database Scripts:

• npm run db:start - Start PostgreSQL with Docker Compose
• npm run db:stop - Stop PostgreSQL
• npm run db:reset - Reset database (removes all data and recreates)
• npm run db:migrate - Run database migrations
• npm run db:push - Push schema changes without migrations
• npm run db:studio - Open Prisma Studio to view/edit data

Default Docker Compose credentials:

• User: postgres
• Password: postgres
• Database: abideguide
• Port: 5432

Make sure your .env file has:

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/abideguide?schema=public"

For production on Vercel:

1. Set up a PostgreSQL database:

   • Option A (Recommended): Use Vercel Postgres
     • Go to your Vercel project → Storage → Create Database → Postgres
     • Vercel will automatically add DATABASE_URL to your environment variables
   • Option B: Use an external provider (Supabase, Neon, Railway, etc.)
     • Get your connection string from your provider
     • Add it as DATABASE_URL in Vercel project settings

2. Add Environment Variables in Vercel:

   • Go to your Vercel project → Settings → Environment Variables
   • Add DATABASE_URL with your PostgreSQL connection string
   • Make sure to select all environments (Production, Preview, Development)

3. Run database migrations:

   npx prisma migrate deploy

   Or Vercel will automatically run prisma generate via the postinstall script during build.

Important: After adding DATABASE_URL, you must redeploy your project for the changes to take effect.

To view your database:

npm run db:studio

This will open Prisma Studio in your browser where you can view and edit your data.

• app/ - Next.js app directory with pages and API routes
• lib/ - Utility files including Prisma client
• prisma/ - Prisma schema and database files
• app/api/posts/ - API routes for post CRUD operations

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.