DogeFlix is a place where you can watch latest movie trailers. Create playlists, share playlists and browse through 100s of movie trailers.
Omkar Kulkarni / Jan-2022
4 min read • 689 characters
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.
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)
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:
- 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.
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!