// WEB

Movie CMS

A full-stack movie platform featuring an admin CMS, public website for browsing movie information and trailers, mobile app, and shared backend services.

ROLEFull-Stack Developer
TEAMSolo project
CONTEXTPersonal project
CREATED2023
React.jsViteReduxTailwindExpress.jsSequelizePostgreSQLSupabaseGraphQLMongoDBRedisAWS EC2NetlifyReact NativeExpo
Live projectSource code

Overview

Movie CMS is a full-stack movie platform with a design inspired by Netflix’s visual style and content presentation.

The project consists of multiple applications working together:

  • Admin CMS (Frontend) — Manage application content through CRUD operations
  • Public Website (Frontend) — Browse and view available content
  • Mobile App (Frontend) — A mobile app version of the public website
  • Backend Services — Provide APIs, database access, and application logic

The project was created as an opportunity to work with a broader full-stack architecture rather than building a single frontend application.

Technical approach

For this project, I worked with:

  • React.js, Vite, Redux, and Tailwind CSS for the web clients
  • Node.js, Express.js, and GraphQL for the backend
  • PostgreSQL and Sequelize for relational data
  • SQL transactions for reliable data updates
  • MongoDB and Redis for data storage and caching
  • React Native and Expo for the mobile app
  • Firebase Hosting initially, later migrated to Netlify for the web clients
  • AWS EC2 for backend deployment

Admin CMS

The admin CMS acts as the content management interface for the platform. It provides an administrative interface for managing the data consumed by the user-facing application.

Netflix CMS admin interface

Netflix CMS admin content management interface

Admin CMS Demo

Public Website

The public website provides a read-only interface for browsing the available content. The design takes inspiration from Netflix while implementing the application’s own interface and functionality.

Netflix-inspired user client

Netflix-inspired user client content interface

Public Website Demo

Mobile App

A mobile version of the public website was also developed. This allowed the same project to be explored across both web and mobile platforms.

Demo

Lessons learned

This project gave me the chance to work with state management, APIs, GraphQL, different types of databases, caching, CRUD systems, deployment, and mobile development. 😮‍💨 Phew, that’s a lot.

One thing I learned from this project is that getting each part working is only part of the challenge. The real work is getting all the pieces to work well together.

Looking back, that's probably what I liked most about this project. There was always another part of the system to figure out.