Adobe XD Challenge Calculator

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.

Adobe XD Challenge Fitness App

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.

Southampton Focus

Southampton Focus is the online place to go for finding businesses in and around the area. Businesses pay for a listing on the site and get free access to Southampton Focus’ vast social network presence.

Southampton Focus already had a site but decided to scrap it and start completely afresh. They chose a theme from Theme Forest and I configured WordPress and the theme to their specifications. I had to customize the theme quite a bit to get it to the functionality that was advertised on Theme Forest, and we used many different plugins together to give the site company listings functionality.

Overall, I’m really pleased with how it turned out considering the scope of the site.

Stakks Pancake House

This Pancake House in Southampton wanted a complete website redesign. They got Mirror Digital Media to design the site and I built a custom WordPress theme from the designs. I then migrated all of the old blog posts to the new website and made a couple of small design changes that weren’t finalized in the initial design before pushing the website live. I used Local by FlyWheel to develop the site but there was a lot of hassle with sending an ngrok link every day for the client to view the site. In the future, I’m just going to create sites under a subdomain on my Digital Ocean Droplet and work on them there so that my client will be able to access them at all times.

Train In Blocks

I started working with Mikey Lau, founder of Train In Blocks in April 2020. He wanted to create a web app for personal trainers to manage their clients. We had a lot of project meetings to work out how best to implement such an app and I was given complete control of the implementation. I decided Okta was a good fit for Authentication, and we were going to use Stripe to process payments. As I love Vue I decided to use that on the front end, and I have quite a bit of experience with PHP so used that, along with slim, to create an API for updating content in a MySQL database.

Initially, I did a lot of the front-end work, but I taught Mikey HTML, CSS, and Vue and started to move more into a project manager role and backend developer. I created a Stripe WebHook to handle sign-ups which then creates a user in Okta and sends the customer an email about their new account. We also created a site in Nuxt for sign-ups to take place and for potential customers to learn more about the application.

TV Shows App

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.

I decided to try and learn a new framework whilst creating this fun little side-project. I’ve heard good things about Svelte so decided to give it a shot. It’s a framework very much like Vue (which I love by the way). It splits it’s template files into CSS, HTML, and JavaScript which made it easy to get the hang of. It doesn’t come with something like Vue data, and there’s a weird thing where you need to tell the framework a variable has changed by doing variable = variable. Svelte devtools aren’t anywhere near as intuitive either. These small little things are the price you pay for infinitely better load times. All the processing is done in a compile step, whereas, Vue does all it’s processing in the browser. It’s a framework I’d go to for a simple static site that might have some components that are easier to create in a framework than with vanilla JavaScript. For most of my projects though, I’ll be sticking to Vue.

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.