Matcha is a comprehensive, full-stack dating web application that combines modern web technologies to create an engaging social platform for discovering and connecting with like-minded people. Built with a focus on real-time interactions, smart matching algorithms, and user experience.
Matcha is a feature-rich dating platform where users can:
- 🔐 Secure Authentication: Email registration with confirmation, password recovery, and OAuth integration (Google & 42 Intra)
- 👤 Complete Profile System: Customizable profiles with photos, biography, tags, location, and personal preferences
- 🎯 Smart Matching Algorithm: Advanced user suggestions based on:
- Sexual orientation compatibility
- Geographic proximity (with distance calculation)
- Shared interests and tags
- Fame rating and popularity
- Age preferences
- 💬 Real-Time Chat System: Instant messaging with:
- Text messages with profanity filtering
- Voice message recording and playback
- Audio file uploads (MP3, WAV, MP4, AAC, OGG, WebM)
- Event scheduling within chats
- Online/offline status indicators
- 🔔 Live Notification System: Real-time notifications for:
- Profile likes and dislikes
- Profile views
- Messages and voice messages
- Matches and events
- 🗺️ Interactive Geolocation:
- Automatic location detection via GPS
- IP-based fallback location
- Manual location selection with interactive maps
- Distance-based filtering and sorting
- 🔍 Advanced Search & Filtering:
- Age range filtering
- Distance-based proximity search
- Fame rating filters
- Tag-based search
- Multiple sorting options
- 🖼️ Media Management:
- Profile picture uploads
- Multiple photo galleries (up to 5 images)
- Image deletion and management
- ⚡ Real-Time Interactions:
- Like/dislike system with instant feedback
- Match detection and notifications
- User blocking and reporting
- Profile view tracking
- Framework: Flask 2.3.2
- Real-Time: Flask-SocketIO 5.3.6 + Eventlet 0.36.1
- Database: PostgreSQL with psycopg2-binary 2.9.6
- Authentication:
- BCrypt 4.1.2 for password hashing
- OAuth2 via requests-oauthlib 1.3.1 (Google & 42 Intra)
- Session-based authentication
- Email: SMTP integration for confirmations and password resets
- Data Generation: Faker 24.8.0 for development seeding
- Security: Environment-based configuration with python-dotenv 1.0.0
- CORS: Flask-CORS for cross-origin requests
- Framework: React 19.1.0 with TypeScript
- Build Tool: Vite 6.3.5 for fast development and optimized builds
- Styling: TailwindCSS 4.1.8 for modern, responsive design
- State Management:
- React Context API for profile management
- Redux Toolkit 2.8.2 for notifications
- Custom hooks for data fetching
- Real-Time: Socket.IO Client 4.8.1 for live messaging and notifications
- Routing: React Router DOM 7.6.2 for SPA navigation
- Maps & Geolocation:
- React-Leaflet 5.0.0 for interactive maps
- Leaflet 1.9.4 for geolocation features
- Media & Interactions:
- MediaRecorder API for voice recording
- Framer Motion 12.16.0 for smooth animations
- Bad-words 4.0.0 for content filtering
- Security: zxcvbn 4.4.2 for password strength validation
- Icons: React Icons 5.5.0 + Lucide React 0.513.0
- Containerization: Docker + Docker Compose for multi-service orchestration
- Database: PostgreSQL with automated initialization scripts
- Development: Hot-reload for both frontend and backend
- Build Process: Automated with Makefile for easy deployment
- File Storage: Volume mounting for persistent data and uploads
- Geolocation: ipapi.co for IP-based location detection
- Maps: OpenStreetMap with CartoDB tiles for clean visualization
- Email: SMTP (Gmail) for transactional emails
- OAuth Providers: Google OAuth 2.0 and 42 Intra integration
- Multi-factor scoring based on proximity, shared interests, and compatibility
- Haversine formula for accurate distance calculations between users
- Dynamic fame rating system that updates based on user interactions
- Advanced SQL queries with geographic calculations and complex filtering
- Real-time voice recording with MediaRecorder API
- Audio format support: WebM, MP3, WAV, MP4, AAC, OGG (up to 10MB)
- Professional audio controls: Record, preview, send, and delete
- Cross-browser compatibility with fallback format detection
- Multi-layered location detection:
- GPS-based precise location
- IP-based approximate location fallback
- Manual location selection with interactive maps
- Interactive Leaflet maps with custom markers and popups
- Real-time distance calculation and display
- Location-based filtering with customizable radius
- Socket.IO-based instant notification delivery
- Multiple notification types: likes, views, messages, matches, events
- Persistent notification storage with read/unread tracking
- Real-time badge updates in navigation bar
- Cross-tab synchronization for consistent user experience
- Comprehensive email validation with regex patterns
- Strong password requirements with real-time strength checking
- Account confirmation flow with secure token generation
- OAuth integration for secure third-party authentication
- User blocking and reporting system for safety
- Session-based authentication with secure cookie handling
Users: Core user information, authentication, location, preferences
Messages: Chat messages with support for text and audio types
Chats: Chat rooms and membership management
User_Tags: Many-to-many relationship for user interests
Likes/Dislikes: User interaction tracking
Notifications: Real-time notification storage
User_Blocks: User blocking and reporting system
/auth/* - Authentication endpoints (register, login, reset password)
/oauth/* - OAuth provider callbacks (Google, 42 Intra)
/profile/* - User profile management
/pictures/* - Image upload and management
/users/* - User discovery, likes, views, blocking
/chats/* - Messaging system with audio support
/tags/* - Tag management and suggestions
/reminder/* - Notification system
Chat Socket: join, leave, send_message, receive_message
Notification Socket: register_reminder, send_reminder, receive_reminder
Connection management with automatic reconnection
- Docker and Docker Compose
- Git
- Clone the repository:
git clone https://github.com/adiaz-uf/Dating-WebApp.git
cd Dating-WebApp- Set up environment variables:
cp .env-example .env
# Edit .env with your configuration (database, email, OAuth credentials)- Build and run with Docker:
make- Access the application:
- Frontend: http://localhost:5173
- Backend API: http://localhost:3001
make restart # Restart all services
make stop # Stop all services
make down # Stop and remove containers
make fclean # Complete cleanup (removes data)
make re # Full rebuildmatcha/
├── Backend/ # Flask API server
│ ├── app/
│ │ ├── routes/ # API endpoints
│ │ ├── services/ # Business logic
│ │ ├── sockets/ # Real-time event handlers
│ │ └── Utils/ # Helper functions
│ ├── uploads/ # File storage
│ └── run.py # Application entry point
├── Frontend/ # React application
│ ├── src/
│ │ ├── api/ # API service layer
│ │ ├── components/ # Reusable UI components
│ │ ├── features/ # Feature-specific modules
│ │ ├── pages/ # Application pages
│ │ ├── lib/ # Utilities and helpers
│ │ └── store/ # State management
│ └── public/ # Static assets
├── Docker/ # Container configurations
├── data/ # Persistent database storage
└── docker-compose.yml # Service orchestration
This project demonstrates:
- Full-stack development with modern technologies
- Real-time web application architecture
- Complex database relationships and queries
- Geospatial data processing and visualization
- File upload and media handling
- OAuth integration and security best practices
- Responsive design and user experience
- Docker containerization and deployment
- WebRTC-like features with audio messaging
- Advanced filtering and search algorithms
Matcha represents a production-ready dating platform with enterprise-level features, demonstrating proficiency in modern web development, database design, real-time communications, and user experience design.