Have you ever watched a movie that resonated with you so deeply that it seemed to shake your very core? We all have those films that leave a lasting impression, sparking ideas and emotions that linger long after the credits roll. I’ve always wanted to document my connection with these cinematic gems, exploring the profound concepts they present and how they intersect with my own thoughts and experiences.

That’s why I embarked on this personal project—a blog compiling reflections on films that have touched my life. But this isn't just about sharing movie musings; it’s also my playground for diving into CMS development using NextJS and ReactJS.

The heart of my project lies in building and deploying a full-stack Netflix clone. Styled in Tailwind CSS and utilizing Server Side Rendering with NextJS, TypeScript, and ReactJS, this project is a blend of creativity and technical prowess. I’m using The Movie Database (TMDB) as the source for movie assets like posters, logos, and details. TMDB’s community-driven and continually evolving database is a goldmine for this project, providing free access to movie categories, screening dates, stars, ratings, and descriptions.

Creating a blog meant that content management was crucial. I needed a solution to handle my .md files efficiently, ensuring they were parsed and presented beautifully by NextJS. After some research, I discovered the ContentLayer package, which fetches .mdx or .md files and generates static HTML files upon build. This seamlessly integrated with deployment platforms like Vercel and Netlify, using a GitHub repo as a database for these static files.

The challenge lay in making this interface as dynamic and image-heavy as a Netflix UI while ensuring it was user-friendly for content creators who might not be developers. The solution? NetlifyCMS, now known as DecapCMS. It allows for raw markdown files, making it future-proof and easily integratable with Netlify, providing a seamless experience for non-developers to create content.

The content workflow is designed to be seamless. Content is pushed through the GitHub repository and automatically generated by Vercel or Netlify. Content creation is handled via a markdown editor that is git-enabled, typically using VSCode. However, I recognized a challenge here: not all writers are developers, and not all are familiar with VSCode, Git, and markdown.

To bridge this gap, I chose to use NetlifyCMS (now known as DecapCMS). This CMS retains the raw markdown file, ensuring future-proof content. It also integrates effortlessly with Netlify, making the setup smooth and user-friendly. With DecapCMS, even non-developers can easily manage and create content, enhancing the usability and accessibility of the blog.

To complete the UI, I designed a simple yet effective logo: a squircle in widescreen proportions with the word REEL inside. It perfectly encapsulates the essence of this project.

The final product boasts a superb UI/UX, making it an ideal platform for simple, common-style blogging. However, there were challenges, particularly with breakpoints and the stability of some open-source libraries. For instance, NextJS has moved to version 14, and ContentLayer hasn't kept pace with updates, causing some compatibility issues.

A notable point of reflection is the future of NetlifyCMS. There's talk about its decline, prompting my move towards Static CMS. This shift may necessitate a migration of my site to ensure long-term stability and support.

I'm thrilled with the outcome of this project and the learning experience it provided. But I'm always on the lookout for new ideas and inspirations. Do you know of an interface that could work well for an app like this? Perhaps another take on the Netflix interface for some other application? I'd love to hear your thoughts!

Feel free to explore more of my work or reach out if you have similar design needs. Thank you for joining me on this journey, and I look forward to creating even more exciting projects in the future!