A cloud-native serverless image management platform that allows users to upload images, automatically detect objects using YOLO, generate thumbnails, and search images by tags.
The system combines React + Vite on the frontend with AWS serverless services including S3, Lambda, API Gateway, and DynamoDB to create a scalable and event-driven architecture.
Users can upload images, search by detected objects, edit tags, and manage stored images through a modern web interface.
https://serverless-image-storage.vercel.app
The application follows a serverless event-driven architecture.
User ↓ React Frontend (Vercel) ↓ API Gateway ↓ AWS Lambda Functions ↓ Amazon S3 + DynamoDB ↓ YOLO Object Detection
User uploads image ↓ React frontend sends request to API Gateway ↓ Lambda generates pre-signed upload URL ↓ Image uploaded to S3 ↓ S3 event triggers Lambda ↓ Lambda generates thumbnail and runs YOLO detection ↓ Metadata + tags stored in DynamoDB
Users can upload images through the web interface. Images are stored securely in Amazon S3.
A Lambda function generates thumbnails for faster gallery loading.
Images are processed with a YOLO object detection model, automatically generating searchable tags.
Example detected tags:
person car dog bicycle
Users can search for images based on detected objects.
Example queries:
person car person + dog
Users can modify detected tags to improve search accuracy.
Images and their metadata can be removed from S3 and DynamoDB.
Users can retrieve the original high-resolution image stored in S3.
Users can upload an image and search for other images with similar detected objects.
React Vite AWS Amplify UI Axios
AWS Lambda Amazon S3 Amazon DynamoDB API Gateway
YOLO object detection model
Vercel (Frontend) AWS Serverless backend
serverless-image-storage
│
├── src
│ ├── components
│ ├── pages
│ ├── data
│ └── assets
│
├── lambda
│ ├── createThumbnail
│ ├── detectObjects
│ ├── searchByTags
│ ├── editTags
│ └── deleteImage
│
├── screenshots
│ ├── upload.png
│ ├── search.png
│ ├── edit-tags.png
│ └── delete.png
│
├── architecture
│ └── serverless-architecture.png
│
├── package.json
└── README.md
Create a .env file in the project root.
VITE_UPLOAD_URL=
VITE_SEARCH_URL=
VITE_EDIT_TAGS_URL=
VITE_DELETE_URL=
VITE_BUCKET=
These variables connect the frontend to AWS API Gateway and S3.
Install dependencies:
npm install
Start development server:
npm run dev
Open:
http://localhost:5173
Frontend is deployed using Vercel.
Build command:
npm run build
Output directory:
dist
AWS services used:
Amazon S3 AWS Lambda API Gateway DynamoDB
IAM roles control Lambda permissions S3 bucket policies restrict access CORS configured for frontend domain Environment variables stored securely
User authentication using AWS Cognito Pagination for large image collections CloudFront CDN for faster image delivery Image similarity search using embeddings Admin dashboard for moderation
Serverless architecture design Cloud infrastructure on AWS Event-driven systems Machine learning integration Full-stack development REST API design
MIT License