Welcome to the Supabase Ads Website Project!

This project is designed to create a simple ads website where users can register with social accounts, post ads, view ads, and have different roles like user, public, and administrator.

• User authentication with social accounts
• Role-based access control
• CRUD operations for ads
• Real-time updates
• Admin interface

• Frontend: (React/Vue/Angular)
• Backend: Supabase (PostgreSQL, Auth, Storage)
• ORM: Prisma
• Hosting: (Vercel/Netlify/Other)

• Node.js and pnpm installed
• Supabase account
• Prisma CLI installed
• Git installed

1. Clone the repository:

   git clone https://github.com/litehacker/supabase-nextjs-shadcn.git
   cd supabase-nextjs-shadcn

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create a .env file in the root directory and add your Supabase project URL, API key, and database connection string:

   DATABASE_URL=postgresql://user:password@host:port/database
   SUPABASE_URL=your-supabase-url
   SUPABASE_ANON_KEY=your-supabase-anon-key

pnpm start

This will start the development server. Open http://localhost:3000 to view it in the browser.

/prisma
  /migrations    # Database migration files
  schema.prisma  # Prisma schema file
/src
  /components    # React components
  /pages         # Page components
  /services      # Supabase client and API calls
  /styles        # CSS/SCSS files
  /utils         # Utility functions
.env             # Environment variables
package.json     # Project dependencies and scripts
README.md        # Project documentation

Edit the schema.prisma file to define your database schema:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Profile {
  id        String   @id @default(uuid())
  username  String   @unique
  createdAt DateTime @default(now())
  ads       Ad[]
}

model Ad {
  id          String   @id @default(uuid())
  userId      String
  title       String
  description String
  createdAt   DateTime @default(now())

  user Profile @relation(fields: [userId], references: [id])
}

Run the following commands to generate and apply the database migration:

npx prisma migrate dev --name init

To enable social providers:

1. Navigate to the "Authentication" tab in your Supabase dashboard.
2. Enable desired social providers (e.g., Google, Facebook).

To enable email/password authentication:

1. Navigate to the "Authentication" tab in your Supabase dashboard.
2. Enable email/password sign-in.

1. Public can view their own profile:

   create policy "Public can view their own profile."
   on profiles for select
   using (auth.uid() = id);

2. Public can view all ads:

   create policy "Public can view all ads."
   on ads for select
   using (true);

3. Users can insert their own ads:

   create policy "Users can insert their own ads."
   on ads for insert
   using (auth.role() = 'user');

4. Admins can do anything:

   create policy "Admins can do anything."
   on profiles, ads for all
   using (auth.role() = 'admin');

Generate Prisma client by running:

npx prisma generate

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const ads = await prisma.ad.findMany()

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const ad = await prisma.ad.create({
  data: {
    userId: 'user-id',
    title: 'Ad Title',
    description: 'Ad Description',
  },
})

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const updatedAd = await prisma.ad.update({
  where: { id: 'ad-id' },
  data: { title: 'Updated Title' },
})

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const deletedAd = await prisma.ad.delete({
  where: { id: 'ad-id' },
})

1. Build the project:

   pnpm build

2. Deploy to Vercel/Netlify:

   Follow the platform-specific instructions to deploy your build folder.

• Create an admin interface for managing users and ads.
• Restrict access using role-based access control.

This updated guide incorporates Prisma ORM into the project setup and development process. Adjust the instructions according to your specific requirements and preferences.