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
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. 🔀
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.
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.
The application consists of a list of TV series cards containing their title, their number of seasons, 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 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 been 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.
I decided to release its source code under the MIT License, which is the default open source license that I use.
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 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, because 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 platform.
You will find below more information about these technologies I have used and what I think about them.
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 write code 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.
I explored more Tailwind at the end of the project, as I am not really fond of styling. Even though I have just explored a bit of the framework, I am impressed with it and I think I should continue to learn it in my next projects.
I finally created a DigitalOcean account to explore its App platform and to host my static app. I was overly surprised to see how 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 the DigitalOcean platform in the next few weeks, even though we may be homebound in the context of COVID-19.
I you want to try DigitalOcean 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! 😉
- The complete stack on StackShare.io
- To see the latest entries to the hackathon: #dohackathon