Tyne Tunnel 2 Case Study

  1. Client: Land digital agency
  2. Role: Freelance Front-end Expert
  3. Scope: Large monorepo with multiple user interfaces
  4. Timeframe: Dec 2021 - Apr 2023
Live Link

About Tyne Tunnel

Tyne Tunnel is the most popular route for those driving to the North of England. The tunnel goes underneath the river Tyne and connects North and South Shields.First opened in 1967 as a single lane tunnel in each direction, the tunnel was expanded to a dual carriageway in 2011. Nowadays, the tunnel facilitates over 60,000 journeys each day.A cashless free flow system was implemented in November 2021. The removal of barriers and physical payment booths required implementation of a web app payment system.
TT2 tunnel

Technologies used

Agile Scrum
Gitflow
ClickUp
Jira
Babel
Vite
TypeScript
React
Eslint
SASS
Tailwind
URQL
GraphQL
Formik
Yup
Storybook
Ant Design
Jest
Cypress
React Testing Library

Testimonial

"Lee is a strong communicator, with a pragmatic and thoughtful approach to all of the work he undertakes. Mindful of how his work effects both users and the project’s commercials, he became an invaluable asset to our team. He quickly cemented himself as reliable and trustworthy, and is someone we look forward to working with again." Daniel Gadd - Technical Director - Land digital agency

Multiple front ends

I worked as the lead front-end developer on multiple front ends.

TT2 app images

Customer Web app

The customer facing front end is a responsive web app. Customers are able to sign in, view their journeys, pay for tolls, manage vehicles and top-up their account.

Head office reporting

The front end of head office reporting provides a view on several statistics for tunnel usage, payments, UTN charges and more. It also offers the possibility to export data.

Customer service

The back-office for the customer service facilitates speedy, informative, one-touch responses to customers. This helps to enable team members exceeding internal KPIs.

Work Completed

I was brought onto the team to assist with updates and improvements to the web app. My work included the reduction of technical debt, implementation of new features, UI redesigns, and improvements to user experience.

TT2 mobile app images

Stripe implementation

When I joined Land Digital agency on the Tyne Tunnel 2 Project, WorldPay was the payment provider. I replaced WorldPay with a customized Stripe check-out.

Authentication

I refactored front end authentication logic, simplifying a customized authentication/authorization component. The component handled masquerade tokens allowing telephone support agents to access user accounts and assist with support queries.

Migration to React router 6

To clarify design decisions and help future developers maintain the code base, I refactored and simplified application routing with a migration from React router 5 to React router 6. This included modifications of the use and structure of React 18 suspense API and fallback components.

Testing

Because of the large number of users, many implemented key features were backed-up with multi-layered (Snapshot, Unit, Integration and E2E) testing for bug-free development.

Contact

Contact me by submitting the form below and I will get back to you as soon as possible.