Create a Technical Architecture Presentation
Build a hosted Technical Brief with architecture diagram and ROI analysis.
Introduction
30 Second Summary
Building something impressive is only half the job. The other half is explaining why it matters to someone who didn't build it.
In this project, you will create a professional Technical Brief that turns your serverless lead capture system into a presentation-ready portfolio piece. You will build architecture diagrams, write a business narrative with ROI analysis, and structure a demo script you can use in SE interviews.
What You'll Build
A hosted one-page Technical Brief combining architecture visualization, business storytelling, and a structured Tell-Show-Tell presentation script, all deployed to S3 as a shareable link.
By the end of this project, you'll have:
- A professional architecture diagram of your serverless lead capture pipeline, built with official AWS icons in diagrams.net.
- A hosted Technical Brief webpage with business narrative, ROI analysis backed by real industry research, and a technology stack breakdown.
- A structured Tell-Show-Tell demo script with timing notes and objection responses ready for SE interviews.
- Secret Mission: Add live system health metrics that fetch real CloudWatch data and display it on the page.
Are there any prerequisites?
Yes. This project builds on Project 7 (Medspa Lead Capture System). You need a working AWS account with CLI configured, plus your existing S3 static site, API Gateway, Lambda, DynamoDB, and SNS resources from that project.
Set Up diagrams.net and Enable AWS Icons
To present your serverless architecture professionally, you need a clean, labeled diagram built with official AWS icons. This is the foundation of your Technical Brief.
In this step, you'll configure diagrams.net as your diagramming tool and enable the AWS shape library so all the service icons are ready to use.
In this step, get ready to:
- Create a new diagram file named medspa-architecture.drawio.
- Enable the AWS shape library with official service icons.
- Verify the setup works by searching for an AWS icon.
Create a new blank diagram
diagrams.net needs a storage location before you can start diagramming. Selecting Device saves your diagram file locally on your computer with no account required.
- In your diagrams.net tab, you should see a prompt asking where to store your diagram files.
- Select Device from the storage options.
- Click Create New Diagram.
- In the template manager, make sure Blank Diagram is selected.
- Enter medspa-architecture as the filename, then click Create.
You should now see a blank white canvas with a grid, the shapes panel on the left, and the format panel on the right.
Why save to Device?
diagrams.net does not store your diagram data on its servers. Choosing Device means the .drawio file downloads straight to your computer.
You can reopen and edit it anytime by dragging the file back into the editor.
Don't see the storage prompt?
If diagrams.net opens directly to a blank canvas or a previous diagram, select File in the top menu, then New to start a fresh diagram. You can also click File then Save as and choose Device to set your storage location.
Help me create a new diagram and save to device
Enable the AWS shape library
By default, diagrams.net shows general-purpose shapes. To get the official AWS service icons, you need to enable the AWS shape library manually.
- Click + More Shapes at the bottom of the left panel.
- Scroll down to the Networking section.
- Enable the AWS library. You may also see versioned options like AWS19. Enable the most recent one available.
- Click Apply.
You should now see AWS service icons (Lambda, S3, API Gateway, DynamoDB, SNS, and more) in your left panel.
What is the AWS shape library?
AWS provides official icon sets for architecture diagrams. The diagrams.net AWS library includes these official icons for every AWS service.
Using the official icons makes your diagrams instantly recognizable to anyone in the cloud industry.
Don't see the AWS library under Networking?
Make sure you scrolled far enough in the + More Shapes dialog. The Networking section is typically below the General, Software, and other categories. If you still cannot find it, try searching for AWS in the dialog's search field.
Help me find the AWS shape library
Verify the setup by searching for Lambda
- At the top of the left panel, click into the search field.
- Type Lambda and press Enter.
You should see the AWS Lambda icon appear in the search results below. If it shows up, your AWS shape library is active and you are ready to build your architecture diagram.
✔️ I see the Lambda icon
Your diagrams.net setup is complete. You have the AWS shape library enabled and all service icons ready to use.
ⓧ No results appear
- Go back to + More Shapes at the bottom of the left panel.
- Confirm that the toggle next to the AWS library (under Networking) is switched on.
- Click Apply again.
- Search for Lambda once more.
Help me get Lambda search results to appear
Your diagramming environment is ready. Next up, you'll use these AWS icons to build a professional architecture diagram of your entire lead capture pipeline.
Create the Architecture Diagram
Your diagrams.net workspace is ready with AWS icons loaded. Now it's time to turn your serverless pipeline into a visual story.
Architecture diagrams are the centerpiece of any SE technical presentation. They let a non-technical audience follow the data flow without reading code. In this step, you'll lay out every component of your lead capture system, connect them with labeled arrows, and export the finished diagram for your Technical Brief.
In this step, get ready to:
- Build the pipeline layout with official AWS icons arranged left-to-right.
- Add connection arrows and technical labels between each component.
- Export the diagram as a high-resolution PNG and SVG for web use.
Build the pipeline layout
Your lead capture system has six components that data flows through from left to right. Placing them in this order mirrors how the pipeline actually executes.
- In the left panel search bar, type User or Client and drag a User/Client shape onto the far left of your canvas.
- This shape represents the S3 static site form where leads submit their information.
- Search for API Gateway in the left panel and drag the API Gateway icon to the right of the Client shape.
- Search for Lambda and place the Lambda icon to the right of API Gateway.
- Now add the three parallel outputs that branch from Lambda. Search for and place each of these:
- DynamoDB icon to the below-right of Lambda (representing lead storage).
- A generic endpoint shape directly to the right of Lambda (representing the Webhook/CRM integration).
- SNS icon to the above-right of Lambda (representing email and SMS alerts).
- Leave adequate spacing between all shapes so that connection arrows and labels are easy to read.
Why a left-to-right layout?
A left-to-right layout mirrors how the pipeline processes data over time. Your audience reads the diagram like a sentence: input enters on the left, processing happens in the middle, and outputs fan out on the right.
The three-way branch from Lambda makes it immediately clear that a single event triggers multiple parallel actions. This is a key selling point of your architecture.
Your canvas should now show six shapes arranged in a left-to-right flow. The Client is on the far left, API Gateway and Lambda are in the middle, and DynamoDB, Webhook, and SNS fan out on the right.
Can't find a shape in the search?
If searching returns no results, confirm the AWS shape library is still enabled. Click +More Shapes at the bottom of the left panel and check that the AWS library under Networking has a checkmark.
For the generic endpoint shape (Webhook/CRM), try searching endpoint or generic. You can also use any rectangular shape and label it manually.
Help me find AWS icons in diagrams.net
Add connections and labels
Arrows show data flow. Labels on those arrows tell your audience exactly what travels between components. This transforms a generic diagram into a technical specification.
- Hover over the Client shape until blue arrows appear on its edges. Click and drag from the right edge to the API Gateway shape to create a connecting arrow.
- Double-click the arrow you just created. A text field appears. Type POST /leads as the label.
- Draw an arrow from API Gateway to Lambda. Label it x-api-key + JSON payload.
- Draw an arrow from Lambda to DynamoDB. Label it boto3 put_item.
- Draw an arrow from Lambda to the Webhook/CRM shape. Label it urllib.request (CRM sync).
- Draw an arrow from Lambda to SNS. Label it boto3 publish (email + conditional SMS).
- Add a small text annotation near the API Gateway shape. Double-click an empty area near it and type Usage Plan + API Key to note the security context.
Why label arrows with implementation details?
Labels like boto3 put_item serve two audiences. A technical interviewer sees that you know the exact SDK calls. A non-technical stakeholder can still follow the flow direction without needing to understand the labels.
The Usage Plan + API Key annotation highlights security without cluttering the flow. It signals that you think about access control, which is a common SE interview topic.
Your diagram should now show a complete data flow with all six components connected by labeled arrows. Every connection tells the reader what data moves and how.
Reposition labels for clarity
If labels overlap with shapes or other arrows, click the label text and drag it to a clearer position along the arrow. You can also adjust arrow routing by dragging the blue midpoints that appear when you select an arrow.
Export the diagram
You need two export formats. A high-resolution PNG for your Technical Brief webpage, and an SVG for flexible scaling if you reuse the diagram in slides or documents.
- Click File in the top menu bar.
- Select Export as, then PNG.
- In the export dialog, set Border to 10 and Zoom (or Scale) to 200% for 2x resolution.
- Click Export and save the file as architecture.png.
- Repeat the export process: click File, then Export as, then SVG.
- Save the SVG file as architecture.svg.
- Save your working file by pressing Cmd+S (macOS) or Ctrl+S (Windows). This preserves the editable medspa-architecture.drawio file for future changes.
Why export both PNG and SVG?
PNG is a raster image that displays reliably in any browser. The 2x scale ensures the diagram stays crisp on high-resolution screens. You will embed this directly in your Technical Brief HTML.
SVG is a vector format that scales to any size without losing quality. Keep it as a backup for slide decks or printed materials where you might need a larger version.
Confirm that you have three files saved: architecture.png, architecture.svg, and medspa-architecture.drawio. Open architecture.png in your file browser to verify the diagram looks complete and legible.
Diagram looks blurry or cut off?
If the PNG looks blurry, re-export and make sure the Zoom/Scale is set to 200%. If part of the diagram is cut off, increase the Border value or select all shapes first (press Cmd+A or Ctrl+A) to ensure the export captures everything.
Help me fix my diagram export in diagrams.net
Your architecture diagram is complete and exported. Next up, you'll build the Technical Brief webpage that wraps this diagram in a business narrative with ROI analysis and a demo script.
Write the Business Narrative and Build the Technical Brief
Your architecture diagram captures the technical flow, but a diagram alone does not land a job offer. Hiring managers want to see that you can translate technical complexity into business value.
In this step, you will build a one-page Technical Brief that wraps your diagram in a business narrative. It will quantify the ROI of your system, walk through how it works, and include a structured demo script for SE interviews.
In this step, get ready to:
- Create the project folder and HTML page with styling and a hero section.
- Add the architecture diagram, problem statement, solution overview, ROI analysis, and technology stack.
- Write a Tell-Show-Tell demo script with timing notes and objection responses.
Create the project folder and hero section
The Technical Brief is a standalone HTML page that combines your diagram with a business narrative. You will start by creating the project folder and building the page skeleton with all the CSS styling it needs.
- Open your terminal. Move to your Desktop by running this command:
cd ~/Desktop- Create the project folder and move into it by running these commands:
mkdir technical-brief
cd technical-brief- Confirm the folder was created by running:
ls- You should see an empty directory (no output from ls yet since the folder is empty).
- Copy your architecture.png file into the technical-brief/ folder. Open Finder (macOS) or File Explorer (Windows), find the architecture.png you exported from diagrams.net (likely in your Downloads folder), and drag it into the technical-brief folder on your Desktop.
- Confirm the file is in place by running:
ls- You should see architecture.png in the output.
Don't see architecture.png?
Check your Downloads folder or wherever your browser saves exported files. The file name must be exactly architecture.png (case-sensitive on some systems).
If you named it something different during export, rename it to architecture.png before moving it into the folder.
Help me find my exported architecture.png file
Now you will create the HTML file with all the CSS styling and the hero section. The hero introduces your system with a title, subtitle, and a link to your live Project 7 demo.
- Open your code editor.
- Create a new file called index.html inside the technical-brief/ folder.
- Paste the following code into index.html to set up the page structure, all CSS styles, and the hero section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Brief - Medspa Lead Capture System</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #ffffff;
color: #1f2937;
line-height: 1.6;
}
.page {
max-width: 900px;
margin: 0 auto;
padding: 60px 40px;
}
.hero {
text-align: center;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid #e5e7eb;
}
.hero h1 {
font-size: 32px;
color: #0f766e;
margin-bottom: 12px;
}
.hero .subtitle {
font-size: 18px;
color: #6b7280;
margin-bottom: 24px;
}
.hero .cta-btn {
display: inline-block;
padding: 12px 28px;
background: #0f766e;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: background 0.2s;
}
.hero .cta-btn:hover {
background: #0d9488;
}
.section {
margin-bottom: 48px;
}
.section h2 {
font-size: 22px;
color: #1f2937;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #0f766e;
display: inline-block;
}
.section p {
font-size: 15px;
color: #4b5563;
margin-bottom: 12px;
}
.architecture-img {
width: 100%;
border-radius: 12px;
border: 1px solid #e5e7eb;
margin: 20px 0;
}
.how-it-works {
display: flex;
flex-direction: column;
gap: 16px;
}
.step-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #f9fafb;
border-radius: 8px;
}
.step-number {
width: 32px;
height: 32px;
background: #0f766e;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.step-content h3 {
font-size: 15px;
color: #1f2937;
margin-bottom: 4px;
}
.step-content p {
font-size: 13px;
color: #6b7280;
margin-bottom: 0;
}
.roi-card {
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
border-radius: 12px;
padding: 32px;
margin: 20px 0;
}
.roi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
}
.roi-item {
text-align: center;
}
.roi-item .value {
font-size: 28px;
font-weight: 700;
color: #0f766e;
}
.roi-item .label {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
}
.tech-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.tech-table th,
.tech-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
font-size: 14px;
}
.tech-table th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
.tech-table td {
color: #4b5563;
}
.demo-script {
background: #f9fafb;
border-radius: 12px;
padding: 32px;
margin: 20px 0;
}
.demo-script h3 {
font-size: 16px;
color: #0f766e;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.demo-script p {
font-size: 14px;
color: #4b5563;
margin-bottom: 12px;
}
.demo-script .timing {
font-size: 12px;
color: #9ca3af;
font-style: italic;
}
.objection {
background: #ffffff;
border-left: 3px solid #0f766e;
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 8px 8px 0;
}
.objection strong {
font-size: 13px;
color: #1f2937;
}
.objection p {
font-size: 13px;
color: #6b7280;
margin-bottom: 0;
}
.footer {
text-align: center;
padding-top: 40px;
border-top: 1px solid #e5e7eb;
color: #9ca3af;
font-size: 13px;
}
</style>
</head>
<body>
<div class="page">
<!-- Hero section - introduces the system and links to the live demo -->
<div class="hero">
<h1>Medspa Lead Capture System</h1>
<p class="subtitle">Automated lead routing and instant team alerts in under 3 seconds</p>
<a href="your-project-7-demo-url-here" class="cta-btn" target="_blank">Live Demo</a>
</div>
</div>
</body>
</html>What does this code do?
This sets up a clean, professional one-page layout. The CSS includes styles for every section you will add in the next substeps (narrative cards, ROI grid, tech table, demo script boxes).
The hero section displays your system's name, a one-line value proposition, and a Live Demo button. Replace your-project-7-demo-url-here with the actual S3 website URL from your Project 7 deployment.
- Replace your-project-7-demo-url-here in the href attribute with your actual Project 7 S3 website URL.
- Save index.html.
- Open index.html in your browser by double-clicking the file in Finder (macOS) or File Explorer (Windows). You should see a centered page with the title "Medspa Lead Capture System", a subtitle, and a teal "Live Demo" button.
Page looks broken or unstyled?
Make sure the entire <style> block was pasted completely. A missing closing brace } will break all styling below that point.
Check that the file is saved with the .html extension. If it was saved as .txt, the browser will not render it as a webpage.
Help me fix my index.html page styling
Add the architecture diagram and narrative sections
The core of a Technical Brief is the business narrative. You need to explain what problem exists, how your system solves it, and prove the value with real numbers. This is where the InsideSales.com/MIT Lead Response Management Study comes in.
What is the Tell-Show-Tell framework?
SE presentations follow a Tell-Show-Tell structure. First you tell the audience what problem exists and why it matters. Then you show the working system. Then you tell them the value again, backed by data. Your Technical Brief builds all three layers into a single page.
- In index.html, find the closing </div> tag for the hero section (the line right after the </a> tag for the Live Demo button).
- Add the following code below the hero's closing </div>, but still inside <div class="page">:
<!-- Architecture diagram -->
<div class="section">
<h2>Architecture</h2>
<img src="architecture.png" alt="System Architecture Diagram" class="architecture-img">
</div>
<!-- Business narrative: problem and solution -->
<div class="section">
<h2>The Problem</h2>
<p>Medspas spend $5,000 to $20,000 per month on digital advertising to generate leads. Yet industry data shows that 40-60% of those leads are lost to slow response times.</p>
<p>The InsideSales.com/MIT Lead Response Management Study (2007) found that responding within 5 minutes makes you 21x more likely to qualify a lead compared to waiting 30 minutes. Most medspas respond in hours, not minutes.</p>
</div>
<div class="section">
<h2>The Solution</h2>
<p>An automated lead capture and routing system that validates incoming leads, stores them for the sales pipeline, syncs to the CRM, and alerts the team via email and SMS. All within 3 seconds of form submission. Zero manual steps. Zero leads lost to response delay.</p>
</div>
<!-- How It Works: one step per pipeline component -->
<div class="section">
<h2>How It Works</h2>
<div class="how-it-works">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<h3>Lead Submits Form</h3>
<p>Client visits the S3-hosted landing page and submits their contact info (name, email, phone, service interest).</p>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
<h3>API Gateway Validates</h3>
<p>Request hits API Gateway with x-api-key authentication. Usage Plan enforces rate limiting and throttling.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
<h3>Lambda Processes</h3>
<p>Lambda function validates the payload, generates a unique lead ID, and triggers three parallel operations.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">4</div>
<div class="step-content">
<h3>DynamoDB Stores</h3>
<p>Lead data is persisted to DynamoDB with timestamp and status for the sales pipeline.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">5</div>
<div class="step-content">
<h3>Webhook Syncs to CRM</h3>
<p>An HTTP POST via urllib.request sends the lead to the CRM system for pipeline tracking.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">6</div>
<div class="step-content">
<h3>SNS Alerts the Team</h3>
<p>SNS publishes a notification triggering instant email and conditional SMS alerts to the sales team.</p>
</div>
</div>
</div>
</div>
<!-- ROI calculation with data-backed metrics -->
<div class="section">
<h2>ROI Analysis</h2>
<div class="roi-card">
<p style="font-size: 15px; color: #374151; margin-bottom: 0;">Based on: InsideSales.com/MIT Lead Response Management Study (Dr. James Oldroyd, 2007)</p>
<div class="roi-grid">
<div class="roi-item">
<div class="value">21x</div>
<div class="label">More likely to qualify (5 min vs 30 min response)</div>
</div>
<div class="roi-item">
<div class="value">$500</div>
<div class="label">Average Botox appointment value</div>
</div>
<div class="roi-item">
<div class="value">$1,000/mo</div>
<div class="label">Revenue from recovering just 2 lost leads</div>
</div>
<div class="roi-item">
<div class="value">$0</div>
<div class="label">System cost (AWS Free Tier) vs $300+/mo alternatives</div>
</div>
</div>
</div>
</div>
<!-- Technology stack breakdown -->
<div class="section">
<h2>Technology Stack</h2>
<table class="tech-table">
<thead>
<tr>
<th>Service</th>
<th>Role</th>
<th>Free Tier</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon S3</td>
<td>Static website hosting (landing page)</td>
<td>5 GB storage, 20K GET requests/mo</td>
</tr>
<tr>
<td>API Gateway</td>
<td>REST API with API key auth + usage plans</td>
<td>1M API calls/mo for 12 months</td>
</tr>
<tr>
<td>AWS Lambda</td>
<td>Serverless compute (lead processing)</td>
<td>1M requests + 400K GB-seconds/mo</td>
</tr>
<tr>
<td>DynamoDB</td>
<td>NoSQL database (lead storage)</td>
<td>25 GB storage, 25 RCU/WCU</td>
</tr>
<tr>
<td>Amazon SNS</td>
<td>Notifications (email + SMS alerts)</td>
<td>1M publishes, 1K emails/mo</td>
</tr>
</tbody>
</table>
</div>What does this code do?
- The Architecture section embeds your diagram PNG so viewers can see the full pipeline at a glance.
- The Problem and Solution sections establish the business pain point and position your system as the fix.
- The How It Works section walks through each pipeline component in plain language. One sentence per service.
- The ROI Analysis section uses the 21x qualification stat from the InsideSales.com/MIT study to calculate revenue impact.
- The Technology Stack table shows each AWS service, its role, and its free tier limit.
- Save index.html and refresh your browser.
- You should see your architecture diagram displayed, followed by The Problem, The Solution, a numbered How It Works list, an ROI card with four metrics (21x, $500, $1,000/mo, $0), and a Technology Stack table.
Architecture image not showing?
The architecture.png file must be in the same folder as index.html. Check that both files are inside technical-brief/ on your Desktop.
Also verify the filename matches exactly. The src="architecture.png" in the HTML is case-sensitive.
Help me debug why my architecture image is not displaying
Add the demo script and objection responses
The final section of your Technical Brief is the demo script. This follows the Tell-Show-Tell structure with timing notes for each phase and prepared responses for common objections interviewers raise.
- In index.html, find the closing </div> tag for the Technology Stack section (right after the </table> tag).
- Add the following code below the Technology Stack section's closing </div>, still inside <div class="page">:
<!-- Demo script with Tell-Show-Tell timing -->
<div class="section">
<h2>Demo Script (10 minutes)</h2>
<div class="demo-script">
<h3>Tell - State the Problem (2 min)</h3>
<p>"Medspas invest $5K-$20K monthly on ads, but their leads sit in inboxes for hours. Research shows responding within 5 minutes makes you 21x more likely to qualify that lead. I built a system that solves this."</p>
<p class="timing">Timing: 2 minutes. Establish the pain, cite the data, set up the demo.</p>
</div>
<div class="demo-script">
<h3>Show - Live Demo (5 min)</h3>
<p>"Let me show you the system running live. I will submit a lead through the form and we will watch the entire pipeline fire in real time."</p>
<p>Walk through: form submission, API response, DynamoDB entry appearing, email notification arriving. Point out each component from the architecture diagram as it activates.</p>
<p class="timing">Timing: 5 minutes. Show each pipeline step. Pause briefly on the speed of delivery.</p>
</div>
<div class="demo-script">
<h3>Tell - Restate Value (3 min)</h3>
<p>"What you just saw was a lead going from form submission to team notification in under 3 seconds. At $500 per appointment and 21x better qualification odds, recovering just 2 leads per month pays for itself. The system runs on AWS free tier, so it costs nothing versus $300+/month for off-the-shelf alternatives."</p>
<p class="timing">Timing: 3 minutes. Connect back to ROI, invite questions.</p>
</div>
<div style="margin-top: 24px;">
<h3 style="font-size: 16px; color: #1f2937; margin-bottom: 12px;">Anticipated Objections</h3>
<div class="objection">
<strong>"What about HIPAA?"</strong>
<p>This architecture supports encryption at rest via DynamoDB and in transit via HTTPS on all endpoints. For full HIPAA compliance, we would add a BAA with AWS, enable VPC endpoints, and implement access logging. The architecture is designed to scale into compliance.</p>
</div>
<div class="objection">
<strong>"What happens if Lambda fails?"</strong>
<p>Lambda has built-in retry logic for async invocations (up to 2 retries). DynamoDB writes are atomic. SNS has delivery retry policies. For additional resilience, we can add a dead-letter queue to capture any failed events.</p>
</div>
<div class="objection">
<strong>"Can this scale?"</strong>
<p>Lambda scales automatically to 1,000 concurrent executions by default. API Gateway handles thousands of requests per second. DynamoDB auto-scales on demand. This handles enterprise-level traffic without architecture changes.</p>
</div>
</div>
</div>
<!-- Page footer -->
<div class="footer">
<p>Built with AWS Serverless Architecture. System runs on free tier.</p>
</div>What does this code do?
- The three demo-script blocks map to Tell (2 min), Show (5 min), and Tell (3 min). Each includes the exact words you would say plus a timing note.
- The three objection cards prepare you for the most common interviewer pushbacks: HIPAA compliance, failure handling, and scalability.
- Having these on the same hosted page means you can pull up your script mid-prep without switching between documents.
- Save index.html and refresh your browser.
- Scroll down past the Technology Stack table. You should see the "Demo Script (10 minutes)" heading, three grey script boxes (Tell, Show, Tell) with timing notes in italic, and three objection cards with a teal left border.
Demo Script section not styled correctly?
Make sure you pasted the code after the Technology Stack section's closing </div> but before the page's closing </div>. If the demo script appears unstyled, it may be outside the <div class="page"> wrapper.
Check for mismatched <div> and </div> tags. Every opening div must have a matching close.
Help me fix the layout of my Demo Script section
✔️ Awesome, I've got everything!
Great. Double check you have saved index.html and that the page renders all sections correctly in your browser.
ⓧ I'd like to double check the full code
Here is the complete index.html file. Compare your code against this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Brief - Medspa Lead Capture System</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #ffffff;
color: #1f2937;
line-height: 1.6;
}
.page {
max-width: 900px;
margin: 0 auto;
padding: 60px 40px;
}
.hero {
text-align: center;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 1px solid #e5e7eb;
}
.hero h1 {
font-size: 32px;
color: #0f766e;
margin-bottom: 12px;
}
.hero .subtitle {
font-size: 18px;
color: #6b7280;
margin-bottom: 24px;
}
.hero .cta-btn {
display: inline-block;
padding: 12px 28px;
background: #0f766e;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: background 0.2s;
}
.hero .cta-btn:hover {
background: #0d9488;
}
.section {
margin-bottom: 48px;
}
.section h2 {
font-size: 22px;
color: #1f2937;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #0f766e;
display: inline-block;
}
.section p {
font-size: 15px;
color: #4b5563;
margin-bottom: 12px;
}
.architecture-img {
width: 100%;
border-radius: 12px;
border: 1px solid #e5e7eb;
margin: 20px 0;
}
.how-it-works {
display: flex;
flex-direction: column;
gap: 16px;
}
.step-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #f9fafb;
border-radius: 8px;
}
.step-number {
width: 32px;
height: 32px;
background: #0f766e;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
flex-shrink: 0;
}
.step-content h3 {
font-size: 15px;
color: #1f2937;
margin-bottom: 4px;
}
.step-content p {
font-size: 13px;
color: #6b7280;
margin-bottom: 0;
}
.roi-card {
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
border-radius: 12px;
padding: 32px;
margin: 20px 0;
}
.roi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
}
.roi-item {
text-align: center;
}
.roi-item .value {
font-size: 28px;
font-weight: 700;
color: #0f766e;
}
.roi-item .label {
font-size: 13px;
color: #6b7280;
margin-top: 4px;
}
.tech-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.tech-table th,
.tech-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
font-size: 14px;
}
.tech-table th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
.tech-table td {
color: #4b5563;
}
.demo-script {
background: #f9fafb;
border-radius: 12px;
padding: 32px;
margin: 20px 0;
}
.demo-script h3 {
font-size: 16px;
color: #0f766e;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.demo-script p {
font-size: 14px;
color: #4b5563;
margin-bottom: 12px;
}
.demo-script .timing {
font-size: 12px;
color: #9ca3af;
font-style: italic;
}
.objection {
background: #ffffff;
border-left: 3px solid #0f766e;
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 8px 8px 0;
}
.objection strong {
font-size: 13px;
color: #1f2937;
}
.objection p {
font-size: 13px;
color: #6b7280;
margin-bottom: 0;
}
.footer {
text-align: center;
padding-top: 40px;
border-top: 1px solid #e5e7eb;
color: #9ca3af;
font-size: 13px;
}
</style>
</head>
<body>
<div class="page">
<div class="hero">
<h1>Medspa Lead Capture System</h1>
<p class="subtitle">Automated lead routing and instant team alerts in under 3 seconds</p>
<a href="your-project-7-demo-url-here" class="cta-btn" target="_blank">Live Demo</a>
</div>
<div class="section">
<h2>Architecture</h2>
<img src="architecture.png" alt="System Architecture Diagram" class="architecture-img">
</div>
<div class="section">
<h2>The Problem</h2>
<p>Medspas spend $5,000 to $20,000 per month on digital advertising to generate leads. Yet industry data shows that 40-60% of those leads are lost to slow response times.</p>
<p>The InsideSales.com/MIT Lead Response Management Study (2007) found that responding within 5 minutes makes you 21x more likely to qualify a lead compared to waiting 30 minutes. Most medspas respond in hours, not minutes.</p>
</div>
<div class="section">
<h2>The Solution</h2>
<p>An automated lead capture and routing system that validates incoming leads, stores them for the sales pipeline, syncs to the CRM, and alerts the team via email and SMS. All within 3 seconds of form submission. Zero manual steps. Zero leads lost to response delay.</p>
</div>
<div class="section">
<h2>How It Works</h2>
<div class="how-it-works">
<div class="step-item">
<div class="step-number">1</div>
<div class="step-content">
<h3>Lead Submits Form</h3>
<p>Client visits the S3-hosted landing page and submits their contact info (name, email, phone, service interest).</p>
</div>
</div>
<div class="step-item">
<div class="step-number">2</div>
<div class="step-content">
<h3>API Gateway Validates</h3>
<p>Request hits API Gateway with x-api-key authentication. Usage Plan enforces rate limiting and throttling.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">3</div>
<div class="step-content">
<h3>Lambda Processes</h3>
<p>Lambda function validates the payload, generates a unique lead ID, and triggers three parallel operations.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">4</div>
<div class="step-content">
<h3>DynamoDB Stores</h3>
<p>Lead data is persisted to DynamoDB with timestamp and status for the sales pipeline.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">5</div>
<div class="step-content">
<h3>Webhook Syncs to CRM</h3>
<p>An HTTP POST via urllib.request sends the lead to the CRM system for pipeline tracking.</p>
</div>
</div>
<div class="step-item">
<div class="step-number">6</div>
<div class="step-content">
<h3>SNS Alerts the Team</h3>
<p>SNS publishes a notification triggering instant email and conditional SMS alerts to the sales team.</p>
</div>
</div>
</div>
</div>
<div class="section">
<h2>ROI Analysis</h2>
<div class="roi-card">
<p style="font-size: 15px; color: #374151; margin-bottom: 0;">Based on: InsideSales.com/MIT Lead Response Management Study (Dr. James Oldroyd, 2007)</p>
<div class="roi-grid">
<div class="roi-item">
<div class="value">21x</div>
<div class="label">More likely to qualify (5 min vs 30 min response)</div>
</div>
<div class="roi-item">
<div class="value">$500</div>
<div class="label">Average Botox appointment value</div>
</div>
<div class="roi-item">
<div class="value">$1,000/mo</div>
<div class="label">Revenue from recovering just 2 lost leads</div>
</div>
<div class="roi-item">
<div class="value">$0</div>
<div class="label">System cost (AWS Free Tier) vs $300+/mo alternatives</div>
</div>
</div>
</div>
</div>
<div class="section">
<h2>Technology Stack</h2>
<table class="tech-table">
<thead>
<tr>
<th>Service</th>
<th>Role</th>
<th>Free Tier</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon S3</td>
<td>Static website hosting (landing page)</td>
<td>5 GB storage, 20K GET requests/mo</td>
</tr>
<tr>
<td>API Gateway</td>
<td>REST API with API key auth + usage plans</td>
<td>1M API calls/mo for 12 months</td>
</tr>
<tr>
<td>AWS Lambda</td>
<td>Serverless compute (lead processing)</td>
<td>1M requests + 400K GB-seconds/mo</td>
</tr>
<tr>
<td>DynamoDB</td>
<td>NoSQL database (lead storage)</td>
<td>25 GB storage, 25 RCU/WCU</td>
</tr>
<tr>
<td>Amazon SNS</td>
<td>Notifications (email + SMS alerts)</td>
<td>1M publishes, 1K emails/mo</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<h2>Demo Script (10 minutes)</h2>
<div class="demo-script">
<h3>Tell - State the Problem (2 min)</h3>
<p>"Medspas invest $5K-$20K monthly on ads, but their leads sit in inboxes for hours. Research shows responding within 5 minutes makes you 21x more likely to qualify that lead. I built a system that solves this."</p>
<p class="timing">Timing: 2 minutes. Establish the pain, cite the data, set up the demo.</p>
</div>
<div class="demo-script">
<h3>Show - Live Demo (5 min)</h3>
<p>"Let me show you the system running live. I will submit a lead through the form and we will watch the entire pipeline fire in real time."</p>
<p>Walk through: form submission, API response, DynamoDB entry appearing, email notification arriving. Point out each component from the architecture diagram as it activates.</p>
<p class="timing">Timing: 5 minutes. Show each pipeline step. Pause briefly on the speed of delivery.</p>
</div>
<div class="demo-script">
<h3>Tell - Restate Value (3 min)</h3>
<p>"What you just saw was a lead going from form submission to team notification in under 3 seconds. At $500 per appointment and 21x better qualification odds, recovering just 2 leads per month pays for itself. The system runs on AWS free tier, so it costs nothing versus $300+/month for off-the-shelf alternatives."</p>
<p class="timing">Timing: 3 minutes. Connect back to ROI, invite questions.</p>
</div>
<div style="margin-top: 24px;">
<h3 style="font-size: 16px; color: #1f2937; margin-bottom: 12px;">Anticipated Objections</h3>
<div class="objection">
<strong>"What about HIPAA?"</strong>
<p>This architecture supports encryption at rest via DynamoDB and in transit via HTTPS on all endpoints. For full HIPAA compliance, we would add a BAA with AWS, enable VPC endpoints, and implement access logging. The architecture is designed to scale into compliance.</p>
</div>
<div class="objection">
<strong>"What happens if Lambda fails?"</strong>
<p>Lambda has built-in retry logic for async invocations (up to 2 retries). DynamoDB writes are atomic. SNS has delivery retry policies. For additional resilience, we can add a dead-letter queue to capture any failed events.</p>
</div>
<div class="objection">
<strong>"Can this scale?"</strong>
<p>Lambda scales automatically to 1,000 concurrent executions by default. API Gateway handles thousands of requests per second. DynamoDB auto-scales on demand. This handles enterprise-level traffic without architecture changes.</p>
</div>
</div>
</div>
<div class="footer">
<p>Built with AWS Serverless Architecture. System runs on free tier.</p>
</div>
</div>
</body>
</html>Your Technical Brief is complete locally. It has the architecture diagram, business narrative, ROI analysis, and a structured demo script. Next, you will deploy it to S3 so it becomes a shareable link you can drop into job applications.
Deploy the Technical Brief to S3
Your Technical Brief is complete with architecture diagram, business narrative, ROI analysis, and demo script all in one page. Now it needs to be accessible from anywhere via a single link.
In this step, you will upload your files to the same S3 bucket you configured in Project 7 and verify the live page works end to end.
In this step, get ready to:
- Upload your Technical Brief files to S3.
- Verify the live deployment renders correctly in your browser.
Upload the Technical Brief files to S3
Your existing S3 bucket from Project 7 already has static website hosting enabled. You will upload your files into a technical-brief/ subfolder so the Technical Brief lives alongside your original demo page.
- Switch back to your terminal.
- Navigate into your local technical-brief folder by running this command:
cd ~/Desktop/technical-brief- Upload index.html to your S3 bucket by running this command:
aws s3 cp index.html s3://[[BUCKET_NAME="your-project-7-bucket-name"]]/technical-brief/index.html --content-type "text/html"- Upload architecture.png to the same subfolder by running this command:
aws s3 cp architecture.png s3://[[BUCKET_NAME="your-project-7-bucket-name"]]/technical-brief/architecture.pngWhy the --content-type flag?
The --content-type "text/html" flag tells S3 to serve index.html as a web page instead of prompting a file download. PNG files are auto-detected correctly, so they do not need this flag.
- Confirm both files uploaded successfully by listing the subfolder:
aws s3 ls s3://[[BUCKET_NAME="your-project-7-bucket-name"]]/technical-brief/You should see both index.html and architecture.png listed with their file sizes and timestamps.
Seeing 'upload failed' or 'access denied'?
Make sure you replaced the bucket name placeholder with your actual Project 7 bucket name. You can find it by running aws s3 ls to list all your buckets.
If you see a permissions error, confirm your AWS CLI is still configured with valid credentials by running aws sts get-caller-identity.
Help me troubleshoot my S3 upload issue
Verify the deployment in your browser
Your Technical Brief is now live on the internet. The S3 website URL follows a predictable pattern based on your bucket name and region.
- Open your browser and navigate to your Technical Brief URL. The format is:
http://[[BUCKET_NAME="your-project-7-bucket-name"]].s3-website-[[AWS_REGION="your-aws-region"]].amazonaws.com/technical-brief/Find your exact URL
If you are unsure of your bucket's website URL, open the Amazon S3 console, click your bucket name, go to the Properties tab, and scroll down to Static website hosting. Your endpoint URL is displayed there. Append /technical-brief/ to that URL.
- Confirm the page loads with proper styling (teal headings, card layouts, clean typography).
- Confirm the architecture diagram displays below the Architecture heading.
- Click the Live Demo button and confirm it opens your working Project 7 demo page in a new tab.
- Scroll through the page and confirm all narrative sections render: The Problem, The Solution, How It Works, ROI Analysis, Technology Stack, and Demo Script.
Page not loading or showing raw HTML?
If you see a 403 Forbidden error, your bucket policy may not allow public reads on the technical-brief/ path. Check that your bucket policy uses /* at the end of the Resource ARN (not just the root path).
If the browser prompts a file download instead of showing the page, re-upload index.html with the --content-type "text/html" flag as shown in the upload step above.
Help me fix my S3 static website hosting
Why host on S3?
Hosting your Technical Brief on S3 gives you a permanent, shareable link you can paste into job applications or send to hiring managers. Unlike a local file, anyone with the URL can view your work without needing access to your machine.
Secret mission
Add Live System Health Metrics
Your Technical Brief tells a great story. But what if it could prove the system is alive, right now, with real data? In this secret mission, you will add a System Health section that fetches live CloudWatch metrics from your AWS account and displays them on the page.
Clean Up Your Resources
Clean Up Your Resources
Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project uses S3 static hosting and optional Lambda/API Gateway resources, all of which stay within the AWS free tier at no ongoing cost.
Resources you used:
- S3 objects (index.html and architecture.png) in your S3 bucket's technical-brief/ folder.
- SystemHealthFunction Lambda (Secret Mission).
- GET /system-health API Gateway endpoint (Secret Mission).
- Local files: medspa-architecture.drawio, architecture.png, architecture.svg, and your technical-brief/ project folder.
Keep everything running
No action needed. Choose this if you want to keep your Technical Brief live as a shareable portfolio link.
- Your S3 static site costs $0 within the free tier (5 GB storage, 20K GET requests/month).
- The Secret Mission Lambda and API Gateway endpoint also cost $0 within free tier limits.
- Your Technical Brief URL stays live and ready to share in job applications.
Pause - I'll come back to this later
S3 static sites have no "running" state to pause. The files simply sit in storage at no cost within free tier.
- There is nothing to shut down or stop for this project.
- If you completed the Secret Mission, the Lambda function and API Gateway endpoint only incur cost when invoked. They are effectively paused by default.
- Your local files (medspa-architecture.drawio, diagram exports) stay on your Desktop for future edits.
Delete - I don't want to use this again
Remove all project resources and start fresh. Follow each section below to fully clean up.
Delete Technical Brief files from S3:
- Delete the Technical Brief files from your S3 bucket by running this command:
aws s3 rm s3://[[BUCKET_NAME="your-bucket-name"]]/technical-brief/ --recursive- You should see output confirming each file was deleted.
Delete the SystemHealthFunction Lambda (Secret Mission only):
- Open the Functions page in the Lambda console.
- Select SystemHealthFunction.
- Choose Actions, then Delete.
- Type confirm in the text input field and choose Delete.
Remove the /system-health API Gateway resource (Secret Mission only):
- Open the API Gateway console and select your REST API.
- Choose Resources in the left navigation pane.
- Select the /system-health resource in the resource tree.
- Choose Actions, then Delete Resource.
- Confirm the deletion when prompted.
- Redeploy the API to your stage so the change takes effect.
Delete local project files:
- Delete your local project folder by running this command:
rm -rf ~/Desktop/technical-brief- Also delete the diagram files if they are stored separately:
rm ~/Desktop/medspa-architecture.drawio ~/Desktop/architecture.png ~/Desktop/architecture.svg- Confirm the files are gone by running:
ls ~/Desktop- You should no longer see technical-brief, medspa-architecture.drawio, architecture.png, or architecture.svg in the output.
Nice Work!
Nice Work!
You just built a professional Technical Brief that proves you can both build and sell a technical solution. This is exactly what SE hiring managers look for: a working system paired with a polished presentation that quantifies its value.
Here's what you learned:
- Created a professional architecture diagram with official AWS icons in diagrams.net, mapping your entire serverless pipeline from client to notifications.
- Built a hosted Technical Brief with a business narrative, ROI analysis backed by the InsideSales.com/MIT Lead Response Management Study, and a complete technology stack breakdown.
- Wrote a structured Tell-Show-Tell demo script with timing notes and objection handling, then deployed the whole thing to S3 as a shareable single-link portfolio piece.
- Secret Mission: Added live system health metrics that fetch real CloudWatch data, proving your system is running in production.
Ready to quiz yourself?