https://github.com/sahar-dev/nextmatch
NextMatch is a modern dating-style web application built with Next.js 13 (App Router) and TypeScript. It allows users to create accounts, browse member profiles, upload photos, send messages, and build meaningful connections.
https://github.com/sahar-dev/nextmatch
docker nextjs13 prisma tailwindcss typescript
Last synced: 6 days ago
JSON representation
NextMatch is a modern dating-style web application built with Next.js 13 (App Router) and TypeScript. It allows users to create accounts, browse member profiles, upload photos, send messages, and build meaningful connections.
- Host: GitHub
- URL: https://github.com/sahar-dev/nextmatch
- Owner: Sahar-dev
- Created: 2025-02-05T11:46:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-15T12:53:38.000Z (10 months ago)
- Last Synced: 2025-10-19T19:47:45.542Z (9 months ago)
- Topics: docker, nextjs13, prisma, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 752 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💌 NextMatch – Modern Dating Web App
## 📖 Overview
**NextMatch** is a modern dating-style web application built with **Next.js 13 (App Router)** and **TypeScript**.
It allows users to create accounts, browse member profiles, upload photos, send messages, and build meaningful connections.
This project demonstrates a full-stack setup with **Prisma ORM**, **TailwindCSS**, and **Docker Compose** for deployment.
It is designed as a portfolio-ready project showcasing authentication, protected routes, and a polished UI.
---
## 🏗️ Project Structure
```
NextMatch
│
├── prisma/ # Database layer
│ ├── schema.prisma # Database schema
│ ├── seed.ts # Seeds database with demo users
│ └── membersData.ts # Dummy members data (male/female profiles)
│
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── auth/ # Login & registration pages
│ │ ├── members/ # Member list, details, edit, chat, photos
│ │ ├── lists/ # Saved matches / favorite lists
│ │ ├── messages/ # Messaging system
│ │ ├── layout.tsx # Global layout wrapper
│ │ └── page.tsx # Landing page
│ │
│ ├── auth.ts # Authentication setup
│ ├── auth.config.ts # Auth configuration
│ ├── middleware.ts # Middleware protecting private routes
│ └── routes.ts # Route constants
│
├── public/images/ # Sample profile images
├── docker-compose.yml # Docker configuration
├── package.json # Dependencies
└── tailwind.config.ts # Tailwind setup
```
---
## ⚙️ Technologies Used
- **Frontend**: Next.js 13 (App Router), React, TypeScript
- **Styling**: TailwindCSS, PostCSS
- **Database**: Prisma ORM (with seeding scripts)
- **Authentication**: Custom auth with middleware-protected routes
- **Deployment**: Docker Compose
- **Other Tools**: ESLint, Prettier, Vercel (for hosting)
---
## 🛠️ Setup & Installation
### 1. Clone the Repository
```bash
git clone https://github.com/Sahar-dev/NextMatch.git
cd NextMatch
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Configure Environment
Create a `.env` file in the root with database and auth secrets:
```
DATABASE_URL="postgresql://user:password@localhost:5432/nextmatch"
NEXTAUTH_SECRET="your-secret"
```
### 4. Database Setup
Run Prisma migrations and seed demo members:
```bash
npx prisma migrate dev
npx prisma db seed
```
### 5. Run with Docker (Optional)
```bash
docker-compose up --build
```
### 6. Start Development Server
```bash
npm run dev
```
Then open: [http://localhost:3000](http://localhost:3000)
---
## 🚀 Features
- 🔐 **User Registration & Login** – secure authentication system
- 👤 **Member Profiles** – view details, photos, and status
- 📸 **Photo Uploads** – add and manage user photos
- 💬 **Messaging & Chat** – send messages in real-time
- 📌 **Lists & Favorites** – save members into personalized lists
- 🎨 **Responsive Design** – styled with TailwindCSS for modern UI
---
## 👨💻 Author
Developed by **Sahar Marzougui**
- [LinkedIn](https://linkedin.com/in/sahar-marzougui)
- [GitHub](https://github.com/Sahar-dev)
---
✨ This project is a **dating app clone** showcasing full-stack web development using **Next.js, Prisma, Tailwind, and Docker**.
Perfect as a **portfolio piece** to demonstrate authentication, profile management, messaging, and database integration.