Customization

MatchNest is fully customizable. This guide covers branding, theming, and extending functionality.

Branding

Site Name & Logo

Change the site name in two places:

1. Admin Panel → Settings → General → Site Name
2. Search for MatchNest in src/app/(marketing)/layout.tsx and replace the text

To replace the logo, update the SVG/icon in src/app/(marketing)/layout.tsx navbar and src/components/layout/dashboard-sidebar.tsx.

Colors & Theme

All colors are defined in src/app/globals.css using CSS custom properties:

/* src/app/globals.css */
@theme {
  --color-primary: #e11d48;      /* rose-600 — change this */
  --color-primary-hover: #be123c; /* rose-700 */
}

/* Or directly replace Tailwind classes:
   bg-rose-600 → bg-purple-600
   text-rose-600 → text-purple-600
   hover:bg-rose-700 → hover:bg-purple-700
*/

The quickest way is to do a find-and-replace across the project: replace all rose-600 with your color of choice (e.g. purple-600).

Adding Profile Fields

To add a new field to user profiles:

1. Add the field to the appropriate model in prisma/schema.prisma
2. Run npm run db:push
3. Update the API route (e.g. src/app/api/users/profile/basic/route.ts)
4. Add the Zod schema in src/lib/validations.ts
5. Add the UI field in src/app/(dashboard)/profile/page.tsx
6. Add the constant options in src/lib/constants.ts if needed

Adding a New Page

# Marketing page
src/app/(marketing)/your-page/page.tsx

# Dashboard page (requires auth)
src/app/(dashboard)/your-page/page.tsx

# Admin page (requires admin role)
src/app/(admin)/admin/your-page/page.tsx

Add the route to the navigation in src/app/(marketing)/layout.tsx or the sidebar/admin layout accordingly.

Subscription Limits

Per-plan feature limits are enforced in src/lib/subscription.ts. The getSubscriptionLimits(userId) function reads the user's active package and returns limits. Modify this file to add new gated features.

Switching to Cloud Storage

By default files are stored locally. For production, modify src/lib/upload.ts:

// Example: upload to AWS S3
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3 = new S3Client({ region: process.env.AWS_REGION });

export async function uploadFile(file: File, category: string) {
  const buffer = await file.arrayBuffer();
  const key = `${category}/${Date.now()}-${file.name}`;
  await s3.send(new PutObjectCommand({
    Bucket: process.env.AWS_BUCKET,
    Key: key,
    Body: Buffer.from(buffer),
    ContentType: file.type,
  }));
  return `https://${process.env.AWS_BUCKET}.s3.amazonaws.com/${key}`;
}

Email Templates

Email sending is handled in the forgot-password API route. Customize templates by modifying the HTML strings in the email helper function or extracting them into src/lib/email.ts with a full templating system like react-email.