DEV Community

Cover image for Kerbit: The React PWA powered by Machine Learning
Sam
Sam

Posted on • Edited on

Kerbit: The React PWA powered by Machine Learning

Update

This project was chosen out of thousands as one of the top 5 projects to be highlighted on the Git Remote Graduation Live Stream! You can check out the stream (and my twitter) here!

About me!

Hi, I'm Sam! I've just completed my final year at The University of Leeds studying Digital Media, I was first exposed to coding and development during my first year in an Interface Design module and have been hooked ever since!

I'm not usually one for sharing my projects because I'm a bit of a perfectionist/eternal worrier so I always see the fault in what I do but I'm trying to be more proud of my creations so here goes! (Be gentle)

My Final Project

Kerbit is a Progressive Web App built using React, that uses a custom trained image classification model, made using Google AutoML, to recognise recyclable materials and lets users know if they can be recycled and where they can be recycled. It can recognise household recyclables like cardboard and glasses, larger items like kitchen electrics and furniture, and more!

It is modelled for use in the UK city Leeds so the map data and recycling info is accurate for that location.

Demo Link

Head over to Kerbit.app to check the project out! You can view the website on desktop and if you are on a supported mobile device, you will be prompted to download the PWA!

If your device isn't supported or you just want to see Kerbit in action check out some demo screen recordings I've done!

Link to Code

Check out the code here!

GitHub logo samroebuck / kerbit

University final project

Kerbit

University final project

Aim - Use a custom image classification machine learning model, built using Google AutoML, to create a PWA that allow users to take a photo of items they wish to recycle and the model will predict what the item is/its material and whether it can be recycled, and which bin to put it in or take it to a recycling center. Currently only modelled to work in Leeds, UK.

Netlify Status




How I built it (what's the stack? did I run into issues or discover something new along the way?)

Tech used

  • React
  • SCSS
  • GoogleAutoML
  • Netlify

Additional Thoughts / Feelings / Stories

Coming from this I have huge respect for people that do the data collection and training in machine learning because wow you have to do a lot! In the end, the image classification isn't as accurate as I would have hoped it would be at the end but I'm proud of what I managed to achieve by myself coming into these technologies as a relative beginner.

Top comments (2)

Collapse
 
danniannie profile image
danni.

This is amazing! Well done! Looks like a lot of work went into this and it's a great concept.

Collapse
 
samroebuck_ profile image
Sam

Thank you so much!