MatchLink - Tinder-Like Profile Discovery Prototype

A basic frontend prototype for a matchmaking app, built with Next.js 15, TypeScript, and Tailwind CSS. It demonstrates responsive profile browsing and UI elements for AI matching and subscriptions, but remains limited to static data without backend or real AI functionality.

Live Demo: https://match-link-tau.vercel.app/ (Shows static profile list and details; no interactive matching).

Overview

MatchLink is an entry-level prototype inspired by Tinder, focusing on UI for profile discovery. It uses hardcoded data for 5-10 sample profiles, with pages for home/discovery, profile details, AI matcher (UI only), and subscription plans. The project highlights modern web development practices but is not a complete app—backend integration and AI logic are planned but not yet implemented. This setup addresses simple visualization needs for matchmaking concepts but lacks depth for real user engagement.

Key Features

• Profile Browsing: Static list of user cards with name, age, bio, interests, and placeholder images; clickable for details.
• AI Matcher UI: Basic page displaying mock compatibility scores and suggestions; no actual AI processing.
• Subscription Plans: Display of tiered packages (e.g., Basic, Premium) with feature lists; no payment handling.
• Responsive Design: Mobile-friendly layout using Tailwind and shadcn/ui components.
• Limitations: Hardcoded data only; no authentication, real-time updates, or database; backend folder exists but is incomplete.

These elements provide a foundation for UI testing but do not solve full matchmaking problems like user verification or personalized recommendations.

Tech Stack

• Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS, shadcn/ui, React Context for state.
• Backend (Planned/Incomplete): Express + MongoDB (recent addition); earlier mentions of Firebase not integrated.
• Deployment: Vercel for frontend; Render config present but untested.
• Tools: ESLint for code quality, GitHub Actions for CI/CD.

Setup Instructions

1. Clone the repo: git clone https://github.com/unnita1235/MatchLink.git
2. Install dependencies: npm install
3. Run locally: npm run dev
4. Access at http://localhost:3000

Note: No environment variables needed for current frontend; backend setup requires MongoDB URI in .env.local (not functional yet).

Project Structure

• src/app: Pages like page.tsx (home), profile/[id]/page.tsx (details), match/page.tsx (AI UI), packages/page.tsx (subscriptions).
• src/components: Reusable UI like ProfileCard.tsx, MatchScore.tsx.
• src/lib: Utilities such as types.ts for TypeScript definitions, api.ts (placeholders).
• backend: Basic Express setup (server.js, routes); not connected to frontend.
• docs & screenshots: Additional notes and images.
• Config Files: next.config.ts, tailwind.config.ts, eslint.config.mjs.

Code style: Modular with type safety; basic error handling; no extensive comments or tests.

Roadmap

• Phase 1 (Current): Frontend UI complete.
• Phase 2: Add authentication and backend (MongoDB/Express).
• Phase 3: Implement real AI matching, messaging, and payments.

Contributions

Fork and submit PRs for fixes; focus on frontend improvements as backend is in early stages.

License: MIT

Updated: January 2026