Full-Stack Development • React • Node.js

Lost and Found Portal

A full-stack web application designed to help university students post and search for lost items across campus with real-time notifications and automated matching.

GitHub Figma Deployed Site

Project Goals

Create a centralized platform for campus lost and found items
Simplify reporting and searching for lost belongings
Provide real-time notifications for item matches
Ensure secure authentication and data privacy

Key Features

User Authentication

Secure login with role-based access control

Item Management

Create and manage lost/found listings

Advanced Search

Filter by category, location, and date

Notifications

Email and in-app alerts for matches

Responsive Design

Optimized for mobile and desktop

Admin Dashboard

Comprehensive management tools

Technical Implementation

Frontend

Built with React using functional components and hooks
Responsive layouts with CSS Grid and Flexbox
Reusable UI components with styled-components
React Router for seamless navigation

Backend

RESTful API using Node.js and Express
JWT authentication for secure sessions
SQL database with proper relations and constraints
Middleware for validation and error handling

DevOps

Containerized with Docker
CI/CD pipeline with GitHub Actions
Automated testing for code quality

Technologies Used

React Frontend Framework

Node.js Backend Runtime

MySQL Database

Docker Containerization

Frontend: React, Redux, Material-UI, React Router
Backend: Node.js, Express, JWT
Database: MySQL, Sequelize ORM
DevOps: Docker, GitHub Actions, AWS
Tools: Git, Figma, Postman

Project Workflow

Started with user research and wireframes in Figma
Developed database schema and API specifications
Implemented core features with iterative testing
Conducted usability testing with students
Deployed to production with monitoring

Future Enhancements

Image recognition AI for automatic item matching
Integration with university ID systems
Mobile app development with React Native
Analytics dashboard for tracking trends

Lessons Learned

Importance of user-centered design
Benefits of containerization for deployment
Effective state management in React applications
SQL query optimization for performance
Value of CI/CD in team projects