Campus Lost & Found Portal

A community-focused digital bulletin registry designed for students and faculty to post, search, and reclaim lost and found items. The interface deviates from standard modern dashboards to deliver a tactile, hand-crafted retro newspaper aesthetic built with double-line borders, parchment paper styling, pins, and physical connecting cords.

---

Overview

The Campus Lost & Found Portal is an interactive web application designed to bridge the gap between misplaced items and their rightful owners within a university campus. Built as a full-stack SPA, it utilizes a database registry to process user posts and coordinate handovers. Instead of standard corporate styles, the application adopts a vintage detective investigation board theme to encourage high engagement and intuitive navigation.

---

Live Demo

• Web Portal Link: https://lost-and-found-theta-three.vercel.app/

---

UI and Experience

• Vintage Typography: Combines high-contrast, heavy slab-serif header blocks with typewriter font faces for descriptive metadata.
• Grain Flicker Animation: An infinite multi-step CSS keyframe animation subtly shifts a high-frequency SVG turbulence noise filter across the viewport, giving the text a subtle print-press grain effect.
• Smooth Unfold Mechanics: Opening guidelines triggers a math-based newspaper transition. The modal scales, translates, and rotates from the exact screen coordinates of the clicked pin, unfolding into a centered notice.
• Responsive Single-Line Navigation: Restricts the header navbar to a single row across all mobile viewports, implementing touch-swipeable horizontal overflows for secondary page controls.

---

Features

• Secure Authentication System: Separate registration workflows for students and faculty featuring password encryption (bcryptjs) and JSON Web Token (JWT) session cookies.
• Bulletin Board Listings: Submit lost or found reports complete with title, description, category labels, date lost, contact metrics, and instant base64 photo attachment rendering.
• Dynamic Search & Query Filters: Real-time filtering mechanisms querying items by name, campus zone, item status, or category.
• My Board Dashboard: Personal administration panel allowing creators to view active listings, archive resolved items (rendering them with a vintage stamps overlay), or delete them permanently.
• System Administration Panel: High-level panel for moderators to monitor catalog health, verify database connection metrics, and purge flagged reports.

---

Tech Stack

• Frontend Framework: React (Vite single-page application)
• Styling & Assets: Tailwind CSS, Vanilla CSS animations, and Lucide React icons
• Backend Server: Node.js and Express.js (Router pattern architecture)
• Database: MongoDB (Mongoose ODM layer)
• Security & Tokens: JWT (JSON Web Tokens) and BcryptJS password hashing

---

Project Structure

lost-and-found/
├── client/                 # React Frontend Portal
│   ├── public/             # Static Assets & favicons
│   │   └── website-logo.svg
│   ├── src/
│   │   ├── assets/         # CSS design tokens, buttons, and layouts
│   │   ├── components/     # Custom UI elements (PushPin, HeroBox, Navbar)
│   │   ├── context/        # Auth context & state providers
│   │   ├── pages/          # Home, Browse, Dashboard, Login, Admin views
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── index.html
│   └── vercel.json         # Vercel SPA routing rewrites
│
└── server/                 # Node/Express Backend API
    ├── config/             # Mongoose connection logic
    ├── middleware/         # Session validation & file parsing
    ├── models/             # User and Item schemas
    ├── routes/             # Authentication, Items, and Moderation routes
    ├── seed.js             # Initial database database seeder
    ├── server.js           # API Entry Point
    └── vercel.json         # Vercel Serverless routing config

---

Design Philosophy

The core design philosophy is tactile skeuomorphism. The portal simulates a physical wooden cork board covered with pinned newspaper clips, polaroids, and connecting strings.

• Textured Surfaces: Parchment containers are decorated with dynamic halftone patterns, vintage typography, and rough torn-paper edges.
• Analogue Signifiers: Real-world objects like red pushpins and physical connector cords are mapped to UI links and active filters to guide user attention.
• Organic Layouts: UI cards are tilted slightly at pseudo-random angles based on their database IDs to prevent static vertical grid alignments and mimic a hand-arranged bulletin board.

---

How It Works

1. Connecting String Physics

Pins and guideline cards are connected via red catenary cords. The application uses references (useRef) to individual pushpins. On window resize, a ResizeObserver recalculates the exact coordinates using getBoundingClientRect() relative to the parent container. The path is then rendered as an SVG Bezier curve: $$\text{Curve} = \text{M } (x_1, y_1) \text{ C } (cp_{1x}, cp_{1y}), (cp_{2x}, cp_{2y}), (x_2, y_2)$$

2. Nesting Shadow-Wrap for Clip-Paths

Traditional box-shadows fail when containers utilize custom clip-paths. To circumvent this, the portal uses a nested wrapper pattern:

<div class="notecard-shadow-wrap">
  <div class="notecard">
    <!-- Torn paper card content -->
  </div>
</div>

The inner container defines the custom torn-paper shape using clip-path, while the outer container applies a CSS drop-shadow filter (filter: drop-shadow(...)), creating a drop-shadow that contours exactly to the torn edges.

3. Serverless API Routing

The serverless deployment isolates API routers under a single entry handler. The root /server/server.js exports the core Express application. When a request hits /api/* on Vercel, it spins up a Node container, connects to MongoDB Atlas using Mongoose connection pools, processes the REST request, and responds with JSON data.

---

Author & Project Information

• Author: Rajdeep Shaw
• Release Date: July 2026