DOMINIC SIMPSON

DOMINIC SIMPSON

HOPE app

HOPE App Screenshot

View app
View GitHub repository

To run this app:

  • Clone this repo to your local machine
  • Make sure you have Node installed
  • Run npm install to run all dependancies
  • Run npm run dev to run the app
  • Open http://www.localhost:3000 with your browser to see the result

Central to Founders & Coders‘ ethos as an educational provider is the notion of Tech for Better: the notion that technology can provide a positive social impact. This is very much part of the raison d’etre of Outlandish, the digital agency that runs Space4, the hub where Founders & Coders are based – a worker-owned cooperative who have pioneered the idea of technology that makes the world a better place.

Accordingly, the final project of my Software Development apprenticeship was a Tech for Better project, involving an external Product Owner (PO). The team that I was in was responsible for designing a Minimum Viable Product (MVP) version of an app that allows homeless people to access food that would be chucked away by food providers due to approaching the sell-by date; an enormous amount of food is disposed of without eating in this way.

We spent a week producing prototypes of the app and undergoing user research in an Agile/Scrum workflow manner, as well as establishing our tech stack and roles; mine was Quality Assurance (QA). Some screenshots and working prototypes of what we produced during this design process week can be viewed below:

HOPE app Figma wireframe screenshot

HOPE app Miro prototypes

HOPE app Figma Play mode screenshot oneHOPE app Figma Play mode screenshot twoHOPE app Figma Play mode screenshot three

We then focused on the process of working on the app. From the start, it was clear that there would have to be two routes through the app: one via the user – the homeless person in need of food – and the other through the food vendor, with each taking a separate user journey.

The user’s route would be to click on the ‘Go’ button on the central page, after which they would be able to reserve food on a page that lists the available items, which allowed a drop-down menu according to food preference.

HOPE app find food page screenshot

Once they had chosen their food, and clicked to reserve it, they would then either be prompted to sign-in, if they hadn’t already; or, if they have signed-in, would be given a unique four-digit code that they could take to the food vendor, thus reassuring those who may not be willing to give their name at the pick-up point. An account page would also list these reserved items.

HOPE app user account page screenshot

For the food vendor’s route, meanwhile, they would be prompted to sign in straight away, after which they would have to fill in several details about themselves (name, address, etc). Following this, they would then be allowed to increase or decrease the amounts of products on display.

HOPE app vendor details upload screenshot

The two routes led to several considerations. The vendor would not be able to access certain pages and functionality that the user could, and vice-versa. For example, the vendor would not be allowed to order food, which the user can, and likewise, the user would not be able to increment or decrement the amount of food that the vendor would have available. These issues had to be taken into account when constructing our code.

Our tech stack for the project was the following:

  • React
  • Node.JS
  • Supabase (for authentication of either user or food vendor when attempting to sign in)
  • Airtable (for the database)
  • Tailwind CSS (for design)
  • Cypress Testing for testing

As with my other big project for Founders & Coders, where I was also QA, I was primarily responsible for getting Cypress Testing working; I used it to verify that our sign-in functionality was working, as well as for the vendor details form.