A UI for managing transactions for a custom-built payment gateway

Build a UI that can display transactions made through the payment gateway. It requires authentication and role management, and using the gateway APIs can issue refunds, cancel and settle transactions.

A typescript library for validating payment forms

Build a reusable library for vanilla JS form validation

A library of reusable, customisable UI components 

Create a library of components that can be imported into any project or application.

A responsive UI for the students elections process.

Create a dashboard which displays the results of the election process.

For the King's College London student elections, run by the Student Voice team at KCLSU, a unique challenge arose from user feedback from previous elections cycles: how to effectively convey a complicated elections process, which consisted of multiple. phases and required a lot of information to be accessible.

In the past, the information was scattered on different pages on the kclsu website - and over years these pages became out-dated, or worse, broken. It was also a chaotic user journey - students were expected to find and access links to multiple different pages. Often these pages would only consist of a paragraph of text!

I worked with the team on a design which would house all of the information, as well as effectively communicate the different stages of the elections, the current stage, and any news or events which might impact or shed new light on the elections process.

A high traffic landing page where thousands of university students access upcoming events.

Design and build a landing page for the King’s Welcome (freshers’) period, where thousands of new students visit campus and the two day Welcome Fair.

For the University of King's College, the Welcome period is one of the busiest in the year! Both the university and the students' union have the challenge of communicating to thousands of new arrivals, as well returning students. For weeks there are events, parties, presentations and introductions, with the Welcome Fair being the pinnacle of the period.

The Welcome Fair, otherwise known as the Freshers' Fair, is planned to be held this year in the London Old Billingsgate. My job was to create a landing page to be used in all online and offline communications. This page needed to fulfil these requirements:

Call to actions to download the official app, and join the email newsletter

Point users to other areas of the kclsu website, such as the lists of sports and societies

Be on brand, and reflect the fun, vibrant theme of the Welcome period

To accomplish this, I worked on a design that could accommodate different sections without creating a chaotic mix of different content types and call to actions.

Using fullpage.js, I could create sections that matched the viewport width & height, and nice slick scroll animations to navigate between them. The navigation included in-built URL fragment updates, which was very useful for direct links to specific areas of the page. For example, if the social media manager wanted link to the events section, the /welcome/#events URL could be used.

I also created a simple grid layout, which would stack from tablets and smaller. The different sections of the grid would have a subtle animation triggered by scrolling to it. This was done by using an in-built callback function which the fullpage.js library provides. 

Different APIs were connected to it, including a news / blog post API which fetched all news relating to Welcome, and an events API which fetched all Welcome related events also displayed on the kclsu events page.

The challenge was to limit the number of event / news UI cards for different screen sizes, as the grids always fitted the device screen, without any scroll overflow (due to the touch scroll functionality). At the bottom of the UI Cards I included a button, which launched a modal that listed all the events, or all the news posts. This modal over-rode the touch scroll, and users could scroll normally inside the modal. When they closed the modal, a callback function would turn the touch-scroll functionality back on - another useful hook provided by fullpage.js.

Finally, the landing page incorporated an SVG scaled to the fullwidth of the screen (with zero degradation of the svg when scaled up or down). The theme colours, and a few other touches likes a rotating London Eye, helped bring the design to life and tie in the branding.

An animated, server-side generated React Js website .

Build a fun, dynamic and interactive website using SVG illustrations and responsive images.

The Great Sync is a teaching framework for javascript, to break down concepts visually for anyone trying to understand the fundamentals.

The design for the website needed to be creative and inspiring, since the goal of the Great Sync was to be visual. Using existing illustrations in Adobe illustrator, I exported compressed SVGs and JPGs, and used a grid design to house the images with corresponding text.

Images, with their edges 'breaking out of the grid' gave the design a feeling of movement.

Using GSAP animation library, small animations and entrances were created to bring the static image to life. The aim was not to make the animations overbearing or CPU intensive, but to add enough to make the illustrations dynamic.

The major obstacle was decreasing load speeds, as the sheer number of images was causing a major performance hit, with the added complexity of multiple DOM manipulations happening simultaneously with gsap transitions. I have detailed how I approached this problem in this post.

Setup a node server to handle user submitted form data, perform validation, and use a third party API to post data securely.

The Student Advice Service team presented me with a problem: students were submitting information via an online form, which was being to sent to them in an email. They had to manually input this data into the Advice Pro third party system they use.

Since they receive 5-10 form submissions a day, the manual uploading was an enormous task.

My solution was to build a node server to handle the requests, and integrate the API.

After reading documentation for using the Advice Pro API, I realised we would need a separate server to handle these requests, and pass the data through custom validation checks. Since we don’t have our own KCLSU servers, I opted to host the server in the cloud using Heroku.

One problem I ran into was being able to provide Advice Pro with the server IP address the request would originate from. My solution was to route the request through a proxie – Fixie.

I also created a fallback system to make sure users could submit the form even if there was a network error. A member of the team receives an email whenever a form is submitted, and if the data is not successfully uploaded to Advice Pro, there is an error notification, and the staff members knows to upload the data manually.

A dynamic landing page with integrated APIs.

Create a dynamic web platform which keeps track of all scores for the epic UCL vs King’s College sports competition theLondon Varsity Series.

The sports management team for KCLSU had a problem: how can they better keep track of all the scores for +-30 sports matches, and how can this information be easily accessible for spectators online?

The solution was to take the previous static landing page, which simply listed details for all matches, and add score information from a separate database updated by staff members.

Using firebase, I created a database to hold match information – which was populated initially by an API call to fetch match details, and then through an admin page I created for staff to perform CRUD operations.

On page load, a promise chain is initiated by fetching score info, if there are any, update colours and total scores, and feed the data into a dynamically changing grid.

We wanted to create a layout that looked different everytime the page was visited. We did this by using a masonry grid – initially made with the Masonry JS library, and then by CSS grid with some vanilla javascript to cut down page load speeds. By alternating the size of the image for each sport, and selecting a random image from an array, the page loaded with a different layout each time.

A fast-loading website for a small business.

Design and develop a portfolio website for MBR Films, which focusses on strong imagery and a showreel of videos on Vimeo.

It was agreed the website needed to be fast and modern. I turned to Gatsby JS as my site generator, which uses the JAM stack to create fast, dynamic websites.

Best of all, I could adopt a modular approach using React components – making it easy to maintain and develop the website going forward.

I also used the Vimeo SDK and API to customise how videos played and displayed.

Initially I used GraphQL and the Vimeo Gatsby Plugin to pull in the video data into the components. However, there proved to be only a few videos which needed to be in the portfolio, and it was easier to keep it all in state.

A creative frontend and content management system.

Create a system for KCL staff to manage a database of artists with basic CRUD operations. These artists must then be displayed on the main Bush House Sessions page, showing their profile, social media links and descriptions. The design for this display needs to be interactive and fun.

Overview: Using GitHub pages and Google’s Firebase, I created an admin page for staff to perform CRUD operation’s to manage artists and performers who appear in Bush House Sessions. This involved image uploads and text / number inputs.

The next step was to create an appealing web page, which involved CSS animations and transitions, and calls made to the Firebase server to fetch and display artist info.

A configurable CMS to manage data on firebase database instances.

Build a Firebase CRUD App which could receive a configuration file and dynamically build the UI.

Github Repo: https://github.com/kylorobs/profile_manager

KCLSU primarily uses a third party CMS and CRM for its many activities. However, due to the CMS not being open-source, it can be tricky managing content that is not kept by the CMS.

For this purpose, we created a Google Firebase realtime database to store data for different things across the organisation. This included things like:

The challenge was that each database area required  a separate model, and I did not build database specific CRUD apps. Instead I wanted a single library which would receive a configuration file, and then based on that config adapt the UI to allow editors to create, read, update and delete data in their particular database node.

a key map to define the editing restrictions for each property in the data: 
- the name of the key
- the type of input required to edit the key (text, date, select, image etc)
- accepted values

Upload spreadsheets to populate the database

UI card choice to show the list of database entries

The UI was built using Typescript, and Redux to manage state across the application. The reason to use Typescript without React JS was to reduce the complexity of the app and utilise simple DOM manipulations. However, the reality is that the code base grew considerably as the number and methods of DOM manipulation grew. 

Although this project is in production, it is slowly being rebuilt with React JS to avoid the heavy DOM editing and the code required to perform it. React's Virtual DOM, in combination with redux state, is a more appropriate solution to heavy and complex UI changes & updates.

Nevertheless, the existing implementation with Typescript is a stable and successful project, which has been rolled out across the organisation and is now an important dependency of the entire website.

A full stack app to display property data around the UK.

My final project for the General Assembly Javascript Development course was to build a web application. This involved building both the front and backend, and using elastic search for querying property data.

Overview: The app allows you to select a city or town, enter a post code, and search available property types in the area (flat, semi-detached etc). You can then view property data for the type you choose in that post code.

An Adzuna listing shows which properties are on sale and for rent. A ‘calculation area’ allows you to compare the price you are willing to pay vs the market average, and what % you are above or below market.

You can also view all previous sales data for the last 8 years, which is displayed in an interactive chart.

Things Built