work

case study

TrackR

A lost-and-found board where owners prove an item is theirs before they get in touch

Full-stack project (React frontend, Express/MongoDB backend) · Aug-Oct 2024 · personal

TrackR screenshot

overview

TrackR is a web app for posting lost or found items and getting them back to their owners. I built a React frontend and a Node/Express API backed by MongoDB. The main idea is a verification question: the person who posts an item decides who gets their contact details.

problem

Lost-and-found usually runs through notice boards or group chats. Posts get buried, you can't search them, and anyone can claim an item. I wanted one place to post and search items, with a simple check so that only someone who can describe the item gets the finder's contact details.

approach

  1. 01Split the project into a Vite + React frontend (React Router, Axios, Bootstrap) and an Express API using Mongoose models for users, item posts and claim responses.
  2. 02Each post has a type (Lost or Found), a description, a location, uploaded photos (handled with Multer) and a question that only the real owner should be able to answer.
  3. 03Claimants submit an answer. It sits in a 'Moderation' state until the poster marks it Yes or No, and an approved claimant can then see the poster's phone number.
  4. 04Handled auth with bcrypt-hashed passwords, JWTs stored in cookies, and email OTPs through Nodemailer for account verification and password resets.

features

Lost and found posts

Users post an item as Lost or Found with photos, a location, a description and a verification question.

Answer-based claims

Claimants answer the poster's question, and the poster approves or rejects each answer before any contact details are shared.

Search and filters

A case-insensitive search matches item names, descriptions and locations, and results can be filtered to show only lost or only found items.

Account flows

Signup, login, email OTP verification, forgot/change password, saved posts, and a 'My Listings' page where users can activate or deactivate their posts.

Admin dashboard

A separate admin login leads to a dashboard that lists users and lets the admin email or delete them.

challenges

Deciding who sees contact details

Showing a phone number on every post would let anyone claim an item. So I made the contact details wait behind the poster's own Yes/No decision on each answer. That meant storing a separate response record for each claim.

Keeping auth on the server

I kept the JWT in a cookie and put protected actions behind sign-in middleware, with bcrypt for passwords and emailed OTPs for verification. This was my first time wiring a full auth flow end to end.

outcome

TrackR works as a complete lost-and-found flow from posting to claiming to contact. It taught me how to design a multi-model MongoDB schema and run auth, file uploads and email from one Express backend.

stack

ReactViteReact RouterAxiosBootstrapNode.jsExpressMongoDBMongooseJWTbcryptMulterNodemailer

contact

Have something worth building?

Open to freelance. Fastest response on WhatsApp ↗ — usually within the hour.

tayyabkhangk4734@gmail.com

next project

Pomero