Job hunting is tough – I’m busy until February 2022 but already feeling anxious about finding the next gig. That’s why I wanted to give myself a bit of an incentive – a visible indicator of success. I decided that whenever someone visits my portfolio site, I wanted an LED to light up. Read on to find out how I did it (using Flask, http requests, and an ESP8266)
Self Hosting
I recently had a bad experience with an online service shutting down on me – had a bit of a rant about it, although in the end it wasn’t too serious – but I am now determined to do self-hosting wherever possible *disclaimer: my current work project is hosted on Google Cloud, and I’m using Firebase and push services for some Android apps also.
The Flask api
The first step was to create a simple Flask api to facilitate tracking of site visits. This is based on this minimal flask api template on GitHub. I used a simple global variable to keep track of website visits because I’m doing this in my spare time and because it works fine – and I love boolean switches. Here is how it works in one simple gif:
Think of the hand as a visitor to my site, and the “switcher offer” is the ESP8266 at my home checking the api (the switch)
HTTP request from resume site
Since I am learning React my portfolio site was a good way to have another look at the framework. I used this single-page React resume site template as a base, adding my own details and an http request to the Flask api endpoint on load.
ESP8266 code
I used the basic http requests example with my own api details, and added in EEPROM code to record the incrementing number of visitors to persistent memory. The ESP8266 module checks once per second with the api whether there has been a new visitor to my site. If there has, the built in LED on my D1 Mini switches on. Although I have mostly moved over to using PlatformIO, for this very simple sketch I used the Arduino IDE.
Deployment
Like I said, this one is self-hosted. I’m using Digital Ocean droplets, which are a fixed cost of 5 dollars per month, for as many sites and services you can cram on there (trust me, it’s a lot). The React site was surprisingly simple to deploy, just build, copy the build folder and point Nginx at it. Flask is a little bit more complicated, compared to how easy it would be on Google Cloud, for example, but a few config files are really not too much to handle.
The result
Whenever someone visits my website, the LED lights up. Simple as that. And I can plug in and check how many visitors I have had. I’m hoping that one of those visitors will like what I do enough to hire me next year!
Visit my site https://devsoft.co.za to light up my visitor tracking LED.
Potential improvements
If I was making this into a product, I would certainly upgrade the Flask API to include a database to keep track of the number of visits, rather than doing this on the ESP8266 EEPROM – which maxes out at 255!* Obviously this could include a web interface for accessing the information, I could log the times… But most of this tracking stuff has been done already – analytics for websites. Perhaps the ESP8266 could pick up some of this information and display it on an LCD screen. A flask service for accessing Google Analytics from Arduino perhaps? Let me know if this is something you are interested in!
Also, proper authentication – if this wasn’t just for myself… JWT, rate limiting, CRUD endpoints and a web interface to change LED behaviour.
And maybe an RGB LED would be nice, then I could add in some of my other websites, in different colours!
*apparently the Arduino EEPROM library works differently on ESP8266 – ignore that part of the code, I need to update it (the counter still increments while the module is plugged in, though)