💘 Matcha
Welcome to Matcha, a real-time, fully-featured dating platform built with Ruby, React, and Love 💎
Swipe, connect, chat — all backed by a beautiful API and blazing-fast frontend.
🎥 Demo Preview (Login)
***
🎥 Demo Preview (Profile & Matching)
🌐 Live Preview
🧱 The Architecture
| Layer |
Stack |
| Backend |
Sinatra + PostgreSQL + RSpec + Docker |
| Frontend |
React 18 + TypeScript + Vite + Tailwind |
| Live Docs |
Static Viewer with Simulated API Calls |
| Auth |
JWT + OAuth (Google, Intra42) |
| Realtime |
WebSockets for Chat, Typing Indicators and audio with Faye |
🧭 Architecture Diagram
For the backend we decided to implement an API with Sinatra, following M~V~C (model-~view~-controller)
And we created a Domain-specific language (DSL) for the API documentation.
├── api
│ ├── app
│ │ ├── controllers
│ │ ├── helpers
│ │ ├── lib
│ │ └── models
│ ├── config
│ ├── db
│ │ └── migrate
│ ├── docs
│ └── spec
│ ├── controllers
│ ├── helpers
│ └── models
├── docs
└── web
├── public
└── src
├── api
├── components
│ ├── chat
│ ├── forms
│ ├── location
│ ├── match
│ └── profile
├── context
├── hooks
├── pages
├── types
└── utils
🔥 Core Features
- 🧪 TDD API with RSpec [100% endpoint coverage]
- 🔐 JWT Auth with confirmation, ban, and session validation
- 💬 Live Messaging with typing detection
- 💑 Matching System with filters and geolocation
- 📞 Voice Chat
- 📷 Picture Uploads & Profile Management
- 📦 Fully Dockerized Setup
- 📘 API Docs Generator with simulation UI
### 🖼️ Screenshots
🧭 Dashboard — Real-time feed and quick actions
| | |
| ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| 💬 Real-time feed showing new matches, profile activity, and shortcuts to actions. |  |
💬 Chat Interface — WebSocket-powered messaging + voice
| | |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Messaging UI with live typing indicators, full message history, and voice call button. |  |
👤 Profile Page — View user bios, tags, and photos
| | |
| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Full user profile with block/report actions, pictures, online status, and shared tags. |  |
🗺️ Matches (Map View) — Interactive exploration
| | |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Discover matches based on location. Interactive map with card popups and quick connect. |  |
💘 Matches (List) — Customizable filter for matches
| | |
| -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Search people to fall in love! |  |
💡 Philosophy
📜 Everything documented
🧪 Everything tested
🧼 Everything clean
💥 Everything fails gracefully
❤️ Everything feels human
Made with 💘 by @Jsarda42 & @pulgamecanica