I celebrated New Year by deploying a website! (2022) — khiladi.watchguides.info
First of all, Happy New Year Everyone 🎉🥳 !
While others were having fun and doing party with their friends and family on new year’s eve, I was coding a simple website to learn the ins and outs of NextJS framework. If i remember it correctly, this was the most productive day (in context of programming and working on projects) I had this year. Usually, I get tired after my work shift and I can hardly code for an hour, but yesterday, I used my holiday to complete one of my project and learn something new, and that’s what I want to share with you today.
Introduction of the website
Before I jump into the details, let’s have a small introduction of what I made and why. You can think of this website as a prototype of other watch-guides I will be creating in the future. My plan with this project is to create and share proper watch guides for different movie franchise, anime and cinematic universe so that their fans can watch their content in proper order. At core, the concept is pretty simple and easy to apply as long as you have good data, which is why I was looking for a movie only franchise that I was aware of and its easier to get right information. That is why I decided to go with a popular Bollywood franchise: Khiladi (in English, it translates to “Player”).
The main features of this website is:
- The Data (list of all the movies which were part of these franchise, in their release order)
- Search functionality
- Responsive Design
- Dark Mode 🖤 !
- Open Source Code Base — https://github.com/harshPPatel/watch-guides (It’s an NX workspace with NextJS project)
My experience on New Year’s Eve
If you look at the website and the code for this project, it is a pretty simple website. The website only have one page which loads all the movies for users. There is a simple search (no fuzzy search support yet 🙁) box which lets you filter out the results. It also has a dark mode support using TailwindCSS.
I could have just called it a day and deploy it about 6~7 hours earlier but I still had to refactor the code so that it can be used across different website with different dataset. It does not fully support all the future datasets I will be using, but it will require very minimum changes in future. I have refactored the code into components which takes input dynamically. Currently these components lives inside the Khiladi project but whenever I start working on the next website, I can easily move them to a common UI react library in NX workspace.
The hard part: The deploy
I was done with my code at around 10:PM but I started working on deploying a website. At this point I was using <Image /> tag from NextJS. It was working just fine in development environment but it started throwing me errors when I tried to build the website. It was erroring out because the default loader for this tag does not support images from TheMovieDB Website. I tried creating my custom loader and I think it worked, but it still kept throwing errors for other tags which were importing static image.
I was really confused and annoyed at this point. At this point, I could have moved the images to my Cloudinary account as the <Image /> tag does support Cloudinary out of the box and it also improves the performance of the website but at this point I was too exhausted and I dropped the idea and replaced them with our good old<img /> tag.
After making some more changes, the build and export commands were working fine and I was able to generate static HTML files for the website. I was so happy at this point 😍! I think these commands worked at around 11:45PM and I only had 15 minutes left to deploy this watch guide on the start of new year! So, I avoided using Vercel as I do not have experience with their service recently. Which is why I decided to use Firebase for hosting.
After the hard work of a whole day, I finally finished one project in 2021 and deployed a website at the start of 2022! I am just glad that I was able to match my goal for yesterday!
Conclusion
Please let me know if you have any suggestion for this project. Feel free to create an issue if you notice any bug on the website. Please give a clap/like to the website if you liked the content and share it with your friends!
And once again, Happy New Year everyone!
