DogeFlix

Short Explanation

There are many sites to watch movies. But when it comes to movie trailers, there are handful of sites that cover them. Morever, most of the trailers are uploaded on sites like YouTube. DogeFlix is a platform that contains handpicked movie trailers, with a lot of information around the movie itself. It is backed by IMDB for real data. You can say it is a YouTube clone but specifically for movie trailers.

Project Goals

This project aims to create a platform to watch movie trailers all around the world. This website has several functionalties such as:

• Watch movie trailers categorically
• Read more information about a movie
• See IMDb rating, plot and year of a movie
• Ability to comment on a movie trailer (Requires user sign-in)
• Ability to react with various emotes such as PepeNice, PepeYikes, KEKW, and PogU
• Create public playlists to share with others. Playlist can be edited, renamed, or deleted etc.
• Maintain a collection of favorite trailers in your favorites playlist.
• Search by movie title, imdb rating or imdb ID (if you can memorize it haha :P)

Tech Stack Used

DogeFlix is written in TypeScript language from backend to frontend. TypeScript is a superset of JavaScript which compiles down to plain JavaScript. It provides type-safety to ensure high quality code delivery. DogeFlix embraces TypeScript by making use of generics, interfaces and combined with NextJS, it is super awesome! I absolutely love and recommend learning TypeScript.

The backend uses Express.JS framework for Node.JS. I feel Express.JS is much stable, reliable and still trusted by lot of enterprise companies. While Koa, Fastify and Hapi exists, Express is something that gets the job done. I'm open to learning more backend frameworks. All the data is stored on PostgreSQL instance spinned upon Railway Railway is generous enough to provide upto 500Mb PostgreSQL Storage.

To work with relational DBs, we often need ORM (Object Relational Mapping) Framework. Prisma is an amazing ORM to work with relational databases. It provides a type-safe way to work on database. The DX is so good. Highly recommend using prisma. They recently added support for MongoDB as well.

Frontend is a Next.JS application styled by TailwindCSS. I opted to use SWR for data fetching. SWR means Stale While Revalidate and it provides hooks that provide de-duplication of queries. SWR supports React Suspense API out of the box, supports all sorts of pagination, and it is SSG/SSR ready.

To style DogeFlix, I chose tailwindCSS. It makes styling a breeze. Contarary to a popular belief, I learnt CSS more from tailwindCSS usage than anything else. While the industry is split between CSS-in-JS and Utility based CSS frameworks, I personally think you should use whatever makes you productive. Tailwind provides amazing DX through JIT mode, IDE autocompletion.

Tech Stack Summarised:

• Next.JS
• TypeScript
• Express.JS
• PostgreSQL
• Node.JS

Screenshots (click to enlarge)

Key Learnings

• Pagination matters. You simply cannot render 100+ items on the initial render on a react application. It will take a toll on performance as you scale up. Pagination is a neat way to handle this. I consolidated my knowledge of cursor based pagination, implemented infinite load more pagination using SWR that too backed by Prisma!
• Initial data gathering is hard. To seed the database, I had to write a Node.JS Data scrapping script that would fetch data from multiple APIs, modify the data, dump the data as JSON and finally seed into the database.

Try it out!

DogeFlix

Miscellanous

It took me around ~20 days to build dogeflix from scratch. I have a great full stack starter template thats battery packed with EsLint, Prettier and other goodies. Something I will open source very soon!