Building a Full-Stack E-Commerce Platform with AWS
Source: Dev.to
Introduction
I recently built an e-commerce website that handles custom‑gift orders with image uploads, payment processing, order tracking, and an admin dashboard—all running on a completely serverless architecture. This post walks through the technical decisions, architecture patterns, and lessons learned.
Step by Step
- Landing Page – Customer learns about the product and clicks “Order Now.”
- Customization – Customer writes a custom message and optionally uploads a photo.
- Address Entry – Customer enters the recipient’s shipping address and billing details.
- Payment – Customer is redirected to the payment gateway.
- Success – After payment, the customer sees an order ID and a tracking link.
- Email – Customer receives a confirmation email with order details.
- Tracking – Customer can check order status anytime using the order ID.
Email Features
- HTML templates with inline CSS for email‑client compatibility.
- Multiple admin recipients.
- Reply‑to headers so admins can respond directly to customers.
- Order details formatted for easy reading and fulfillment.
Deployment Automation
The entire deployment is automated:
- Push the code to GitHub.
- Amplify detects the change, builds the Next.js application, injects environment variables, and deploys to a CloudFront CDN.
- The site goes live in ~305 minutes.
Key Benefits
- Git‑based deployments – push to GitHub → automatic AWS deployment.
- Built‑in CI/CD – no need for Jenkins or GitHub Actions.
- Free SSL certificates – HTTPS enabled automatically.
- Global CDN – CloudFront included.
- Custom domains – easy DNS configuration.
- Environment variables – secure secrets management.
- Preview deployments – test PRs before merging.
AWS Services
AWS Amplify Gen 2
What is it?
A complete development platform that handles hosting, CI/CD, and backend infrastructure for web applications. It is the second generation of Amplify.
Why I chose it
- Git‑based deployments (push → auto‑deploy).
- Built‑in CI/CD (no external pipelines).
- Free SSL certificates.
- Global CDN via CloudFront.
- Simple custom‑domain setup.
- Secure environment‑variable management.
- Preview deployments for PR testing.
How it’s used – Hosts the Next.js frontend, runs CI/CD pipelines, and provides the CloudFront distribution.
Amazon DynamoDB
What is it?
A fully managed NoSQL database offering single‑digit millisecond performance at any scale. It is serverless—no provisioning, patching, or management required.
Why I chose it
- Serverless with auto‑scaling.
- Pay‑per‑request pricing.
- Consistent low latency.
- Tight AWS integration.
How it’s used – Stores order data, user profiles, and product information.
Amazon S3
What is it?
Object storage for any amount of data, the backbone of AWS storage.
Why I chose it
- Unlimited storage.
- Presigned URLs for secure, temporary access.
- Low cost.
- Direct SDK access from the application.
Features used
- Private bucket (images not publicly accessible).
- Presigned URLs (1‑hour expiration).
- Server‑side upload via API route (browser never accesses the bucket directly).
- Correct
Content‑TypeMIME handling. - Bucket policy set to private by default.
Amazon Cognito
What is it?
Authentication, authorization, and user‑management service for web and mobile apps, supporting direct sign‑in and third‑party identity providers.
Why I chose it
- Native AWS integration.
- Built‑in MFA support.
How it’s used – Manages customer accounts, handles sign‑up/sign‑in flows, and secures API endpoints.
Amazon SES (Simple Email Service)
What is it?
A cloud‑based email service for sending transactional, marketing, and notification emails.
How it’s used – Sends order confirmation, shipping updates, and admin notifications with the HTML templates described above.
Amazon CloudFront (via Amplify)
What is it?
A global content delivery network delivering content with low latency from 400+ edge locations.
How it’s used – Serves the static assets of the Next.js site and the presigned image URLs, providing fast, secure delivery worldwide.