React PWA with offline support and add-to-home behavior
AI product · 02 MAY 2024
Aviary
A Progressive Web App that combines a responsive React interface, a PyTorch inference service, and a MongoDB backend to identify bird species from an uploaded image without requiring an installation.
React / PyTorch / MongoDB / PWA
PROJECT VISUAL / VERIFIEDTL;DR / KEY SIGNALS
CNN and Transformer inference exposed through a REST endpoint
MongoDB storage for uploads, inference logs, and community annotations
The product
Aviary starts from a simple user need: photograph a bird and receive an immediate species identification in the browser. The experience was designed to work across desktop and mobile as an installable PWA.
The interface was divided into reusable components including search, technology explanation, the AI demonstration, and frequently asked questions. Each component was first explored visually and then adapted for responsive use.
Three-part architecture
The system separates the experience, inference, and data layers so each part can evolve independently.
- Front-end — React and Bootstrap interface organized into reusable responsive components.
- AI server — PyTorch service that receives an image and returns the leading prediction with its confidence.
- Back-end — MongoDB API for uploads, inference history, and annotations that can support model improvement.
Inference flow
An image selected in the React client is packaged as multipart form data and sent to the identification endpoint. The AI service processes it through the fine-tuned CNN/Transformer pipeline and returns the predicted species and confidence to the interface.
PWA capabilities add offline support, home-screen installation, and update behavior, turning the browser experience into a lightweight bird-watching companion.
FULL DOCUMENTATION
Open detailed PDFGo deeper into the complete project.
Open the original associated PDF for the full methodology, code, analysis, and project evidence.