Hey DEV Community! 👋
I'm excited to share MovieMate, a modern full-stack movie and TV show discovery platform designed to streamline content exploration, real-time community engagement, and personal watch telemetry.
Here is a look at what I built, how it works, and the engineering choices behind it.
🌐 Live Links
- 🚀 Frontend (Vercel): movie-mate-seven-nu.vercel.app
- ⚙️ Backend API (Render): moviemate-l4ts.onrender.com
✨ Core Features
-
🔐 Authentication & Security
- Google OAuth 2.0: Smooth one-click authentication.
- JWT Auth System: Secure token rotation using access and refresh tokens.
- Custom Profiles: Avatar uploads and customizable user settings.
-
🔎 Discovery & Telemetry
- Real-time Search: Dynamic filtering with instant API responses.
- Interactive Spotlight: Hero carousel featuring trending media powered by TMDB.
- OTT Aggregation: Instant insight into where movies are streaming live.
-
📚 Personal Library & AI Insights
- Watchlist & Favorites: Save, organize, and manage watch history.
- Personalized Recommendations: Dynamic suggestions tailored to user interaction.
- Analytics Dashboard: Visual watch-metric insights rendered using Chart.js/Recharts.
-
💬 Real-Time Interaction
- Live Commentary & Notifications: WebSockets powered by Socket.io for real-time discussion threads without page refreshes.
🛠️ Tech Stack & Architecture
| Layer | Technology | Usage |
|---|---|---|
| Frontend | React.js (Vite), React Router | High-performance SPA & routing |
| Styling & UI | CSS Modules, Chart.js / Recharts | Custom styling & interactive data visualization |
| Backend | Node.js, Express.js | RESTful API architecture |
| Real-Time | Socket.io | Bi-directional communication for comments & alerts |
| Primary Database | MongoDB + Mongoose | User libraries, preferences, session data |
| Relational Storage | PostgreSQL + Prisma ORM | Structured real-time comments & notification schemas |
| Authentication | JWT, bcrypt, @react-oauth/google
|
Multi-provider authentication layer |
| Data Source | TMDB API | External media catalog source |
| Deployment | Vercel & Render | Production CI/CD hosting |
💡 Key Technical Challenge & Solution
Dual-Database Hybrid Architecture
To optimize performance, I opted for a hybrid database model:
- MongoDB handles unstructured, highly dynamic data like dynamic watchlists, flexible user settings, and rapid session logs.
- PostgreSQL (via Prisma) handles structured relational entities such as deeply nested comment trees and targeted activity notifications.
This separation keeps key-value reads ultra-fast on MongoDB while maintaining transactional integrity for community discussions in PostgreSQL.
I'd love to get feedback from the community! Feel free to test out the platform and leave your thoughts below. 💬
Happy coding! 🍿
Top comments (0)