I am often asked by companies who hire me to sign Non-Disclosure Agreements which restrict me from publishing code samples to my GitHub account. I do of course have MANY code samples beyond the contents of this public repository. Should you wish to see anything beyond what this repository contains (such as some of my more recent React and Redux code), please get in touch with me.
This repository includes a selection of code samples from some projects I've been involved in over the past 10 years or so.
I've been a Front-End Developer for approximately 25 years. Technology has changed a huge amount in this time, and currently, the languages that underpin the market are going through a huge transformation. This is why I've only included a few code samples, and only from the past few years. I don't feel there is much value in providing code samples from 10+ years ago, as technology has changed, and my own coding style/efficiency has also changed enormously.
Within the samples provided in this repository, I've included what I see as a reasonable cross-section of the work I am often involved in. It is however only a small illustration of the type of work I have done. I've worked on over 150 websites in my career, ranging from white-label platforms, through to multi-lingual sites, arabic sites, right-to-left reading sites, device-only sites, responsive web development, single-page applications, real-time websocket sites. The list goes on and on!
It's a little challenging to classify code samples so that they are available in an easy to digest format. I have therefore made them available in 2 different ways:
The code samples provided contain examples coded in the following languages:
- Custom jQuery plugins
- Cypress
- GraphQL
- Grunt
- Gulp
- HTML
- JavaScript
- JSON
- JSX components
- JSX pages
- MermaidJS
- NextJS mock APIs
- NodeJS
- PHP
- Pug templates
- React Context
- React hooks
- Redux
- SCSS
- Storybook
- Test scripts
- TSX components
- TSX pages
- Type definitions
- Utilities
In the case of all of these files, a specific file naming convention has been used:
[dates-of-contract]-[client]-[project-name]____[filename]
For example:
2014-08-2015-08-barclays-design-language____Gruntfile.js
Due to files being stored in a flat file hierarchy (eg: all JavaScript files from multiple contracts), I felt it was necessary to provide some way of ordering the files by date. In doing this, it's easy for anyone viewing this repository to view the most recent files, knowing that they were indeed coded most recently.
It's rare that I'll get asked to code anything in jQuery nowadays. However, a few years ago, I was hired for a few contracts where it was the "in" technology, and was asked to create some fairly bespoke features for a number of websites. Due to the nature of these features, jQuery plugins lent themselves quite nicely to the desired output.
Click here to view Custom jQuery plugins code samples
I've used Cypress a little in a couple of contracts, but have never really pushed it that far in terms of what it's capable of.
Click here to view Cypress code samples
I started using GraphQL in 2023, so am relatively new to the technology. I have however used it alongside Apollo, and with caching, polling, so have a good understanding of some of its main features.
Click here to view GraphQL code samples
I've included a couple of Gruntfile.js scripts, as well as an extensive helpers file I wrote as part of one recent contract.
Click here to view Grunt code samples
As part of the work of re-building my online portfolio, I took the opportunity to learn Gulp. I already knew my way around Grunt, so I initially wrote all required build tasks using Grunt. Once this was complete, I then re-wrote the build tasks using Gulp.
Click here to view Gulp code samples
It's a question I'm often asked by recruiters. How is your HTML? Well, quite honestly, if you can't code HTML, you can't code! I provide this file to show anyone who cares to see that my HTML output is nice and tidy. Admittedly, the file(s) included here are generated by templates. But hey, I always build files to be templated in static HTML first.
Click here to view HTML code samples
As mentioned earlier, the JavaScript world is evolving so rapidly at the moment, I would suggest the best way to see the type I'm coding is always to look at the more recent files (in terms of dates) within this section. As a contractor, I code with the language I am told to use. So, there are a few jQuery files here. However, I would say me preference is always to code in native JavaScript, and build things up from there where necessary.
Click here to view JavaScript code samples
JSON isn't a language per-se, it's just a data format. For my recently re-written online portfolio, Node, Express, Browserify and Pug templates build static HTML pages via the use of JSON files. One of the JSON files from that site is included within this section, just to illustrate that I am comfortable using JSON.
Click here to view JSON code samples
JSX components (in my mind) shouldn't ever contain that much code, as code abstraction is a hugely important part of coding in a tidy and efficient way. That said, there are times when a little more code is required within component files. I've tried to include a varied cross-section of files, demonstrating different ways in which I construct React component files.
Click here to view JSX components code samples
There are SO many ways to code pages within React. As a contractor, sometimes I follow the method already put in place by previous Developers, and other times it will be down to me to determine how best to structure things. In this case, my choice of coding structure would largely come down to the technical requirements of the project. As more JSX code samples are added to this section, I'll ensure that a wide range of techniques as to how I put React JSX pages together are demonstrated.
Click here to view JSX pages code samples
MermaidJS is a fantastic tool that allows you to programmatically create visual SVG flowcharts, which I've used on multiple projects to visualize the user flows throughout an application.
Click here to view MermaidJS code samples
Whilst the majority of projects I work on include a back-end, I often create a mock API layer using NextJS, so that I can progress with front-end development without being reliant on a back-end being written at the same time.
Click here to view NextJS Mock APIs code samples
I wouldn't necessarily call myself a NodeJS developer, however I do like to write the odd piece of NodeJS when I need to do some clever things with data, and more often than not, the file system. I'm continually reading up on Node JS, with the hope that a contract in the future will allow me to get commercial exposure and experience in it.
Click here to view NodeJS code samples
Every now and then, I'll work on a project where an API isn't yet created, but the front-end code I create has a dependency on API data being provided, in order to fulfil certain functional components. Whilst I can (and often do) handle this via stubbed JSON data, I have in the past written dummy PHP proxies to send data to a receiving front-end codebase. One such example of when I did this is included within this section. PHP is not a language I'm overly familiar with. However, as with any language, whenever I need to use it, it often doesn't take too long to get my head around how it works.
Click here to view PHP code samples
Pug templating (previously Jade) has been used in a number of my roles, in order to generate HTML files from a combination of template files and data files (often JSON or YAML). My online portfolio works this way too. To demonstrate that I'm comfortable with Pug templates, I've included a few of the templates I've written within this section.
Click here to view Pug templates code samples
Sometimes I use external libraries such as Redux, but sometimes I use React Context if the requirements are a bit smaller
Click here to view React hooks code samples
Wherever it's been benefical to do so, I've written React hooks, to help centralize re-usable code
Click here to view React hooks code samples
I've used Redux in a few of my more recent projects, using connect and mapStateToProps before moving over to using hooks eg: useDispatch, useSelector etc.
Click here to view Redux code samples
More often than not in contracts these days, SASS is the de-facto requirement from CSS pre-processing. I would consider myself very comfortable with SASS, and I equally find it a fantastic tool for the work I do. I've provided a few files within this section. One file is coded to meet strict sass linting rules (in terms of inheritence and nesting). There is also a simple mixins file provided too.
Click here to view SCSS code samples
A growing requirement from clients is code that self-documents. Storybook is one platform where this can be showcased, whereby prop tables are automatically generated via prop or type definitions within component files. Besides this, Storybook is also a great tool, allowing for building components in isolation, away from any app integration.
Click here to view Storybook code samples
A big requirement that is constantly being asked for in roles I'm approached about is Test Driven Development (TDD). Within this section, I've included a test file I wrote for a header component I wrote. It's actually quite an interesting test, as it's affected by run-time execution. Sinon was used in the example provided to cater for this requirement.
Click here to view Test scripts code samples
From 2019 onwards, I've been working on projects using React + TypeScript. This means I've written components with support for TypeScript / type definitions.
Click here to view TSX components code samples
From 2019 onwards, I've been working on projects using React + TypeScript. This means I've written pages with support for TypeScript / type definitions.
Click here to view TSX pages code samples
From 2019 onwards, I've been working on projects using React + TypeScript. This means I've written components and pages with type definition support.
Click here to view Type definitions code samples
Every project I work on has a number of centralized utility functions, which can be accessed from anywhere in the code.
Click here to view Utilities code samples
September 2023 - December 2023
Whilst I was looking for work in late 2023, I decided to be productive alongside job-hunting, by re-writing my portfolio for the first time in 7 years. It's often the case that a Developers (particularly a Front-End Developers) website is never that representative of what they do for work. So I thought it was the perfect time to give things a refresh and a complete overhaul.
AM Charts, Async / Await, ES6, Fetch, Flexbox, JSON, Lo-dash, Next JS, NPM, React, React Context, React hooks, Responsive, Sass (modules), Storybook, TypeScript, Vercel
September 2022 - August 2023
I led a team of 3x Front-End Developers, working on a greenfield HR platform that aims to provide the features of solutions such as Workday, in terms of Leave Requests, Payroll, Timesheets etc, but in a way whereby the control is put in the fingers of the users. The idea being that much of the need to depend on a HR team can therefore be removed, resulting in the increases to the speed and efficiency of the tasks needing to be done.
Apollo, Async / Await, Axios, Chromatic, ES6, Flexbox, GraphQL, HTML, Lo-dash, Next Auth, Next JS, React, React Hook Form, React hooks, Redux Toolkit, Responsive, Sass (modules), Storybook, TypeScript, Yarn
February 2022 - September 2022
I worked as the sole Front-End Developer, working on a complete re-write of a platform, which focused on offering a dashboard-style set of screens showing complex datasets for investment portfolios for both individuals and companies. The nature of the data involved was often complex, as a result leaning on comprehensive use of AG Grid for tabular data, along with close to 100 bespoke written React components, utilising both Sass and TypeScript. Also of note within this project was the inclusion of react-hook-form, since there were around 50 forms, enabling authenticated users to add, edit and delete a whole host of data attached to their individual investments.
AG Grid, Async/Await, Axios, Chromatic, ES6, Flexbox, HTML, Lo-dash, Mermaid JS, Next JS, NPM, React, React Hook Form, React hooks, Redux, Responsive, Sass (modules), Storybook, TypeScript
March 2021 - February 2022
I was the sole Front-End Developer working on a UI component library, consisting of approximately 120 components, built from the ground up using React, TypeScript and Sass, in an Atomic Design pattern. I built a fully interactive headless eCommerce site, demonstrating all of the UI components via a NextJS app. I also built a comprehensive Storybook, helping to demonstrate all components rendered in a number of different ways, eg: different colour themes, different locales, left-to-right and right-to-left rendering. All components were fully responsive.
Async/Await, ES6, Flexbox, HTML, Next JS, NPM, React, React hooks, Responsive, Sass (modules), Storybook, TypeScript
February 2020 - March 2021
I was the sole Front-End Developer working on a Server-side rendered / re-hydrated React application built using React, Redux, TypeScript and Sass. The application provides the ability for companies to register and become part of a wider online community related to energy consumption, carbon emissions and ultimately, energy switching. The Front-End was built to work hand-in-hand with a custom built back-end, providing around 50 endpoints, catering for Authentication through to Registration, Signin in, Account playback etc. Extensive documentation of the project was built via a heavily customised Storybook, which I built from the ground up.
Ant Design, Axios,, ES6, Flexbox, HTML, JSON, Mermaid JS, NPM, React, React hooks, Redux, Responsive, Sass (modules), Storybook, TypeScript, Webpack
December 2019 - February 2020
I was one of two Front-End Developers working on a Single Page Application build using both React and Redux. The application allowed for a website to be built and subsequently configured using a bespoke suite of components and templates. My involvement related to adjusting existing websites. This was achieved by accessing the configurable options of each component making up a websites page, getting both existing and setting new configuration values. On saving any configuration changes, the website was automatically updated, reflecting the changes made.
Ant Design, CSS modules, ES6, Flexbox, HTML, JSON, NPM, Post CSS, React, React hooks, Redux, Responsive, Sass, TypeScript, Webpack
September 2019 - September 2019
I spent close to a month at Rehab, helping out on a project which provided walkthroughs of a clients product that revolved around Crypto Currency. The deliverable was a single page React/Redux application which could be used primarily at trade shows. The application allows potential clients to see entire user journeys, and by entering real-world data, could use a mock instance of the platform to see how their organisation could benefit from the services offered by the product. One particularly nice feature I wrote in this project was an extremely comprehensive KeyReplacement component which allowed static keys in any part of the application (including large JSON files) to be replaced with dynamic values from a collection of Redux reducers. In addition to many other key types, this involved a number of specific Crypto algorithms embedded deep into the clients product suite.
Axios, Babel, BEM, ES6, Flexbox, HTML, JSON, NPM, React, React hooks, Redux, Routing, Sass, Webpack
January 2019 - July 2019
My role at Lloyds was based on Strong Customer Authentication. Due to regulatory requirements, new methods need to be added to numerous banking platforms in order to support an increased level of security to the login process. I worked for 6 months in the role taking the WIP from a minimal MVP to a fully functional suite of components published across 2x separate private ECMA Script modules. There were many other areas to this project, including (but not limited to) the creation of a React component styleguide, a recursive screenshot generator via a headless browser, an Excel to JSON export utility and programmatically generated (interactive) SVG flows charts.
Babel, BEM, CSS, Enzyme, ES6, Flexbox, HTML, Jest, JSON, Lottie JS, Mermaid JS, Node JS, NPM, Puppeteer, React, Redux, Responsive, Snapshot testing, Styleguidist, Webpack
May 2018 - October 2018
Biglight hired me as the only Front-End Developer to work on an internal project for them, which would be used for managing test campaigns across all of their brands. Prior to the existence of this, the system in place was in need of updating as it involved data being kept in multiple spreadsheets, and was therefore not the easiest to work with. The new system was a completely greenfield project, whereby myself and a single back-end Developer worked on creating a new platform for the business which would replace in its entirety the existing system. It was also a requirement that clients would be granted access to the tests, so a set of rules were built into what was created to allow for both read and write priviliedges across a multi-tiered user hierarchy. From a tech stack perspective, Biglight are a Microsoft house, so there was a requirement to use .net Core for the back-end. The front-end that I wrote was very much written in a way whereby the project was responsive to a users input. This was achieved by implementing a RESTful API on the back-end with multiple touchpoints between the front and back-end. Upon delivery of the finished project, there were around 20 different endpoints, catering for all of the data transmission. This covered complete user management, a free-text search engine, an interactive dashboard, saving tests as PDF routine, the creation of complete tests and their subsequent editing along with MANY more features.
.net Core, Babel, BEM, CSS, ES6, Fetch, Flexbox, Grunt, HTML, JSON, Node JS, NPM, REST API, Sass
January 2018 - March 2018
I was hired by Tangent to help with the second phase of a digital project rollout for one of their largest clients. Whilst phase 1 was largely completed by the time I started working, phase 2 was built using a completely different development platform, so was essentially a greenfield project. The relationship with this particular client was based on Tangent providing static front-end pages/assets to a remotely located back-end integration company, responsible for integrating that code into Sitecore. Despite this, the front-end tech stack worked on the basis of JSON data generating HTML pages via Pug templates, running on Node, using Express. In the 3 months I was at Tangent, I'd say approximately 125 or so new components were built (ES6 JavaScript, Pug templates, SASS), across around a dozen separate page templates. The timings were tight on the project, however the front-end and testing teams put in place were fantastic, and I think alot of people were surprised at just how quickly work was produced.
Babel, BEM, Bootstrap, CSS, ES6, Flexbox, Gulp, HTML, JSON, Node JS, Responsive, Sass, Yarn
August 2017 - November 2017
I spent a few months at Bond & Coyne, working on a website build for their largest client. The project I worked on was a single page (fully responsive) site and was built from scratch using a mixture of HTML, JavaScript and Sass. In the main, the site was built to compliment an offline brochure, however there were a few sections to the site which extended well beyond this. One such example was a data visualization feature, which was built to represent 2 different datasets with a total of a little over 175 million records. I had to write quite a few NodeJS scripts to manipulate the data into a viable format for web consumption. The creative demands on the project were extensive, leading to a number of unorthodox but fully compliant solutions that I had to build during the contract. This project was delivered on time, on budget, and the client, as well as Bond & Coyne were delighted with the end result.
AM Charts, Babel, Browserify, CSS, ES6, Grunt, HTML, Icomoon, Javascript, JSON, Node JS, NPM, Responsive, Sass
April 2017 - June 2017
My portfolio was completely re-written in May/June 2017, written using Node, Express and Pug.
CSS, Express JS, Grunt, Gulp, HTML, Icomoon, JavaScript, JSON, Node JS, Pug, NPM, Pug, Responsive, Sass
January 2017 - February 2017
I was hired via Mansion House Consultingfor HSBC, to bring to life a conceptual project, in the form of a fully working prototype. The project was an XHR driven interface, integrated alongside a fully functional API, built to be responsive across a number of breakpoints. Once the prototype was completed and the concept was successfully proven to the relevant business units, it was handed over to an existing development team to drive the longer-term piece of work forward.
December 2016 - December 2016
I was hired by Sapient to work on the front-end element of an internal Christmas project. The timeframes were extremely tight, and the hours were long. In working alongside a couple of very talented developers, and a supporting team of designers and UX staff, we managed to deliver something pretty amazing, taking into account the time we had available. The concept was to allow a user to submit URLs, which proved that 2016 wasn't all bad news, and that some of the things that happened over the course of the year were incredible and heart-warming. URLs provided were then scraped, tidied up a bit, and adapted into a more digestible format for the site we were building. The rendered output was a very rich interface, fully responsive, with animations primarily becoming active as elements of the page came into view. I built features such as advanced lazyloading, all custom animations, infinite page scrolling/loading, URL submission, Captcha validation, along with many more.
CSS, HTML, Icomoon, JavaScript, JSON, NPM, Responsive
August 2015 - November 2016
I returned to Trinity Mirror to work on a huge greenfield project (circa 60+ sites), helping with the overall architecture and development of the new digital platform for a company with monthly traffic levels in the tens of millions. The development teams technical stack comprised of full native JavaScript using Express on Node, alongside the templating language of Jade, which was used to translate the back-end data layer into both front-end components and pages. In addition, some of the other technologies used were Grunt, Karma, Mocha, Jade, Browserify, SASS. The list goes on. The project was spread across 10 teams of 10 individuals each, where 2 week sprints, inclusive of 2 releases per week were implemented in an Agile way.
Chai, CSS, Escenic, Express JS, Grunt, HTML, Icomoon, Jade, JavaScript, JSON, Karma, Mocha, Node JS, NPM, PhantomJS, Responsive, Sass, Sinon
August 2014 - August 2015
I worked at Barclays on a front and back-end component library, built via a combination of custom templates and a JSON configuration engine. My responsibility related to the complete ownership of the JavaScript controller and the interactive functionality of all individual components. In addition to that, I also wrote the projects entire set of GruntJS automation scripts, enabling full sites (consisting of hundreds of pages) to be compiled in a matter of seconds. For the 12 months I spent at Barclays, I played a lead role in the team overseeing all aspects of the overall front-end development.
CSS, Grunt, HTML, JavaScript, JQuery, JSON, Lo-dash, Responsive, Sass
July 2013 - August 2014
I was originally hired by Trinity Mirror to bring to life several complex prototypes in order establish the feasibility of a number of new technologies, in respect of Trinity Mirrors existing content. After completing these prototypes, one such piece of work I built was so well received by the business that budget was allocated for the technologies I had written to be harnessed for a much larger football based project. Partnering with Opta, who perform statistical analysis on the Barclays Premier League, I wrote a real-time consumption framework of their data to allow Trinity Mirror to show live updates of the entire league during match days. After this work was completed, I extended the code to work for the 2014 football World Cup. The framework was coded to work on desktop browsers, tablets and mobile devices. In addition to this, a cross-section of other work I built during my time at Trinity Mirror included an entire JSON driven data visualization framework, canvas-based real-time heatmaps, particle fireworks, circular navigation systems, mobile friendly touch sensitive draggable voting plugins and a vast number of (websocket based) real-time JavaScript plugins, such as live football league tables, live graphs and live blog feeds.
Adapt.js, AM Charts, CSS, HTML, JavaScript, JQuery, JSON, Lo-dash, Pusher JS, Responsive, Sass, Websockets
December 2012 - March 2013
I worked on 2 fairly similar projects during my 4 months at Profero. Both were extremely rich (in functionality) responsive front-end websites, built to work across desktop, mobile and tablet using a combination of HTML4/5, CSS 2/3 and JavaScript. The first site was designed and built as a full-screen immersive user experience, whereas the second was restricted and governed by a Sharepoint set of templates, running at fixed-width dimensions. Both were built 100% by me from scratch through to completion. The full-screen site required the building of a complete timelining JavaScript framework, allowing for a Flash-esque timeline and queuing mechanism, along with being dynamic in its ability to render in 1 of 4 different languages. The fixed-width site was more of a scroll site, albeit with gesture based alternatives for mobile and tablet switched in at appropriate times.
October 2011 - December 2011
I worked at AKQA on a large project for one of their biggest clients, Nike, focusing on a complex mapping implementation. This involved latitudinal and longitudinal projections to enable dynamic tile loading via cached webservices. The main reason for this was because the mapping application was expected to receive around 100,000+ marker points, which quite obviously couldn't all be added to a single map instance at once. I wrote all the JavaScript through a number of custom Nike namespaces to allow a huge number of configurable variations of just how (and more importantly, when) different geolocational datasets were appended to the map.