Chris Shelton
UK - Leeds / London / Remote
Software Engineer
Laptop, phone, earphone and notepads on a desk

Personal Projects

A glimpse into some of the projects I have been working on in my personal time

I spend some of my personal time working on personal and side projects. This allows me to learn new skills and work with different technologies than my day-to-day job requires. Below are some examples of what I've been working on.

Holiday Home Booking System

View Article

A web application written in Next.js (React) and TypeScript, leveraging serverless technology, to allow overnight bookings to be made at a family holiday home.

The goal of this project was to build a system which had a full login and logout flow, and would allow users to view all bookings, as well as make and delete bookings at the holiday home. I planned to complete all of this within the space of a few evenings and with zero costs. As described in the accompanying blog post, I met this goal with the technology tagged below.

This was a really interesting hobby project to work on, allowing me to gain exposure to new technologies and approaches to building web applications which I will certainly carry forward into future projects I work on.

TypeScript
React
Next.js
Gatsby
Auth0
Supabase
Netlify
Netlify Functions

ASP.NET Core Dependency Tools

View Source View Article

A set of .NET Standard libraries for working with web dependencies in ASP.NET Core, published to NuGet using Azure Dev Ops.

The first tool is the Web Dependency Validator, which aims to verify that all dependencies in the dependency chain of ASP.NET controllers have been set up in the Inversion of Control (IoC) container. It stops app execution shortly after running and logs an error to make it easier to identify dependency problems, which is more helpful than the app starting, but then throwing an error when HTTP requests are made to the app.

.NET Core
ASP.NET Core
.NET Standard
C#
IoC
NuGet
CI/CD
Azure DevOps
Cross Platform

RabbitMQ Demo

I have an interest in the technical architecture aspect of software development — taking a problem and decomposing it down to its key parts, and then understanding how the code can be designed and what software design principles and patterns can be applied to produce a quality solution which is testable, maintainable and resilient to future change (which is inevitable).

The project is .NET focused, and makes use of standard object oriented and SOLID design principles, to help build an example solution with the above considerations in mind. It also gave me a chance to work with the most up-to-date .NET Core and Standard versions all on my Raspberry Pi.

.NET Standard
.NET Core
C#
RabbitMQ
Message broker

Home Dashboard App

I wanted to be able to use a tablet as a central view and management tool for day-to-day activities and general things around my house. It's useful to have common things in one view, like the local weather.

I created a web application using Vue and ASP.NET Core WebAPI, and hosted it on my Raspberry Pi using Docker (some of the features required a LAN connection so cloud hosting wasn't an option). For data storage, I chose a Google Firestore document database — I wanted something cloud-hosted and free for basic use. I needed the app to work in real-time, feeding live updates to the browser without needing to refresh the page; SignalR seemed like the obvious choice. To get the app onto the tablet, I created a single-page Xamarin Forms app which rendered the site in a WebView — it didn't seem worth it to create the app natively. I wanted to strengthen my Vue skills and also have the flexibility of viewing the app on other devices.

ASP.NET Core WebAPI
HTML
CSS
Vue
Xamarin
Google Cloud Firestore
Web Sockets
SignalR
Docker
Raspberry Pi

My Tech Blog

View Source View Article View Site

I decided back in 2018 that I wanted to create a tech blog. I wanted it to be a space where I could document some of the things I have learnt for future reference, and also write-up solutions to problems in order to help others; I've lost count of the times I have been helped by reading others' blog posts, so I decided it would be a good opportunity to give back.

I weighed up my options — to use a blogging software or build my own. Aside from every developer's desire to "write their own", Jamstack was really gaining traction at the time as way of creating static sites like blogs using simpler and more modern techniques, so I opted for creating a Jamstack blog using Jekyll. I learnt a lot from creating the blog — it gave me experience and an understanding of how powerful Static Site Generators can be, and also helped solidify some of my earlier CSS skills, relying only lightly on Bootstrap and writing a lot of custom SCSS myself.

My blog is still active today, though my posts aren't as frequent as I'd like. It is hosted independently on GitHub Pages at the moment, though I have plans to migrate it over to my Portfolio site which uses GatsbyJS.

Edit: As of July 30, 2020 my blog has been migrated over to my Portfolio site. This makes maintenance much easier as I am only managing one code base and tech stack for these sites. Gatsby also offers lots benefits over Jekyll for maintaining a blog which I look forward to making use of as time goes on.

Gatsby
React
HTML
CSS in JS
JamStack
Static Site Generators
Markdown

Amateur Dramatics Group Website

I challenged myself a few years ago — when I had little experience in true front-end development — to create a static site from scratch for a local amateur dramatics group which I have been a member of for over 20 years. The group had an existing site, but it was dated and not maintained.

I made the decision to stick to more traditional methods — simple HTML, SCSS, some JS, and Gulp to manage my workflow. I thought using one of the latest JS frameworks would get in the way of a good opportunity to focus more on the fundamentals of the web.

The site is still in use today. It's well written, and it's setup with automated CI/CD, so changes are relatively pain-free. On reflection, the site is a perfect candidate to be written with something like Gatsby, and a headless CMS for data which operates on JSON and Markdown files. However, the cost far outweighs the benefit of a re-write, so I'll be leaving things as they are for the time being.

HTML
SCSS
JavaScript
Gulp
CI/CD