---
title: "Shelf"
kind: student-project
location: "Holy Angel University"
tags: [students, student-work, appdev]
summary: "Inventory for a shared equipment room: what is there, where it lives, and who borrowed it."
---

*A final project from Applications Development (Flutter), 2026 first semester. Part of [Seventy-three Flutter apps, and the eight I keep showing people](/calendar/2026-s1-appdev-students).*

<figure data-lightbox-group style="max-width: 22rem; margin: 0 0 var(--space-6, 2rem)"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/shelf/square.webp"><img src="/media/projects/2026-1st-sem/shelf/square.webp" width="1080" height="1080" alt="Shelf, the project's square image" loading="eager" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>

## What it is

Shelf keeps room views, storage locations, items, moves and loans on one device, so whoever is on duty can find the thing and put it back where it belongs. Sign-in is Google through Supabase, with a six-digit passcode for coming back.

Built with Flutter, Dart and Supabase Auth.

## Why it is here

There is a full design system in the repo, color through accessibility to a handoff checklist, done in a loud neo-brutalist lime that I would not have dared. Then the app actually follows it. That second part is rarer than the first.

## Find it

- Project: [github.com/28BEANS/shelf](https://github.com/28BEANS/shelf)
- Live: [28beans.github.io/shelf](https://28beans.github.io/shelf/)
- GitHub: [@28BEANS](https://github.com/28BEANS)
- LinkedIn: [profile](https://www.linkedin.com/in/vince-evangelista-b80b1632a)

## Screenshots

<div class="gallery" data-lightbox-group style="--gallery-min: 14rem; align-items: start">
<figure class="gallery__item" style="grid-column: 1 / -1"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/shelf/shot-1.webp"><img src="/media/projects/2026-1st-sem/shelf/shot-1.webp" width="1280" height="800" alt="Shelf, screenshot 1 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/shelf/shot-2.webp"><img src="/media/projects/2026-1st-sem/shelf/shot-2.webp" width="1440" height="900" alt="Shelf, screenshot 2 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/shelf/shot-3.webp"><img src="/media/projects/2026-1st-sem/shelf/shot-3.webp" width="1440" height="900" alt="Shelf, screenshot 3 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
</div>
