The third challenge was to create a calculator. I wanted to practise my CSS art and so chose an image of an old Casio calculator and tried to recreate it as closely as possible. It was quite a challenge creating the code for the calculator to function. It wasn’t as simple as just adding numbers together. Each key had to be mapped to it’s own function.
The second challenge was to create a fitness app. I chose to make an activity tracker. I took inspiration from Lifelog, an app by Sony that I used for many years. I used the Google Maps API and created a component in Vue for the activities.
Me and Eleanor Morgan participated in the Adobe XD Challenge. I wanted to use Vue.js rather than practise my skills in XD as I view myself as more of a developer than a designer.
The first challenge was to create a music player. I played around with the audio API and used some CSS animations.
I like to keep track of the TV Shows I watch. I used to do this in a Word Document and manually go to IMDb and check whether the show was running or had been cancelled and then add the TV Show to my calendar. I decided to build an app that would do this for me.
My TV Show app is behind somewhat of a firewall, Cloudflare Access. I didn’t want the hassle of rolling an authentication system with my simple app so I decided to use Cloudflare Access instead. Otherwise, anyone would be able to add or remove TV Shows from my list. If you got to https://tv.joebailey.xyz you’ll see that you have to log in with Cloudflare first.
The app queries the episodate API when you perform a search and stores the added TV Show in a Fauna Database. It does this by using a Lambda function hosted on Netlify. There are also Lambdas for removing and viewing saved TV Shows.
The app then queries the Fauna Database for all currently watching TV Shows and fetches information on them from the episodate API. The TV show is green for currently airing. Red for cancelled/finished. And has no colour for shows that haven’t announced new episodes yet.
The app exports all of the episodes set in the future to an iCal file which you can download and import into any calendar software. This is still a bit of a manual task and I wanted to automate it further so I created another Lambda function that fetches the TV Show information, and serves the calendar. This was quite a tricky process as I had to learn a lot more about Lambdas than just copying the FaunaDB examples. I got it working but it takes about 16 seconds to query all of the TV Shows I watch, longer than the 10-second execution limit on Netlify. I shopped around for another solution and came across Serverless, which makes deploying on AWS simpler. It only needs about 100mb of memory so I adjusted that limit accordingly.
If I were to make this a production app I’d probably cache the API in Local Storage or in the Fauna Database and find a way of not having to query every TV Show when something is removed or added.
If you want to get set up you can fork my repository and add a .env file containing your FaunaDB secret. Or, if you want a Lambda function acting as a webCal you can fork that repo and query any API you like. It uses ics.js to create the webCal.
Following on from developing the HitTastic! site we had to create a site in PHP that allows users to view POI’s stored in a database, and contribute to this database. We had to do some basic styles to go along with it.
In my second year of university, I did a PHP unit where we were tasked with creating a site showing the number one songs from a certain year. We had to make a login, connect to a database, and perform a search. This was to teach us the basics of PHP and SQL for us to complete our assignment, creating a website for viewing and reviewing points of interest.
Whilst I was searching for a placement I had a few tasks to complete for various roles I was interviewing for. One of these tasks was to create a simple Hangman game in PHP.