DevMatch: A Developer-Focused Dating Application

Project Overview

DevMatch is a full-stack dating application built specifically for software developers to connect, discover matches, and collaborate based on shared technical interests and professional backgrounds. Developed as a WC Launchpad Builder Round project, it is a minimal viable product (MVP) completed within a five-day sprint (October 27-31, 2025), designed to showcase technical skills, product sense, and full-stack development capabilities.

The application enables users to create comprehensive developer profiles, browse and swipe through potential matches, establish mutual connections, and engage in real-time messaging with matched users.

Key Features

User Authentication & Profiles

• Multi-provider authentication via credentials, Google OAuth, and GitHub OAuth
• Email verification with token-based secure links
• Password reset functionality via email tokens
• Two-step registration process with profile completion
• Profile completion flow for social login users

Matching & Discovery

• Swipe interface for discovering other developers with intuitive card-based browsing
• Like/Unlike functionality to express interest in other profiles
• Mutual matching logic to identify when two users have liked each other
• Member discovery with pagination and filtering

Real-Time Messaging

• Matched member chat using Pusher for real-time message synchronization
• Message history with read receipts and timestamps
• Unread message tracking with client-side state management
• Message notifications via Pusher channels

Profile Management

• Profile editing with ability to update bio, location, and personal details
• Photo uploads to Cloudinary with signed image URLs
• Member photo gallery display for enhanced profile viewing
• Presence indicators showing online/offline status

User Interface

• Responsive design using Tailwind CSS and Lucide icons
• Light/dark mode support with theme toggle
• Component-based architecture using shadcn/ui components
• Smooth animations via Framer Motion for interactive CTAs and transitions

Tech Stack

Frontend

Backend

Development Tools

Architecture & Design

DevMatch follows a modern full-stack Next.js architecture with clear separation of concerns between frontend components, backend API routes, and database operations.

Authentication Flow

The authentication system uses NextAuth v5 with multiple providers including credentials, Google OAuth, and GitHub OAuth. JWT-based sessions provide secure authentication with 30-day expiration.

Real-Time Messaging Architecture

• Pusher Integration for WebSocket-based message delivery
• Server Actions for mutations (sendMessage, likeUser)
• Zustand Stores for client-side state management
• Custom React hooks for data binding

Core Modules

Authentication Module

Key functions in src/actions/authActions.ts:

• signInUser - Credentials-based login with email verification
• registerUser - Multi-step registration with profile creation
• verifyEmail - Token-based email confirmation
• resetPassword - Password update with token validation
• completeSocialLoginProfile - Social login profile completion
• generateResetPasswordEmail - Password reset flow initialization

Matching & Like System

Functions in src/actions/likeActions.ts:

• Like User: Records unidirectional interest
• Unlike User: Removes previous like
• Check Mutual Likes: Identifies two-way matches
• Fetch Likes: Retrieves likes with pagination
• Discover Members: Returns non-liked users for swiping

Messaging System

Core features in src/actions/messageActions.ts:

• Send Message: Creates message with Pusher notification
• Fetch Conversations: Retrieves conversations with latest message
• Get Messages: Fetches message history between members
• Mark as Read: Updates read timestamp
• Delete Message: Soft-delete for privacy

Member Profile Management

Capabilities in src/actions/memberActions.ts:

• Fetch Member: Retrieves user profile with photos
• Update Member: Modifies profile information
• Upload Photos: Cloudinary integration for storage
• Delete Photo: Removes images from profile
• Get All Members: Returns paginated member list

Setup & Installation

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm package manager
• PostgreSQL database (local or cloud via Neon)
• Git for version control

Clone & Install

• git clone https://github.com/zzelif/builder-round-devmatch.git
• cd zzelif-builder-round-devmatch
• Install dependencies
• npm install

Database Operations

• Generate Prisma client: npx prisma generate
• Run migrations: npx prisma migrate deploy
• Seed database: npx prisma db seed
• Open Prisma Studio: npx prisma studio

Start Development Server

• npm run dev

Open http://localhost:3000 in your browser.

Environment Configuration

Create a .env.local file in the project root with required variables for database, authentication providers, Pusher, Cloudinary, and email service.

Setup Steps

1. PostgreSQL Database: Create database and set DATABASE_URL
2. NextAuth Secrets: Generate via openssl rand -base64 32
3. OAuth Credentials: Register apps at Google Cloud Console and GitHub
4. Pusher Account: Create at pusher.com for real-time features
5. Cloudinary Account: Sign up for image storage
6. Resend Account: Register for transactional email

Development Workflow

Key npm Scripts

Code Organization Best Practices

• Server Actions in src/actions/ for mutations and database queries
• Components split into UI components, feature components, and pages
• Hooks in src/hooks/ for reusable stateful logic
• Lib utilities isolated in src/lib/ for configuration and helpers
• Schemas in src/lib/schemas/ for Zod validation

Deployment

Vercel Deployment

Deploy using Vercel CLI or Git integration. The vercel-build script automates Prisma client generation, database migrations, seeding, and Next.js build.

Production Considerations

• Database: Use managed PostgreSQL (Neon, AWS RDS, Vercel Postgres)
• NEXTAUTH_URL: Set to production domain
• NEXTAUTH_SECRET: Use strong, 32+ character secret
• Image Optimization: Enabled via Next.js with Cloudinary CDN

Key Implementation Details

Real-Time Messaging with Pusher

Pusher enables instant message delivery and presence tracking through WebSocket connections.

Custom Hooks:

• useNotificationChannel() listens for new messages
• usePresenceChannel() tracks online members
• useMessages() fetches and caches message history

Image Management with Cloudinary

Images are uploaded to Cloudinary for storage and CDN delivery with client-side upload, server-side signing, and public ID storage.

Form Validation with Zod

All forms validated server-side using Zod schemas with client-side integration via React Hook Form and resolvers.

State Management

• Zustand Stores: Message and presence state for real-time sync
• React Query Integration: Optional for server state
• Context API: For theme and authentication context

UI/UX with Tailwind & shadcn

• Responsive Design: Mobile-first Tailwind utilities
• Dark Mode: Managed via next-themes with CSS variables
• Component Library: Pre-built accessible shadcn components
• Icons: Lucide React for consistent icon set
• Animations: Framer Motion for smooth transitions on CTAs

Conclusion

DevMatch demonstrates a production-ready full-stack dating application built with modern technologies. It combines robust authentication, real-time messaging, intuitive UI design, and scalable architecture to create an engaging platform for developers to connect and collaborate.

The modular structure, TypeScript type safety, and comprehensive use of industry-standard libraries make it an excellent foundation for further features such as advanced filtering, recommendation algorithms, verification systems, and in-app notifications.