CineVault

An entertainment and social product for tracking media and sharing collections.

RoleFull Stack Developer

Status: In progress
Platforms: Web, Backend

Live Demo

Technology Stack

Next.js

TypeScript

React

Express

PostgreSQL

Prisma

Redis

TanStack Query

Zustand

Socket.IO

Key Challenges

Modeling collections, follows, saved content, and collaboration without duplicating externally sourced media metadata.
Coordinating cached remote data, local interaction state, and live social notifications.
Persisting drag-and-drop collection order while keeping membership and ownership rules in the backend.

Key Learnings

Separating product-owned relational data from third-party discovery metadata.
Using server-state caching and client-state stores for different responsibilities.
Connecting refresh-token sessions, Redis-backed infrastructure, and user-specific real-time events.

Overview

CineVault is my personal entertainment and social product for discovering media, maintaining a personal library, and sharing collections. I built the Next.js frontend and modular Express backend, including authentication, media tracking, collection management, social relationships, and collaboration.

TMDB supplies discovery metadata. PostgreSQL stores the product-specific relationships: what a user tracks, saves, organizes, and shares with other people.

Key Features

Media Discovery and Tracking

Connect external media discovery to user-owned media entries and a personal entertainment library.

Collections and Ordering

Organize media into collections, manage collection items, and use drag-and-drop interactions to persist their order.

Social Relationships

Follow other users and connect social activity to saved content and notifications.

Collection Collaboration

Model collaborative collections and their participants separately from personal library entries.

Personal Notifications

Use authenticated Socket.IO rooms to deliver events to the relevant user rather than broadcasting all activity to every client.

Technical Implementation

The Next.js/React frontend uses TypeScript, TanStack Query for server data, and Zustand for local interaction state. A modular Express API handles product operations; Prisma maps the PostgreSQL schema for users, media entries, collections, follows, saved content, and collaboration.

Relational persistence: Collection items and social relationships are product-owned database records, distinct from TMDB metadata.
Remote data: TanStack Query coordinates fetching and cache updates for API-backed screens.
Client state: Zustand keeps transient UI state separate from persisted server records.
Interactions: Drag-and-drop collection management connects UI ordering to backend persistence.
Authentication: JWT refresh flows support authenticated sessions.
Infrastructure: Redis supports caching and the Socket.IO adapter; Cloudinary handles media uploads.

Architecture and Tradeoffs

External media lookup and local social state change for different reasons. Keeping them separate prevents a third-party catalog response from becoming the authority for user-created collection membership or collaboration. Server-data caching and local UI state also have different lifecycles, so they use separate tools.

Real-Time Updates and Session Handling

Personal Socket.IO rooms target notifications to the intended recipient. The Redis adapter coordinates socket events, while session and cache handling remain backend responsibilities. Client events complement persisted API state rather than replacing authorization or database records.

Have a project or opportunity in mind?

Let's discuss employment opportunities or freelance work.

Contact Kunj