A personalized movie discovery web application, built with React, for film enthusiast to browse, track, and discuss their favourite cinema!

CineTrack is a full-stack web application built using React and Node.js that serves as a personalized movie discovery and community hub. Showcasing responsive interface design, secure user authentication with JWT, and seamless real-time data integration with the TMDB API. Built from the ground up using JavaScript, Node.Js, Express, and MongoDB, it provides film enthusiasts with dynamic movie browsing, interactive discussions, and personalized watchlist tracking. Users can create accounts, search and filter trending films, curate custom favourites lists, join discussions through movie-specific comment threads, and benefit from role-based account moderation. 

Engine:  React, Node.Js, Express

Tools:  JavaScript, MongoDB, Mongoose, TMDB API, JWT,  Postman

Project Type: Team (2 members), Academic (IAT 459: Internet Computing Technologies)

Duration: 4 months

Genre:  Full Stack Web Application

Focus: Backend Architecture, Authentication Security, and RESTful API Integration 

• Architected and implemented the core backend engine using Node.js and Express, designing scalable RESTful API endpoints for user authentication, movie browsing via TMDB, favorites management, and community comments.

• Engineered secure authentication and role-based access control (RBAC) utilizing JSON Web Tokens (JWT) and bcryptjs hashing, enforcing strict backend trust boundaries through custom middleware for visitors, members, and administrators.

• Structured relational data schemas in MongoDB using Mongoose with indexing for high-performance querying, and implemented backend ownership verification to prevent ID-spoofing during comment and favorites CRUD operations

• Challenge: Managing the client-server trust boundary and preventing unauthorized access or ID-spoofing during comment edits and deletions.

• Solution: Solved this by moving security logic entirely away from client-side assumptions and enforcing backend authorization middleware that verifies comment.userId === req.userId directly against database records before allowing modifications.

• Challenge: Fixing the "refresh-to-login" bug where page reloads caused premature redirects due to asynchronous authentication hydration.

• Solution: Resolved this by introducing an explicit loading state in the AuthContext to pause route evaluations until localStorage session checks were fully resolved.

• Implemented secure user authentication and session persistence using JSON Web Tokens (JWT) and bcryptjs hashing, integrated with custom middleware to manage protected routes and role-based permissions.

• Integrated the external TMDB REST API to fetch and render real-time trending movies, detailed metadata, and cover art across dynamic browsing feeds.

• Engineered full CRUD operations for user watchlists and discussion threads, implementing database-level ownership verification and administrative moderation tools like real-time account banning. 

Working on CineTrack was a valuable experience that deepened my understanding of full-stack web architecture and backend system design. Architecting the platform’s core engine, managing the trust boundary between client and server, and building secure authentication pipelines showed me the importance of robust data validation and scalable RESTful API design. Collaborating closely to connect our React frontend with a secure Express and MongoDB backend reinforced how rewarding it is to build a reliable, user-focused web application from the ground up.