LOSTit

A serverless Lost & Found platform for college campuses
Built with React · AWS Lambda · DynamoDB · S3 · Cognito

     

---

What it does

LOSTit is a campus-wide lost and found system where students can report lost or found items, browse a public gallery, and securely contact each other to arrange handovers — all backed by a fully serverless AWS architecture.

No traditional backend server. No EC2. Every request goes through API Gateway → Lambda → DynamoDB/S3.

---

Live Demo

→ lostit.onrender.com

---

Architecture

React (Render)
      │
      ▼
Amazon Cognito          ← OAuth 2.0 + PKCE authentication
      │
      ▼
API Gateway (REST)      ← JWT-authorised endpoints
      │
      ▼
AWS Lambda              ← Business logic (Node.js)
    ├──▶ DynamoDB        ← Item metadata storage
    └──▶ S3              ← Image storage via pre-signed URLs

Key design decisions:

• Images never pass through Lambda — frontend requests a pre-signed S3 URL, uploads directly to S3
• All API routes protected by Cognito JWT token validation at API Gateway level
• IAM roles scoped per Lambda function — least-privilege access

---

Tech Stack

Layer	Technology
Frontend	React 18, React Router v7, Tailwind CSS
Authentication	AWS Cognito, OAuth 2.0 Authorization Code + PKCE
API	Amazon API Gateway (REST)
Backend	AWS Lambda (Node.js)
Database	Amazon DynamoDB
File Storage	Amazon S3 + pre-signed URLs
Hosting	Render Static Site
IaC / Config	AWS Amplify CLI

---

Features

• Secure auth — Cognito Hosted UI with OAuth 2.0 PKCE flow. Tokens managed by AWS Amplify
• Report items — Upload lost or found items with photo, description, location, and contact info
• Public gallery — Browse all reported items without login. Search and filter by type
• Contact gating — Reporter contact details only visible to signed-in users
• Pre-signed uploads — Images uploaded directly from browser to S3, never through Lambda
• User profile — View and manage your own submitted reports

---

Project Structure

src/
├── components/
│   ├── Navbar.js           # Scroll-aware nav, Cognito auth state
│   ├── HomePage.js         # Landing page with hero and how-it-works
│   ├── UploadLostItemForm.js  # Report form with drag-drop image upload
│   ├── LostItemsGallery.js    # Public gallery with search/filter/modal
│   ├── UserProfile.js         # Authenticated user's submitted items
│   └── Callback.js            # OAuth redirect handler
├── dynamoService.js        # DynamoDB read/write via API Gateway
├── aws-exports.js          # Cognito + API config (env-driven)
├── App.js                  # Route definitions
└── index.js

---

Local Setup

Prerequisites

• Node.js v18+
• npm
• AWS account with configured credentials
• AWS Amplify CLI: npm install -g @aws-amplify/cli

Environment Variables

Create a .env file in the root:

REACT_APP_AWS_REGION=us-east-1
REACT_APP_USER_POOL_ID=us-east-1_XXXXXXXXX
REACT_APP_USER_POOL_WEB_CLIENT_ID=your_client_id
REACT_APP_COGNITO_DOMAIN=your-domain.auth.us-east-1.amazoncognito.com
REACT_APP_API_BASE_URL=https://your-api-id.execute-api.us-east-1.amazonaws.com/prod

Run locally

git clone https://github.com/ravi-kumar-t/LOSTit.git
cd LOSTit
npm install
npm start

Note: Runs on HTTPS locally (cross-env HTTPS=true) to match Cognito redirect URI requirements.

---

AWS Services Used

Service	Purpose
Amazon Cognito	User pool, OAuth 2.0 hosted UI, JWT token issuance
API Gateway	REST API, JWT authorizer, CORS configuration
AWS Lambda	Item CRUD, pre-signed URL generation
Amazon DynamoDB	LostFoundItems table — item metadata
Amazon S3	Image hosting, pre-signed URL uploads
IAM	Per-function execution roles, least-privilege policy
AWS Amplify	Frontend Cognito integration, token management

---

API Endpoints

Method	Endpoint	Auth	Description
GET	/items	Public	Fetch all reported items
POST	/upload	Required	Submit new lost/found item
GET	/user/items	Required	Fetch current user's items
GET	/presigned-url	Required	Generate S3 pre-signed upload URL

---

Deployment

Frontend is deployed as a static site on Render.

# Build command
npm install && npm run build

# Publish directory
build/

Environment variables are configured in Render's dashboard — no secrets in the repository.

---

Roadmap

• Swagger / OpenAPI documentation
• Dockerize for local full-stack development
• Admin dashboard for campus coordinators
• Email notification on successful item claim
• DynamoDB GSI for itemType and status filtering
• CloudFront CDN for S3 image delivery

---

Author

Tekkali Ravi Kumar — github.com/ravi-kumar-t · LinkedIn

B.Tech CSE · Lovely Professional University · 2027 Batch