Perfomance Dashboard

Part of the FRESHR project

As part of the FRESHR project, I built a React web application for venue managers to see the the performance of their student discounts on the consumer facing FRESHR app.

This web app allowed managers to authenticate and see all their relevant venues.

A number of venues were owned by a parent company that would have one marketing manager for all sites. Solving this problem involved implementing ACL’s and roles in the backend, and allow authenticated users to list all the venues they manage. Solving this problem created an opportunity for platform administrators to see performance of all venues across the platform.

Solution Architecture

This application was built in React and utilised Reactstrap for Bootstrap-like visual components (Buttons, Grid, Cards, etc.). I used these to create the interface and extended Reactstrap when needed for more complex customisations.

I created an npm script that would build a static site from the codebase. I then integrated this npm script in AWS CodeBuild to build the static site in the cloud and upload the files to S3. These files would then be exposed by AWS CloudFront to reduce hosting costs and allow for a custom domain. This deployment method allowed for implemented changes to be deployed rapidly and consistently.

Frontend Technology

I used React Router (with history mode) to let users navigate around the Single Page Application (SPA) in a predictable and intuitive way.

I integrated with the Stripe API to allow users to pay for marketing packages.

API calls were made using Axios to authenticate and gain and access token, and then use the access token to authenticate future request.

FRESHR REST API

Part of the FRESHR project

Show You Care

Parking App

Thank you

Your message has been sent.

I'll be in touch shortly.

Like what you see? Get in touch!

Your message couldn't be sent at this time. Please try again later, or call me on mail@olliedavies.co.uk