What we are watching 📺

For the DigitalOcean App Platform Hackathon on DEV.to, I decided to participate by creating a small application called What we are watching. You will find below my public post to officially submit it to the hackathon. 🌊

It is a little application to keep track of the TV series that my girlfriend Mariane and I are currently watching (or were watching).

What I built

Category submission

As this application is not a personal site or a portfolio, the only category available is Random Roulette. I am not sure it fits its description, but it is the closest. 🔀

App link

You can find the application by visiting whatwearewatching-fwul5.ondigitalocean.app. As I have also used Netlify CMS, you can visit the same app on whatwearewatching.netlify.app.

Screenshot

For the screenshot below, I manually removed some series from the list, to make it clearer. You can visit the website to find all of the series that we are watching (or were watching).

Note: the series images and logos in this screenshot are copyrighted by their respective authors.

Description

The application consists of a list of TV series cards containing their title, their number of season, an image and its viewing status for us. 🗽

The series can be sorted alphabetically (by default) or be grouped by their viewing status:

• Watching – Series that we are currently watching.
• Ready – Series that have at least one new season ready to watch.
• Waiting – Series that we are waiting for the next season.
• Wanting – Series that interested at least one of us and could therefore could be our next series to watch.
• Finished – Series that we have finished and they will be no longer new seasons.
• Cancelled – Series that we have finished and that have be cancelled by the producers.

Some series may also have their current season watched or additional information on when to check if a new season has been released.

Link to source code

If you want to check the source code of this little application, you can find it on my GitLab ranb2002/whatwearewatching repository.

Permissive license

I decided to release its source code under the MIT License, which is my default open source license that I use.

Background

My girlfriend and I watch a lot of TV shows. We have listened to so many series over the past few years that it is hard to remember whether or not we are waiting for a new season.

So I decided to build this website to list all the shows we listened to so that we could follow them properly.

It has been a while since I wanted to make this application, so when I read the hackathon announcement, I decided to give it a go and take the opportunity to start exploring the DigitalOcean's App Platform.

How I built it

I choose to integrate two other technologies that I wanted to try: Tailwind.css, a CSS framework that keeps coming back in the newsletters that I read, and Netlify CMS, the content management system made by Netlify which is integrated with Git.

So I decided to start from the starter repository neat-starter, a template that combines the two previous technologies with Eleventy and Alpine.js. I quickly get rid of the last one, beceause I could not found any utility for my project. As for Eleventy, I already built two blogs with it, but I choose to go with it to learn it in another way.

And finally, I planned to host the application on the DigitalOcean plateform.

You will find below more information about these technologies I have used and what I think about them.

Netlify CMS

I started the project by adding quick data into a Netlify CMS project. I wanted to know if I could use Netlify CMS to keep some data for my personal site while providing an interface to manage it.

Even though I like the simple interface, I am still not sure that I like the data to be committed to the same Git project that I used to build my application. I had some issues with Git because my local branch was behind the remote main branch, but maybe it is only because I used Windows as my operating system. I really should install a dual boot on my computer to develop on a Linux distribution!

Fortunately, the interface allowed my partner to help me finish creating all the series we are watching. So, I think I will see in the future if I continue to use that product.

Eleventy

To learn more on Eleventy, I started the project without using the two Node.js packages, @sherby/eleventy-plugin-files-minifier and @sherby/eleventy-plugin-javascript, that I have developed earlier. This allowed me to gain more knowledge about how Eleventy uses files for their data collection. But, after a while, I added them as I wanted to format automatically my JavaScript code. I even found a corner case that I did not know in one of my package!

Tailwind.css

I explored more Tailwind at the end of the project, as I am not really fond of styling. Even thought I have just explored a bip of the framework, I am impressed with it and I think I should continue to learn it in my next projects.

DigitalOcean

I finally created a DigitalOcean account to explore its App platform and to host my static app. I was overly surprised to see how much easy I have deployed my application, it only took 3 minutes and 95 % of that time was to wait while the platform was building my application. I connected my GitLab account, choose my application repository, set some minor settings and voila!

I feel like I'm going to have a lot of fun with DigitalOcean platform in the next few weeks, even though we may be homebound in the context of COVID-19.

I you want to try Digital Ocean products, you can use my referral link and get $100 in credits over 60 days. In return, I will get $25 once you have spent the same amount. It's a win-win situation. Thank you! 😉

Additional information

• The complete stack on StackShare.io
• To see the latest entries to the hacktathon: #dohackathon