Tom Christian

Freelance Javascript & React Developer from London, UK

With nearly a decade worth of experience in multiple industries, I specialise in building accessible, test driven enterprise applications & responsive frameworks. Fan of all things ReactJavascriptSass

2018
  1. Argos

    Universal Node & React services built in a test driven style utilising technologies such as Web Sockets & Maps API

    • Client

      Argos

    • Date

      January 2018 - Present

    • Tech

      ReactReduxJestTDD
    View live demo

    After the new year, my next challenge was to become a senior engineer within a top of funnel scrum team at Argos in Victoria, London. I was immediately tasked with developing & maintaining several existing universal (Node & React) microservices along with creating entirely new services to be consumed by several million users per day.

    The service oriented infrastructure and emphasis on full stack developers at Argos provided new challenges such as automated container orchestration with Jenkins and Mesos Marathon and cross service consumable React components.

  2. 2017

    Audio Network

    React, Jest, MobX & Algolia powered advanced search & faceting project for Audio Network

    • Client

      Audio Network

    • Date

      September 2017 - November 2017

    • Tech

      AlgoliaReactMobXJest
    View live demo

    Having completed a React & Episerver CMS contract with Brilliant Basics in Shoreditch, I agreed to return to nearby Farringdon with the awesome team at Audio Network. Given my previous positive experiences with Audio Network and the ambitious and challenging nature of the project they had recently embarked upon, I was incredibly keen to return.

    I was immediately pair programming within a small cross functional scrum team. Utilising toggles & A/B split testing, the React build was integrated into their existing setup using Webpack & Babel (for ES6 compilation). Using Facebook’s Jest & AirBnb’s Enzyme our React components and MobX stores were written in a TDD style.

    State management across the application was handled with MobX. Having previously worked with Redux, MobX was a very enjoyable experience that’s since left me uncertain of a favourite. In practice, It’s much less opinionated than Redux and utilises the simplicity of ES6 Decorators. With Redux however, I much prefer the insistence on functional programming & immutable data structures.

    Fundamental to the entire search experience was Algolia. This completely powered the underlying search & faceting technology via a brilliantly simple API. Beyond certain bespoke functionality required for the MVP release, the API seemingly handled almost all requirements.

    Yet another challenging but thoroughly enjoyable experience with Audio Network is due to end early November 2017 where I’ll be seeking new React based projects.

  3. Brilliant Basics

    Episerver CMS & ReactJS powered white label enterprise web application for leading casino brand

    • Client

      Brilliant Basics

    • Date

      June 2017 - September 2017

    • Tech

      ReactEpiServerSassWebpack

    In June 2017, I joined the team at Brilliant Basics as a senior front-end developer with a focus on ReactJS. The scrum team consisted of three front-end and three back-end developers, QA and product owner. Having started the project halfway through alongside a backend developer, we were immediately tasked with finding areas of improvement along with carrying out regular user stories.

    The EpiServer CMS based site utilised a combination of server side rendered content and dynamic React components hooked up to a REST API. My initial concerns were lack of Javascript modularisation, global scope pollution and lack of architectural consistency within the framework. In response, I created a Webpack based proof of concept allowing the use of ES6 imports as well as hot module reloading. The latter improved the build times from ~10 seconds to ~200 milliseconds.

    Together with the Webpack based proof of concept, I refactored and reimplemented the React environment to utilise a container-component design pattern paired with with a consistent project structure and class/file naming convention.

    Beyond some of my key technical concerns, I also identified and implemented several best practices within the team such as merge requests, peer review, pair programming, ESLint and Prettier pre-commit hooks.

  4. Bundesliga Fantasy League

    Bespoke design with static HTML, JS & CSS splash page for Bundesliga’s 2017-2018 fantasy football league

    • Client

      DFL (Bundesliga)

    • Date

      July 2017

    • Tech

      ES6WebpackSassPhotoshop
    View live demo

    Working directly with DFL Bundesliga (German Premier League), I was tasked with a short term design and development job for Bundesliga’s 2017-2018 fantasy football league launch website. Provided with several assets and the responsibility of producing a high quality and high performant website, I set to work.

    Building upon a NodeJS toolset including BrowserSync and PostCSS, I implemented Bootstrap 4’s powerful mobile first flexbox based responsive grid and mixins. Also utilising Bootstrap’s new responsive sizing techniques, a well structured and consistent layout across multiple breakpoints proved seamless.

    Final touches included basic optimisation practices such as font icons, asset minification, image compression & conditional display of image sizes based on screen resolution.

  5. Michelin Tyres

    iOS hybrid ReactJS & HTML5 Canvas drawing application for 2017’s Goodwood Festival of Speed

    • Client

      Branchout Productions

    • Date

      June 2017

    • Tech

      ReactCanvasPHPPhotoshop
    View live demo

    Prior to 2017’s Goodwood Festival of Speed, I was approached to design and develop a simple drawing application for iOS devices. Alongside this application, a separate web application deliverable was required for querying and displaying submitted drawings to a large LCD monitor on-site at the event.

    Naturally, HTML5 Canvas was the perfect choice for the drawing functionality. This sat within a simple React based single page application and meant quick additions to the project were a breeze to implement. E.g. A toolbar with colours, sizing and eraser functionality. The application was styled and set up to reside within a headless native webview or ‘save to desktop’ style.

    The projection application was retrofitted from an existing piece of functionality utilising PHP and MySQL. The site would be loaded onto a monitor onsite and would continuously poll a database for new images.

  6. Pearson Social Network

    React, React Native & Redux based social network for apprenticeships within Pearson

    • Client

      KWT Design

    • Date

      March 2017 - June 2017

    • Tech

      ReactReduxTDDSass

    Moving from corporate banking to an Islington based start up proved quite a contrast not only in environment but also technology. I joined the project half way through and was immediately tasked with user stories related to the profile section of an apprenticeship social network for educational giants — Pearson.

    The standards were impeccably high and I was immediately learning new technologies such as Redux Saga (using ES6 Generators). The single page application was built fundamentally with React, React Router, Redux & Redux Saga with Mocha & Chai based unit tests for our action creators, reducers & sagas.

  7. HSBC Business Banking

    Backbase consultant (Angular 1.5 & LESS) within HSBC’s 2017 business banking stream

    • Client

      Salmon

    • Date

      January 2017 - March 2017

    • Tech

      AngularBackbaseTDDSass

    Early 2017, I joined Salmon as an Angular JS consultant and was immediately sent for training in Amsterdam at Backbase’s HQ. On my return I joined HSBC on-site as a consultant within one of their business banking streams.

    My role was to support the existing development team with their Backbase CXP integration. This predominately involved support in areas such as mobile first responsive design using LESS preprocessor, AngularJS and unit testing with Mocha & Chai.

  8. 2016

    Tribal Worldwide

    BackboneJS and Sass development and UAT support for a Unilever based Lipton Ice Tea

    • Client

      Tribal DDB

    • Date

      November 2016 - January 2017

    • Tech

      BackbonejQuerySassPhotoshop
    View live demo

    Having returned from a month long trip, I was fortunate that a friend and old colleague had a position vacant within his scrum team over at Tribal DDB in Paddington. I joined less than 24 hours later for initially a two week contract which then carried on through to Christmas a month later.

    The project was in the latter stages when I joined and my role predominantly involved enhancing existing features, providing support, working on technical debt and fixing issues raised during UAT testing. Building upon an enterprise Unilever built framework, one of the key takeaways for me on this project was learning and developing with BackboneJS — a framework I had yet to use in any commercial work.

  9. Audio Network

    Angular 2 & TypeScript powered music streaming & licensing single page application for Adobe Premiere Pro

    • Client

      Audio Network

    • Date

      August 2015 - October 2016

    • Tech

      AngularTypeScriptTDDPhotoshop
    View live demo

    After completing an initial three month contract where I was tasked with an iterative mobile-first re-development of Audio Network’s website, I was retained as part of a small cross functional scrum team to build a music streaming and licensing app for Adobe Premiere Pro. The plugin would reside within Adobe's plugin ecosystem and utilise their headless Chromium based wrapper API.

    The single page application used Angular 2 with TypeScript whilst integrating with a .NET based REST API. Due to the simplicity of the application, state management was handled on a per component basis. User stories were written and then implemented in a TDD style (using Jasmine with Karma as the test runner). End to end acceptance tests were also written along side components using Selenium webdriver.

    Alongside the Adobe Plugin, an Electron based installer was built to aid in the installation of the plugin within Adobe Premiere Pro. The project was delivered incrementally in two week sprints with key decisions arising from extensive UX studies and A/B split testing.

  10. 2015

    Concise Media Design

    Hybrid (iOS, Android & Windows) flagship white label event application design & development

    • Client

      Concise Media Design

    • Date

      September 2012 - August 2015

    • Tech

      AngularPHPSassPhotoshop
    View live demo

    Having spent two years at Concise as a permanent member of staff, after making the switch to freelance, I was re-hired for a 12 month project alongside the excellent [Adrian Von Gegerfelt](http://designbyadrian.com). The project we produced involved rebuilding Concise’s flagship event application. The requirements were to build a hybrid PhoneGap based web application with an improved UX & UI. We had complete freedom in regards to UI design and tech. Existing functionality from their current product must be retained and most importantly — support for iOS, Android, FirefoxOS, Windows & Web.

    Designing and developing a hybrid web application for four major operating systems with varying levels of backwards compatibility was the most challenging aspect of this project. Difficult, but not impossible. Given the ambitious nature of the design, a heavily modified version of Bootstrap proved to the most successful way of achieving high compatibility. Its excellent grid system and battle hardened component system took away a lot of heavy lifting whilst providing a solid base to build upon.

    Prior to the days of ES6 and simple module bundling we decided on a bespoke vanilla Javascript based solution making heavy use of IIFE’s with module concatenation powered by CodeKit. Whilst the application was vast in features, the technical aspect of the build was relatively simple in the sense that it was for the most part API driven. As a result, we created a heavily event driven framework utilising jQuery & Promises. We built the application with an MVC style architecture in mind heavily adopting prototypical inheritance and Handlebars based templates.

    Amongst the various features that were for the most part REST API driven, we had the luxury of delivering several features using HTML5 Websockets. For the event staff, we produced a controller application providing the ability to almost instantly send commands to entire audiences. This included features such as instant pushing to new pages, notification messages and live polling.

  11. 2011

    Invision Power Services

    IPS, Inc’s flagship forum software bespoke design and full stack development for their key enterprise clients

    • Client

      IPS, Inc

    • Date

      April 2009 - September 2011

    • Tech

      HTML5JavascriptPHPPhotoshop

    Having operated one of the most successful theme sites within the Invision Power Board forum community, I was contracted by IPS, Inc on numerous occasions throughout a three year period. This predominantly involved working directly with their enterprise managed clients and providing bespoke theme design and development. Given the popularity of their flagship product, I was fortunate enough to build directly for clients such as Skype, NFL, NHL, NBC, Warner Bros, Roxio, Intuit and Baltimore Ravens.

    Contract work aside, I operated a solo venture ‘IPS Themes’ for over half a decade starting from the age of sixteen. This involved the creation of themes (Photoshop, HTML, CSS, JS) & plugins (PHP/JS) for IPS, Inc’s core product suite. This solo project financed my education (and lifestyle..!) and provided me at a young age a solid platform to build upon going into the world of contracting.