Partner Directory Platform

A modern, full-stack partner directory and showcase platform built with Next.js and Supabase. This application demonstrates advanced features including PostgreSQL full-text search, image optimization with Supabase Storage, and serverless email notifications via Edge Functions.

🚀 Features

• Full-Text Search: PostgreSQL tsvector implementation for fast, relevance-based partner search
• Partner Gallery: Categorized display of technology partners and expert agencies
• Image Management: Optimized image storage and delivery using Supabase Storage with Next.js Image optimization
• Contact Forms: Integrated partner application forms with serverless email notifications
• Dark Mode: Built-in theme switching support
• Responsive Design: Mobile-first design with Tailwind CSS
• Type Safety: Full TypeScript implementation for enhanced developer experience

🛠️ Tech Stack

Frontend

• Next.js 12 - React framework with SSR and static generation
• React 17 - UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Swiper - Touch-enabled carousel/slider

Backend & Infrastructure

• Supabase - Backend-as-a-Service platform
  • PostgreSQL database with Row Level Security
  • Supabase Storage for image hosting
  • Edge Functions (Deno) for serverless email processing
• Marked - Markdown parser for content rendering

📋 Prerequisites

• Node.js 16.x or higher
• npm or yarn package manager
• Supabase account and project
• SMTP server credentials (AWS SES recommended)

🔧 Installation

1. Clone the Repository

git clone <repository-url>
cd partner-directory-platform

2. Install Dependencies

cd app
npm install

3. Environment Setup

Create a .env.local file in the app directory:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Database Setup

The database schema is defined in supabase/migrations/20230712074829_init.sql. Apply the migration:

supabase link --project-ref your-project-ref
supabase db push

This creates:

• partners table with full-text search capabilities
• partner_contacts table for form submissions
• Row Level Security policies
• PostgreSQL tsvector index for search

5. Configure Edge Function

Deploy the email notification Edge Function:

# Link to your Supabase project
supabase link --project-ref your-project-ref

# Set environment variables
supabase secrets set \
  SMTP_HOSTNAME="your.smtp.hostname.com" \
  SMTP_PORT="2587" \
  SMTP_USERNAME="your_smtp_username" \
  SMTP_PASSWORD="your_smtp_password" \
  SMTP_FROM="[email protected]" \
  SMTP_TO="[email protected]" \
  FUNCTION_SECRET="your-random-secret-key"

# Deploy the function
supabase functions deploy contact-notification

Note: The SMTP_PORT must be a port other than 25, 465, or 587 as Deno Deploy restricts outgoing connections to these ports. AWS SES (port 2587) is recommended.

6. Configure Database Hooks

Set up a Supabase Database Webhook to trigger the Edge Function when a new row is inserted into the partner_contacts table:

1. Navigate to Database → Webhooks in your Supabase dashboard
2. Create a new webhook
3. Configure:
   • Name: contact-notification
   • Table: partner_contacts
   • Events: INSERT
   • HTTP Request: POST to your Edge Function URL
   • Headers: x-function-secret: your-random-secret-key
   • Request body: Select the row data

7. Deploy to Vercel

1. Import your repository to Vercel
2. Configure project settings:
   • Framework Preset: Next.js
   • Root Directory: app
3. Add environment variables:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Deploy

📁 Project Structure

.
├── app/                      # Next.js application
│   ├── components/          # React components
│   │   ├── BecomeAPartner.tsx
│   │   ├── PartnerTileGrid.tsx
│   │   └── ...
│   ├── pages/               # Next.js pages and API routes
│   │   ├── index.tsx
│   │   └── partners/
│   ├── lib/                 # Utility libraries
│   │   ├── supabase.ts
│   │   └── theme.tsx
│   ├── types/               # TypeScript type definitions
│   └── styles/              # Global styles
├── supabase/
│   ├── functions/           # Edge Functions
│   │   └── contact-notification/
│   └── migrations/          # Database migrations
└── README.md

🔍 Full-Text Search

The platform implements PostgreSQL full-text search using tsvector:

tsv tsvector generated always as (
  setweight(to_tsvector('english', title), 'A')
    || setweight(to_tsvector('english', description), 'B')
    || setweight(to_tsvector('english', overview), 'C')
    || setweight(to_tsvector('english', category), 'D')
)

Search queries can be performed using PostgreSQL's ts_rank and to_tsquery functions for relevance-based results.

🎨 Customization

Theme Configuration

Theme colors and styling can be customized in:

• app/tailwind.config.js - Tailwind configuration
• app/ui.config.js - Theme variables
• app/default-colors.js - Color definitions

Partner Categories

Partner categories are dynamically generated from the database. Update the category field in the partners table to add or modify categories.

📝 Adding Partners

Partners can be added directly to the database:

INSERT INTO partners (
  slug, type, category, developer, title, description, 
  logo, overview, website, docs, contact
) VALUES (
  'partner-slug', 'technology', 'Category Name', 'Developer Name',
  'Partner Title', 'Brief description', 'logo-url', 
  'Detailed overview', 'https://website.com', 'https://docs.com', 
  contact_id
);

Or through the "Become a Partner" form, which creates a contact record for review.

🔒 Security

• Row Level Security (RLS): Enabled on all tables with appropriate policies
• Public Read Access: Partners table allows public reads for approved partners
• Protected Writes: Contact submissions require no authentication but are validated
• Function Security: Edge Functions protected with secret headers

📄 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📚 Additional Resources

• Next.js Documentation
• Supabase Documentation
• PostgreSQL Full-Text Search
• Tailwind CSS Documentation