Lost & Found Web Platform
A community platform for reporting and recovering lost items — browse by category, post what you lost or found, and reach owners directly. My final-year graduation project, designed in Figma and built end-to-end as a full-stack web app.
- Scope
- DESIGNED · BUILT
- Timeline
- Nov 2023 — May 2024
- Role
- Solo — UI/UX design + full-stack build
- Platforms
- Web — Desktop
- Tools
- Figma
- Stack
- Node.jsExpressEJSBootstrapMySQL
- Deployed on
- Railway
13
Screens designed
6
Item categories
MVC
Architecture
Full-stack
Node · MySQL
Overview
The project
This was my final-year graduation project for a BSc in Computer Science at the University of Baghdad, graded A+. The goal was a single place where people who have lost something and people who have found something can meet — so I designed the full interface in Figma and then built it end-to-end as a working full-stack web app. The design had to make two opposite intentions ("I lost this" / "I found this") live in one simple posting flow, keep a growing catalogue of items easy to browse, and make stranger-to-stranger contact feel safe.
It was my first full-stack build end to end. It's a place to report and recover lost belongings: people sign up, post a lost or found item with a photo and a category, and browse what others have reported. The backend follows the MVC pattern on Node.js and Express, with EJS views, a Bootstrap-based responsive frontend, and a MySQL database. Authentication runs on hashed passwords and sessions, image uploads go through Multer, and Nodemailer handles email.
For a long time it only ran locally against a MAMP database — so the most recent chapter of the project was actually getting it online: moving the database to a hosted MySQL, swapping every hardcoded credential for environment variables, and deploying the Node app to the web. It's the project where the full picture — design, backend, database, and deployment — came together for the first time.
How it was made
Design process
Discover
Studied the lost-and-found problem: what info a post actually needs to reunite an item with its owner
Define
IA & core flows: browse by category, post an item, view & claim via contact, manage a profile
Wireframe
Low-fi layouts for home, category browse, post detail, and the post/auth forms
Visual design
Calm navy palette, clear type scale, and one consistent card system to signal trust
Build
Implemented the full design as a working Node/Express + MySQL platform — not a mockup
Defend
Final screens + the live app presented and graded as the graduation project
What I learned
Research insights
Two intents, one flow
'I lost this' and 'I found this' are opposite actions that share one posting flow; the UI had to make the distinction obvious at a glance — solved with an explicit Lost/Found tag and toggle.
Enough detail to reunite
A post is useless without description, location, and contact; the post form and detail page were structured around exactly what someone needs to claim an item.
Findability at scale
Items spread across many categories, so browse-by-category, search, and per-category views keep a growing catalogue scannable.
Trust between strangers
People share a phone or email with strangers, so privacy toggles (hide phone / hide email) and a calm, credible visual tone were designed to lower that friction.
Why it looks like this
Key design decisions
Browse-by-category IA
Six clear item categories as the primary way into the catalogue
Lost / Found tagging
Every post explicitly typed so intent reads instantly
Reusable card system
One post-card pattern reused across home, category, and profile
Progressive detail
Short card copy on lists → full description + contact on the post page
Privacy-first contact
Hide phone / email toggles for safer stranger-to-stranger reach-out
Calm, trustworthy tone
Navy palette and clear typography to make sharing feel safe
The screens
Gallery
What I used
Tools
Figma
UI design + prototyping
What's inside
Features & pages
Auth & accounts
Sign-up and login with hashed passwords and session-based authentication
Report items
Post a lost or found item with details and a category
Photo uploads
Item images handled with Multer and served back in the listings
Email notifications
Account and item emails sent through Nodemailer
Responsive UI
Bootstrap-based interface designed and built end to end across devices
What was hard
Challenges & solutions
Problem
As a full graduation project it needed a clean structure that separated data, logic, and presentation instead of one tangled codebase.
Solution
Applied the MVC pattern — models for MySQL queries, controllers for logic, routes for endpoints, and EJS views for rendering — so each concern stayed on its own.
Problem
User accounts required secure sign-up and login rather than storing plaintext passwords.
Solution
Hashed passwords with bcryptjs and managed authenticated sessions with express-session and JWT, guarding protected routes behind a login check.
Problem
Users report items with photos, so the app had to accept, store, and serve uploaded images.
Solution
Handled multipart uploads with Multer, saved the files server-side, and rendered them back into the item feed.
Problem
The project originally ran only on my machine against a local MAMP MySQL database, so it couldn't be deployed as-is.
Solution
Moved the database to a hosted MySQL on Railway, replaced every hardcoded localhost credential with environment variables, and deployed the Node app to Railway alongside the database.
Built with
Tech stack
Node.js
Backend runtime
Express
Server framework
EJS
Server-side views
Bootstrap
Frontend styling
MySQL
Database (mysql2)
bcryptjs + JWT
Auth & sessions
Multer
Image uploads
Nodemailer
Railway
App + database hosting
What came out of it
Results
13
Screens designed & built
6
Item categories
A+
Graduation project grade
7
Core user flows
Full-stack
Working platform, not a mockup