What we are watching 📺
Tags: dohackathon, showdev, digitalocean, tailwindcss
Published: 2021-01-08 01:33:35

---
title: What we are watching 📺
published: true
date: 2021-01-08 00:15:00 UTC
tags: dohackathon, showdev, digitalocean, tailwind
canonical_url: https://www.benjaminrancourt.ca/what-we-are-watching
cover_image: https://www.benjaminrancourt.ca/temp/header-whatwearewatching.png
---
For the [**DigitalOcean App Platform Hackathon**](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) 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](https://www.marianemaynard.ca/) 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](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k#categories), but it is the closest. 🔀

### App link

You can find the application by visiting [**whatwearewatching-fwul5.ondigitalocean.app**](https://whatwearewatching-fwul5.ondigitalocean.app/). As I have also used Netlify CMS, you can visit the same app on [whatwearewatching.netlify.app](https://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.

![](https://www.benjaminrancourt.ca/temp/screenshot-whatwearewatching.png)<figcaption>Screenshot of the application on Firefox, at January 4, 2020</figcaption>

### 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**](https://gitlab.com/ranb2002/whatwearewatching) repository.

### Permissive license

I decided to release its source code under the **[MIT License](https://choosealicense.com/licenses/mit/)**, 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**](https://www.digitalocean.com/products/app-platform/).

### How I built it

I choose to integrate two other technologies that I wanted to try: **[Tailwind.css](https://tailwindcss.com/)**, a CSS framework that keeps coming back in the newsletters that I read, and **[Netlify CMS](https://www.netlifycms.org/)**, the content management system made by Netlify which is integrated with Git.

So I decided to start from the starter repository [**neat-starter**](https://github.com/surjithctly/neat-starter), a template that combines the two previous technologies with [**Eleventy**](https://www.11ty.dev/) and [Alpine.js](https://github.com/alpinejs/alpine). 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](https://www.npmjs.com/package/@sherby/eleventy-plugin-files-minifier) and [@sherby/eleventy-plugin-javascript](https://www.npmjs.com/package/@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](https://dev.to/ranb2002/how-to-have-valid-javascript-template-files-for-eleventy-2icd). I even found a [corner case](https://github.com/ranb2002/eleventy-plugin-files-minifier/pull/3) 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**](https://m.do.co/c/e79694c46dfc) 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](https://stackshare.io/ranb2002/what-we-are-watching)
- To see the latest entries to the hacktathon: [#dohackathon](https://dev.to/search?q=dohackathon&filters=class_name:Article&sort_by=published_at&sort_direction=desc)