A Technical Deep-Dive into Modern Serverless Architecture
Introduction
I recently build an e-commerce website that handles custom gifts orders with image uploads, payment processing, order tracking, and admin dashboard and all running on a completely serverless architecture. This blog walks through the complete technical decisions, architecture patterns and lessons learned.
The Tech Stack that I used
Layer: Frontend Framework Technology: Next.js 15 Why I choose it: Server components, built in API routs
Layer: Database Technology: Amazon DynamoDB Why I choose it: Serverless, pay-per-request, automatic scaling
Layer: File Storage Technology: S3 Why I choose it: Reliable, cheap, presigned URLs for secure access
Layer: Authentication Technology: Cognito Why I choose it:…
A Technical Deep-Dive into Modern Serverless Architecture
Introduction
I recently build an e-commerce website that handles custom gifts orders with image uploads, payment processing, order tracking, and admin dashboard and all running on a completely serverless architecture. This blog walks through the complete technical decisions, architecture patterns and lessons learned.
The Tech Stack that I used
Layer: Frontend Framework Technology: Next.js 15 Why I choose it: Server components, built in API routs
Layer: Database Technology: Amazon DynamoDB Why I choose it: Serverless, pay-per-request, automatic scaling
Layer: File Storage Technology: S3 Why I choose it: Reliable, cheap, presigned URLs for secure access
Layer: Authentication Technology: Cognito Why I choose it: Managed auth, MFA support, integrates with Amplify
Layer: Email Service Technology: Amazon SES Why I choose it: Transactional emails, high deliverability, low cost
Layer: Hosting Technology: Amazon Amplify Gen 2 Why I choose it: Git based deployment, automates SSL, CDN included.
Architecture Overview
The Customer Journey
Step by Step:
- Landing Page - Customer learns about the product and clicks "Order Now"
- Customization - Customer writes their custom message and optionally uploads a photo
- Address Entry - Customer enters recipient shipping address and their billing details
- Payment - Redirected to Payment Gateway
- Success - After payment, customer sees their order ID and tracking link
- Email - Customer receives confirmation email with order details
- Tracking - Customer can check order status anytime using their order ID
Payment Flow (The Tricky Part)
Image Upload Architecture
Why I Used Presigned URLs?
Instead of making the S3 bucket public, I use presigned URLs that:
- Expire after 1 hour
- Are generated on-demand
- Keep the bucket private and secure
- Work with CloudFront CDN
Email Notification System
Email Features
- HTML templates with incline CSS for email client compatibility
- Multiple admin recipients
- Reply-to headers, so admin can respond directly to customers
- Order details formatted for easy reading and fulfillment
Deployment Pipeline
The entire deployment is automated,
- Push the code to GitHub
- Amplify detects the change
- Builds the Next.js application
- Injects environment variables
- Deploys to CloudFront CDN
- Site is live in 305 minutes
Deep Dive: AWS Services Powering This Application
AWS Services Architecture
1. AWS Amplify Gen 2
What is it?
AWS Amplify Gen 2 is a complete development platform that handles hosting, CI/CD, and backend infrastructure for web applications. It’s the second generation of Amplify.
Why I chose it?
- Git based deployments: Push to GitHub –> Automatically deployed into AWS
- Built in CI/CD: No Jenkins, No GitHub Actions
- Free SSL certificates: HTTPS enabled automatically
- Global CDN: CloudFront is included
- Custom domains: Easy DNS configurations
- Environment variables: Secure secrets management
- Preview Deployment: Test PRs before merging
How It’s Used in This Project
2. Amazon DynamoDB
What is it?
DynamoDB is a fully managed NoSQL database service that provides single-digit millisecond performance at any scale. It’s serverless, no provisioning, no patching or management required.
Why I chose it?
- Serverless, Auto-scaling
- Pay-per request
- Single digit ms latency
- AWS-native integration
3. Amazon S3
What is it?
S3 is object storage built for storing and retrieving any amount of data. It’s the backbone of AWS storage.
Why I chose it?
- Unlimited storage
- Presigned URLs
- Cheap
- Direct SDK access
S3 Features Used
- Private Bucket: Images not publicly accessible
- Presigned URLs: Temporary access links (1 hour)
- Server-side Upload: API route handles upload, not browser
- Content-Type: Proper MIME types for images
Security Configuration
Bucket Policy: Private by default CORS: Enabled for upload endpoints Presigned URLs: Time-limited access IAM: Scoped permissions for put/get only
4. Amazon Cognito
What is it?
Amazon Cognito provides authentication, authorization and user management for web and mobile apps. Users can sign in directly or through third party identity providers.
Why I chose it?
- AWS-native
- MFA support
How It’s Used
5. Amazon SES (Simple Email Service)
What is it?
Amazon SES is a cloud based email service for sending transactional, marketing and notification emails.
How It’s Used
6. Amazon CloudFront (via Amplify)
What is it?
CloudFront is a content delivery network that delivers content with low latency from 400+ edge locations worldwide.
How It’s Used