Building CineNex: My Journey Through Developing a Modern Movie Streaming Platform

Introduction

CineNex is a modern, user-friendly movie streaming platform inspired by Netflix. It features movie trailers and a comprehensive database of movies, delivering a seamless and visually appealing user experience. My project was built using cutting-edge technologies such as Next.js 14, Prisma, Supabase, and Shadcn UI.

Team Members:

• Yanga Rubushe (Project Lead, Frontend & Backend Developer)

Purpose:
CineNex was created for movie enthusiasts who want an easy and accessible way to browse and watch movie trailers. It provides users with a responsive and dynamic interface that works seamlessly across all devices.

My Focus:
As the project lead, I focused on the backend development and overall project management. My main goal was to ensure the application was scalable, secure, and provided an excellent user experience.

Check out the deployed site here: CineNex

My Story: Why I Chose This Project

Growing up in Mfuleni, a small township in Cape Town, movies were always my escape. I vividly remember my father bringing home a DVD player, and every Friday night, my family would gather around to watch a new film. Even when I visited my cousin house we would go to the taxi rank and buy some new movie CD’s. This tradition sparked my love for movies and technology. When it came time to choose a project for my final year, creating a movie streaming platform felt like the perfect intersection of my passions.

During my second year at the University of the Western Cape, I faced challenges with coding, which motivated me to push myself by taking on more difficult tasks. This project became my redemption arc, a way to prove to myself and others that I could overcome setbacks and create something impactful. CineNex isn’t just a platform; it’s a testament to resilience, dedication, and the power of combining technology with personal passion.

Architecture and Technologies

CineNex leverages the following technologies:

• Next.js 14: Used for server-side rendering and static site generation, providing a robust framework for building the application.
• Auth-Next: Implemented for secure authentication, allowing users to log in using Google, GitHub, and email.
• Prisma: An ORM for managing the database, making it easy to handle migrations and interact with the Supabase backend.
• Supabase: Used as the backend database, offering an open-source Firebase alternative.
• Shadcn UI: Employed for building the frontend components, ensuring a beautiful and responsive user interface.
• Vercel: Used for deploying the application, offering a seamless deployment process.

Key Features

1. Trailer Streaming: Watch high-quality trailers for the latest movies.
2. User Authentication: Secure login options using Google, GitHub, and email.
3. Responsive Design: Optimized for viewing on all devices.
4. Dynamic UI: Beautiful and responsive UI components from Shadcn UI and React.
5. Movie Database: Comprehensive movie database managed via Prisma and Supabase.

Challenges and Solutions

Most Difficult Technical Challenge: Implementing Secure User Authentication

Situation:
Early in the project, I decided to implement secure user authentication to provide personalized experiences. The goal was to enable users to log in using Google, GitHub, and email.

Task:
To achieve this, I needed to integrate OAuth authentication providers and ensure secure data handling.

Action:
I started by researching various authentication libraries and chose Auth-Next for its flexibility and security features. Implementing Google and GitHub OAuth was straightforward, but I encountered issues with handling tokens securely and ensuring the authentication flow worked seamlessly.

With only a few days left before the deadline, I reached out to peers and technical staff for assistance. Together, we troubleshooted the issues, and I followed a comprehensive guide on setting up OAuth with NextAuth.js. This involved configuring environment variables, securing API keys, and debugging the token exchange process.

Result:
After several iterations and late-night coding sessions, I successfully implemented secure user authentication. Users can now log in using their preferred methods, and their data is handled securely. This was a significant milestone, enhancing both the security and user experience of CineNex.

Learning and Reflections

This project taught me valuable lessons in perseverance, teamwork, and technical skills. Some key takeaways include:

• Technical Skills: I gained a deeper understanding of Next.js, Prisma, Supabase, and authentication protocols.
• Problem-Solving: Overcoming the authentication challenge showed me the importance of seeking help and collaborating with peers.
• Project Management: Balancing various aspects of the project, from coding to debugging, improved my time management and organizational skills.

Looking back, I would focus more on initial planning and testing to avoid last-minute rushes. However, the challenges faced and overcome have strengthened my resolve and technical abilities.

Conclusion

Developing CineNex has been a transformative journey. It encapsulates my love for movies and technology, demonstrating what can be achieved through dedication and hard work. I’m proud of the platform we’ve built and excited about the potential it holds for movie enthusiasts worldwide.

About Me

I am Yanga Rubushe, a Computer Science student at the University of the Western Cape and an ALX Software Engineering Programme student. Passionate about tech, chess, and watching movies. I strive to create impactful solutions through coding.

• GitHub: YangaRubushe
• LinkedIn: Yanga Rubushe
• X: Yanga Rubushe

Thank you for reading about my journey with CineNex. I hope you enjoy using the platform as much as I enjoyed creating it.