Careers Wales - apprenticeships web app development in React

Student using a laptop

We were tasked by Careers Wales to develop a new standalone application in React (a JavaScript library for building user interfaces) which would pull data from an external data source to present end users with apprenticeship opportunities from across Wales.

Formed in 2013, Careers Wales is a wholly owned subsidiary of the Welsh Government, providing independent and impartial careers information, advice and guidance service for Wales.

We started by taking the Careers Wales’s wireframe prototype and offered advice on how to better align these to the GOV.WALES Global Experience Language (GEL) design guidelines. We then built the final React application, allowing users to view and filter available apprenticeships from across Wales in a list or map view.

Careers Wales - various screen examples

This build would take advantage of the reusable React component library that had already been produced by S8080 as part of previous Careers Wales React based projects, reducing time, effort, and cost. This component library is coupled with the Digital Style Guide also produced by S8080.

We held a technical workshop as part of the initial discovery phase to ensure all parties understood their part in the project, providing swagger API definition documents which allowed the various teams to work independently of each other.

What we did

  • Project alignment and kick off to understand the full set of user stories and scope of work, this included a technical workshop with the Careers Wales IT team to confirm outputs via a Swagger API definition document. This allowed the teams to successfully work autonomously.
  • Reviewed the wireframes already created by Careers Wales. During this stage, we proposed UX considerations and new GOV.WALES GEL components that were not already available as part of the Careers Wales Digital Style Guide.
  • Developed the standalone React application, the build included a multi-faceted search listing to allow users to quickly narrow down results. The application also linked into the Google Maps API to present users with a visual overview of the location of apprenticeships. This was fully bilingual (English and Welsh).
  • Add data for the React application was securely fetched from an external API.
  • Fully browser and accessibility tested to WCAG AA 2.1 and deployed to external hosting solutions.
  • All pulled together by our lean project management approach – a well balanced mix of agile and waterfall, to ensure the project ran smoothly and was deployed ahead of schedule and in budget.

Take a look