RecylceMe

Python

TypeScript

React Native

PyTorch

SQLite

Expo

Jest

FastAPI

Overview

RecycleMe is a cross-platform mobile application that helps users correctly sort household waste using on-device image classification. Built by a team of nine as part of the second-year Engineering and Software Project module (CM20314), the app achieved over 70% accuracy classifying six categories of recyclable material using a convolutional neural network trained with PyTorch.


Demo


System Architecture

The system is split into two independently deployable services.

The React Native frontend (Expo, TypeScript) runs on iOS and Android. It handles camera access, local image storage, classification requests, user state, and gamification UI. Expo Router provides file-system-based navigation across six screens: home/leaderboard, image scan, classification result, quiz, settings, and privacy policy.

The Python backend (Flask) exposes a REST API that serves model inference and manages a SQLite database for user profiles, XP points, and competitive room sessions. The PyTorch model is loaded once at startup via torch.jit.load and kept in eval mode, keeping inference latency low.

Mobile App (Expo / React Native)
        │
        │  multipart/form-data  POST /classify_image
        ▼
Flask REST API  ──►  PyTorch CNN (TorchScript .pt)
        │
        ▼
SQLite  (users, XP, rooms, leaderboard)

Image Classification

The model classifies waste into six categories drawn from the public Garbage Classification dataset: cardboard, glass, metal, paper, plastic, and trash. These map to real-world bin types (blue recycling, green general waste, food waste, etc.) via a lookup table in the frontend.

Images are preprocessed on the server before inference — resized to 128 × 128 pixels and converted to a normalised tensor:

transformations = transforms.Compose([
    transforms.Resize((128, 128)),
    transforms.ToTensor()
])

Gamification

Engagement was a core design goal. The app tracks user XP earned by scanning items and optionally completing a post-classification quiz. XP maps to a level using a square-root progression curve:

level  = floor(0.4 × √XP)
nextXP = floor(((level + 1) / 0.4)²)

Users can create or join competitive rooms — short 8-character UUIDs shared between friends or housemates — and view a live leaderboard ranked by points. This turned routine recycling into a lightweight social challenge.


Testing

The test suite covers both frontend and backend:

  • Frontend (Jest): Component tests for every major UI element — Navbar, TitleBar, LeaderboardItem, ListItem, CustomButton, GeneralDataModal — plus integration-style tests for ImageScan, LandingPage, SettingsPage, and utility modules (Storage, ClassConversions).
  • Backend (pytest): API endpoint tests (api_tests.py), preprocessing pipeline tests, and model base/ResNet comparison tests.

Running a consistent test suite across a nine-person team required shared conventions for mocking AsyncStorage, Expo modules, and the fetch API.


Key Outcomes

  • >70% classification accuracy across six waste categories
  • Full end-to-end mobile app shipped across iOS and Android via Expo Go
  • Gamification loop (XP, levels, rooms, leaderboard) drove repeat engagement during user testing
  • Clean separation of concerns between the inference service and the application database
  • Comprehensive test coverage validated across both stacks

On this page

OverviewDemoSystem ArchitectureImage ClassificationGamificationTestingKey Outcomes