Skip to content

A Fully Responsive clone of Netflix website built using NextJS, Tailwind, Prisma and Vercel. 🎬

Notifications You must be signed in to change notification settings

lorematteo/my-matflix

Repository files navigation

image

Try Matflix

🎯 Introduction and Objectives of the project

The primary objective was to produce a functional prototype of the Netflix website to showcase its feasibility and potential for future development. Working independently, I dedicated effort to ensure the application's ease of use, visual appeal, and integration of essential features like user authentication, a personalized movie list, and an admin panel.

The application offers users a convenient entertainment experience, featuring effortless access to diverse genres of movies and TV shows. The My List functionality functions effectively, enabling users to curate their custom lists of movies. The user interface is designed to be visually appealing and user-friendly. In summary, I believe that this Netflix clone stands as a robust proof of concept for a streaming platform, achieved through solo development efforts.

In adherence to legal standards, this website exclusively features movie trailers and refrains from utilizing any unlawfully acquired content to ensure compliance with copyright regulations.


✨ System design

I focused on the system design phase of the project to establish the architecture and design of the software. This phase was pivotal in guaranteeing that the software aligned with the specified requirements and could be implemented efficiently.

In order to enhance comprehension of the project, I generated various graphs and diagrams.

Some examples of the types of diagrams I employed include:

Wireframes

To help visualize the design of my software during the system design phase, I made some low-fi wireframes. These wireframes are a quick and simple way to sketch out the basic layout and functionality of a user interface before moving on to more detailed designs.

wireframe1 wireframe2 wireframe3
wireframe4 wireframe5 wireframe6
wireframe7 wireframe8 wireframe9
wireframe10 wireframe11

Navigational Structure

When I was creating the navigational structure for my Netflix clone app, I used sketches and diagrams to visually map out the different pages and features of the app, as well as the connections between them.

nav1 nav2 nav3

Flowchart

For the flowchart of Matflix, I wanted to map out the user flow to ensure that everything was easy to understand and logical for users. I started by identifying the different stages of the user journey, like loggin in, browsing content, and playing videos.

flowchart

Entity Relationship Diagram (ERD)

The ERD was a valuable tool for me to visualize the relationships between different entities within my application, and it helped me to gain a deeper understanding of how they all interacted with one another.

erd

📄 References

Here are all the amazing resources that helped me make this project a reality. Without them, I wouldn't have been able to create such an awesome app. I'm extremely grateful for all the knowledge, content and services they shared with me !

Movies content (trailers, backdrops, logo, data)
Image set hosting service
Inspiration
Documentation
General help
Deployment


About

A Fully Responsive clone of Netflix website built using NextJS, Tailwind, Prisma and Vercel. 🎬

Topics

Resources

Stars

Watchers

Forks

Languages