PeerQuik Documentation

1. Download and Extract:
   • Unzip the peerquik-boilerplate.zip file you received.
   • Navigate to the project folder:

     cd peerquik

2. Set Up Environment Variables:
   • Copy the example environment file:

     cp .env.example .env

   • Open .env.example and create a .env file, paste the variables, and add your API keys (see Section 8 for details). Example:

     
     DATABASE_URL="postgresql://user:password@localhost:5432/peerquik"
     GOOGLE_CLIENT_ID="your_google_client_id"
     GOOGLE_CLIENT_SECRET="your_google_client_secret"
     STRIPE_SECRET_KEY="your_stripe_secret_key"
     RESEND_API_KEY="your_resend_api_key"
     NEXT_PUBLIC_MAPBOX_TOKEN="your_mapbox_token"
     FREECURRENCYAPI_KEY="your_currency_api_key"
     RECAPTCHA_SITE_KEY="your_recaptcha_site_key"
     RECAPTCHA_SECRET_KEY="your_recaptcha_secret_key"
         

3. Install Dependencies:

   npm install

4. Set Up Database:
   • Local PostgreSQL:
     • Install PostgreSQL (instructions).
     • Create a database named peerquik:

       psql -U postgres -c "CREATE DATABASE peerquik;"

     • Update DATABASE_URL in .env with your credentials.
   • Supabase:
     • Sign up at supabase.com.
     • Create a new project and copy the database URL to DATABASE_URL in .env.
   • Apply the database schema:

     npx prisma migrate dev --name init

5. Run the App:

   npm run dev

   • Open http://localhost:3000 in your browser.
   • ✅ Checkpoint: You should see the PeerQuik landing page.

Note: To reuse PeerQuik for another project, copy the peerquik folder to a new location and repeat these steps with new API keys and a fresh database.

1. Logo and Favicon:
   • Replace public/logo.svg with your logo.
   • Update public/favicon.ico with your favicon.
2. Colors and Fonts:
   • Edit tailwind.config.ts:

     
     theme: {
         extend: {
             colors: {
                 primary: "#123456", // Your brand color
             },
         },
     }
                                   

   • Modify global styles in app/globals.css.
3. Landing Page:
   • Update text and images in app/page.tsx.
   • Edit site metadata in app/layout.tsx and app/_document.tsx.

Routes are organized by user roles:

• app/(protected)/buyer/: For buyers.
• app/(protected)/seller/: For sellers.
• app/(protected)/admin/: For admins.

Server-Side Protection:

 
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";

const session = await getServerSession(authOptions);
if (!session) redirect("/login");
                    

Client-Side Protection:

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

const { status } = useSession();
const router = useRouter();
if (status === "unauthenticated") router.push("/login");                                            
                    

1. Go to Google Cloud Console.
2. Create a new project.
3. Enable OAuth 2.0 and set:
   • Local URI: http://localhost:3000/api/auth/callback/google
   • Production URI: https://yourdomain.com/api/auth/callback/google
4. Add to .env:

   GOOGLE_CLIENT_ID=your_id GOOGLE_CLIENT_SECRET=your_secret

There are two user types configured in the app:

• User Type A — e.g., buyer, student, client.
• User Type B — e.g., seller, instructor, provider.

Each user type has its own registration and login flows, as well as personalized views, routing, and dashboard components.

To add fields to the User model, edit prisma/schema.prisma:

model User {
    id              String  @id @default(cuid())
    email           String  @unique
    role            String
    phone           String?
    profileComplete Boolean @default(false)
    }                                           
                                                

You can also add more models and relations. Apply changes:

npx prisma migrate dev --name extend-user

What is it? Stripe allows you to accept payments and manage subscriptions easily.

Steps:

1. Create an account at stripe.com.
2. In the Stripe Dashboard:
   • Go to "Products" → Create a product for your subscription.
   • Add one or more prices (e.g., monthly, annual).
3. Add to .env:

   
   STRIPE_SECRET_KEY=your_secret_key
   STRIPE_WEBHOOK_SECRET=your_webhook_secret
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_publishable_key                                                    
                                                           

   Note: Find these keys in Stripe Dashboard → "Developers" → "API Keys" and "Webhooks".

4. Webhooks:
   • Create an endpoint in Stripe for notifications.
   • URL: https://yourapp.com/api/stripe/webhooks
   • Code is in: app/api/stripe/webhooks/route.ts
5. Subscriptions:
   • When a user subscribes, call the endpoint: app/api/stripe/subscribe-seller/route.ts
6. Invoicing:
   • Invoices are generated automatically in PDF using jspdf.
   • Sent to users via Resend (see below).

What is it? A service for sending emails from your app without complications.

Steps:

1. Create an account at resend.com.
2. Important: If you don’t verify your domain, you can only send emails from the registered email.
3. Add to .env:

   RESEND_API_KEY=your_resend_key

4. Edit actions/mail.ts to set the sender:

   from: "Your App <noreply@yourapp.com>",

   Change yourapp.com to your domain or use the registered email if unverified.

5. Test email templates locally:

   npm run email

What is it? Displays maps for user locations, centers, or searches.

Steps:

1. Create an account at mapbox.com.
2. Copy your access token and add to .env:

   NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token

Mapbox + OpenStreetMap powers maps in listings and search.

What is it? Converts prices between different currencies.

Steps:

1. Create an account at freecurrencyapi.com.
2. Add to .env:

   FREECURRENCYAPI_KEY=your_api_key

3. Conversion logic is in: utils/currencyconverter.ts.
4. A cron job updates exchange rates periodically (see Section 9).

What is it? Prevents spam in forms, especially for non-logged-in users.

Steps:

1. Go to Google reCAPTCHA Admin.
2. Register your domain (e.g., yourapp.com).
3. Add keys to .env:

   
   RECAPTCHA_SITE_KEY=your_site_key
   RECAPTCHA_SECRET_KEY=your_secret_key                                                   
                                                           

Used in public forms (registration, contact, etc.).

1. Use Resend to manage newsletter subscriptions.
2. Edit the footer component in components/footer.tsx.
3. Add a form to collect emails and save to the Newsletter database model.

1. Push your project to GitHub.
2. Connect to vercel.com.
3. Add .env variables in Vercel Settings.
4. Deploy the app.
5. Set up a Supabase database (see Section 3.1).

1. Set up a VPS (e.g., DigitalOcean, Hetzner).
2. Install Docker and Coolify (docs).
3. Authenticate with GitHub Container Registry:

   echo "your_token" | docker login ghcr.io -u your_username --password-stdin

4. Build and push:

   
   docker build -t ghcr.io/your_username/peerquik:latest .
   docker push ghcr.io/your_username/peerquik:latest                                                   
                                                           

5. Deploy via Coolify’s dashboard.
6. Watch my tutorial on YouTube if you have questions.