DEV Community

Randika Madhushan Perera
Randika Madhushan Perera

Posted on

Building a Full-Stack E-Commerce Platform with AWS

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

High level arch

The Customer Journey

The Customer Journey

Step by Step:

  1. Landing Page - Customer learns about the product and clicks "Order Now"
  2. Customization - Customer writes their custom message and optionally uploads a photo
  3. Address Entry - Customer enters recipient shipping address and their billing details
  4. Payment - Redirected to Payment Gateway
  5. Success - After payment, customer sees their order ID and tracking link
  6. Email - Customer receives confirmation email with order details
  7. Tracking - Customer can check order status anytime using their order ID

Payment Flow (The Tricky Part)

Payment Flow

Image Upload Architecture

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 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

Deployment Pipeline

The entire deployment is automated,

  1. Push the code to GitHub
  2. Amplify detects the change
  3. Builds the Next.js application
  4. Injects environment variables
  5. Deploys to CloudFront CDN
  6. Site is live in 305 minutes

Deep Dive: AWS Services Powering This Application

AWS Services Architecture

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?

  1. Git based deployments: Push to GitHub --> Automatically deployed into AWS
  2. Built in CI/CD: No Jenkins, No GitHub Actions
  3. Free SSL certificates: HTTPS enabled automatically
  4. Global CDN: CloudFront is included
  5. Custom domains: Easy DNS configurations
  6. Environment variables: Secure secrets management
  7. Preview Deployment: Test PRs before merging

How It's Used in This Project

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?

  1. Serverless, Auto-scaling
  2. Pay-per request
  3. Single digit ms latency
  4. 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?

  1. Unlimited storage
  2. Presigned URLs
  3. Cheap
  4. 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?

  1. AWS-native
  2. MFA support

How It's Used

cognito works

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

email 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

Cloudfront Used

Top comments (0)