Serverless Blog Application

A production-ready, full-stack serverless blog application demonstrating modern cloud architecture with React frontend, AWS serverless backend, and Infrastructure as Code. Features complete portability, multi-environment support, and cost-optimized deployment.

🎯 Project Status: Production-ready with successful deployment verification, complete portability across AWS accounts, and comprehensive documentation for immediate use.

🏗️ Architecture Overview

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React App     │    │   API Gateway   │    │   Lambda Func   │
│  (TypeScript)   │◄──►│   (REST API)    │◄──►│   (Node.js)     │
│   + Tailwind    │    │   + CORS        │    │   + DynamoDB    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                        │
         ▼                       ▼                        ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   CloudFront    │    │   Route 53      │    │   DynamoDB      │
│   + S3 Static   │    │  (Optional)     │    │  Pay-per-req    │
│   + CDN         │    │   Custom DNS    │    │   + Auto-scale  │
└─────────────────┘    └─────────────────┘    └─────────────────┘

✨ Key Features

🚀 Complete Application

Full CRUD Operations - Create, read, update, delete blog posts
Professional UI - Modern React interface with Tailwind CSS
Responsive Design - Mobile-first, accessible interface
Real-time Updates - Dynamic post creation and listing
Error Handling - Comprehensive error states and user feedback

🌐 Serverless Architecture

Auto-scaling - Handles traffic spikes automatically
Pay-per-use - No idle server costs
Global CDN - CloudFront distribution for fast loading
High Availability - Multi-AZ deployment with AWS managed services

🔧 Developer Experience

Infrastructure as Code - Complete AWS CDK implementation
Multi-Environment - Deploy dev/staging/prod independently
Zero Configuration - Dynamic API discovery, no hardcoded URLs
One-Click Deployment - Automated deployment scripts
Complete Portability - Works in any AWS account without modification

💰 Cost Optimized

Serverless Functions - Lambda pay-per-invocation
DynamoDB On-Demand - Pay-per-request database
S3 + CloudFront - Efficient static asset delivery
No Fixed Costs - Scale to zero when unused

🎯 Deployment Verification

This project has been successfully deployed and tested with the following verified functionality:

# Successful API Testing Results
✅ GET  /blog - Successfully retrieves all blog posts
✅ POST /blog - Successfully creates new blog posts  
✅ Frontend - Professional UI with Tailwind CSS styling
✅ CORS - Proper cross-origin request handling
✅ Multi-Environment - Tested dev environment deployment
✅ Cost Management - Successful resource cleanup verification

Live Demo Results: Application successfully deployed to AWS with functional CRUD operations, professional UI, and proper error handling.

🛠️ Tech Stack

Frontend

React 18 with TypeScript and modern hooks
Tailwind CSS 3 for utility-first styling
Axios for HTTP client with dynamic configuration
Responsive Design with mobile-first approach

Backend & Infrastructure

AWS CDK - Infrastructure as Code framework (TypeScript)
AWS Lambda - Serverless API functions (Node.js 18.x)
API Gateway - REST API with CORS support
DynamoDB - NoSQL database with pay-per-request billing
S3 - Static website hosting with CloudFront integration
CloudFront - Global CDN for fast content delivery

DevOps & Deployment

Environment-specific deployments (dev, staging, prod)
Automated resource cleanup to prevent unexpected costs
Portable deployment scripts for any AWS account
Dynamic configuration injection during deployment

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
AWS CLI configured with appropriate permissions
AWS CDK CLI: npm install -g aws-cdk

1. Clone and Setup

git clone <repository-url>
cd blog-app-with-cicd

# Install all dependencies
npm install
cd frontend && npm install && cd ..
cd infrastructure && npm install && cd ..

2. Deploy to AWS

# Make deployment script executable
chmod +x scripts/deploy.sh

# Deploy to development environment
./scripts/deploy.sh --environment dev

3. Access Your Application

After deployment, check the CDK outputs for your URLs:

Frontend: https://your-cloudfront-domain.cloudfront.net
API: https://your-api-gateway.execute-api.region.amazonaws.com/prod/blog

📁 Project Structure

blog-app-with-cicd/
├── frontend/                 # React application
│   ├── src/
│   │   ├── api.ts           # Dynamic API client
│   │   ├── App.tsx          # Main app component
│   │   └── index.css        # Tailwind CSS imports
│   ├── build/               # Built assets (created on build)
│   ├── tailwind.config.js   # Tailwind configuration
│   └── package.json         # Frontend dependencies
├── infrastructure/          # AWS CDK infrastructure
│   ├── bin/
│   │   └── blog-app.ts     # CDK app entry point
│   ├── lib/
│   │   └── blog-app-stack.ts # Main stack definition
│   ├── lambda/
│   │   └── index.js        # Lambda function code
│   └── package.json        # Infrastructure dependencies
├── scripts/
│   └── deploy.sh           # Deployment automation script
├── cdk.json                # CDK configuration
├── .gitignore             # Comprehensive ignore file
└── README.md              # This documentation

🌍 Deployment Options

Environment-Specific Deployments

# Deploy to development (default)
./scripts/deploy.sh

# Deploy to staging
./scripts/deploy.sh --environment staging

# Deploy to production
./scripts/deploy.sh --environment prod

# Skip frontend rebuild (if already built)
./scripts/deploy.sh --environment prod --skip-build

Manual Deployment Steps

# 1. Build frontend
cd frontend && NODE_OPTIONS="--max-old-space-size=4096" npm run build && cd ..

# 2. Deploy infrastructure
cdk deploy --context environment=dev

# 3. Get outputs
cdk output --context environment=dev

Custom Domain Deployment

# Deploy with custom domain (requires ACM certificate)
cdk deploy --context environment=prod \
           --context domainName=yourblog.com \
           --context certificateArn=arn:aws:acm:region:account:certificate/cert-id

🏷️ Resource Naming Convention

All AWS resources are automatically named with environment-specific prefixes to prevent conflicts:

Stack Name: BlogAppStack-{environment}
DynamoDB Table: {stackname}-posts-{environment}
S3 Bucket: {stackname}-website-{account-id}
API Gateway: {stackname}-api-{environment}
Lambda Function: BlogLambda (with environment variables)

This ensures you can deploy multiple environments in the same AWS account without conflicts.

🔌 API Endpoints

Once deployed, your API provides these endpoints:

Method	Endpoint	Description	Request Body
GET	`/blog`	List all blog posts	-
POST	`/blog`	Create new blog post	`{title, content, author?}`
GET	`/blog/{id}`	Get specific blog post	-
PUT	`/blog/{id}`	Update blog post	`{title, content, author?}`
DELETE	`/blog/{id}`	Delete blog post	-

Example API Usage

# List all posts
curl https://your-api.execute-api.region.amazonaws.com/prod/blog

# Create a new post
curl -X POST https://your-api.execute-api.region.amazonaws.com/prod/blog \
  -H "Content-Type: application/json" \
  -d '{"title": "Hello World", "content": "My first blog post!", "author": "John Doe"}'

# Get specific post
curl https://your-api.execute-api.region.amazonaws.com/prod/blog/{post-id}

⚙️ Configuration Management

The application uses a sophisticated configuration system that eliminates hardcoded values:

Dynamic Configuration Loading

CDK generates config.json during deployment with actual API URLs
Frontend loads configuration dynamically from /config.json
Fallback to environment variables if config.json unavailable
Cached configuration for performance

Configuration Structure

{
  "apiUrl": "https://actual-api-gateway-url.execute-api.region.amazonaws.com/prod",
  "region": "us-east-1",
  "environment": "dev"
}

This ensures the application works in any AWS account without modifications.

💰 Cost Management

Pay-Per-Use Architecture

DynamoDB: Pay-per-request billing (no fixed costs)
Lambda: Pay per invocation and execution time
API Gateway: Pay per API call
S3: Pay for storage and requests
CloudFront: Pay for data transfer

Cost Optimization Features

Serverless architecture - No idle server costs
DynamoDB on-demand - Automatic scaling without provisioning
Lambda timeout controls - Prevent runaway costs
Automated cleanup scripts - Easy environment destruction

Resource Cleanup

# Clean up specific environment
cdk destroy --context environment=dev

# Clean up all environments
cdk destroy --context environment=staging
cdk destroy --context environment=prod

🔧 Development Workflow

Local Development

# Start frontend development server (requires deployed backend)
cd frontend && npm start

# The frontend will automatically use the deployed API endpoints

Testing the Application

# Build frontend
cd frontend && npm run build

# Test API endpoints directly
curl https://your-api-endpoint/blog

# Deploy and test
./scripts/deploy.sh --environment dev

Environment Variables

You can override default behavior with environment variables:

# Set custom API URL for frontend
export REACT_APP_API_URL=https://custom-api-url.com

# Set AWS region
export AWS_DEFAULT_REGION=eu-west-1

# Build with custom settings
cd frontend && npm run build

🛠️ Troubleshooting

Common Issues

Memory Issues During Build

# Solution: Increase Node.js memory
export NODE_OPTIONS="--max-old-space-size=4096"
cd frontend && npm run build

Permission Errors

Ensure your AWS credentials have these permissions:

CloudFormation (full access)
S3 (full access)
Lambda (full access)
API Gateway (full access)
DynamoDB (full access)
IAM (role creation)
CloudFront (distribution management)

CORS Errors

Verify API Gateway CORS configuration
Check that OPTIONS method is properly configured
Ensure Lambda returns appropriate CORS headers

Deployment Conflicts

# If resources already exist, use different environment
./scripts/deploy.sh --environment dev2

# Or clean up existing resources first
cdk destroy BlogAppStack  # Old stack
./scripts/deploy.sh --environment dev  # New stack

Debug Commands

# List all CDK stacks
cdk list

# View stack outputs
cdk output

# View CloudFormation template
cdk synth

# Check stack differences
cdk diff --context environment=dev

🔒 Security Best Practices

Implemented Security Features

IAM Roles with least privilege access
CORS Configuration to prevent unauthorized access
S3 Bucket Policies restricting public access
API Gateway Throttling to prevent abuse
Environment Isolation through separate stacks

Production Considerations

Replace CORS * with specific domain names
Implement API authentication (AWS Cognito)
Add input validation and sanitization
Enable AWS CloudTrail for audit logging
Set up monitoring with CloudWatch alarms

🚀 Extending the Application

Potential Enhancements

User Authentication - AWS Cognito integration
Rich Text Editor - WYSIWYG post editing
Image Upload - S3 integration for media
Search Functionality - ElasticSearch integration
Comments System - Additional DynamoDB tables
Email Notifications - SES integration
Analytics - CloudWatch custom metrics

Adding New Environments

# Deploy to new environment
./scripts/deploy.sh --environment test

# Deploy to production with custom domain
cdk deploy --context environment=prod \
           --context domainName=myblog.com \
           --context certificateArn=your-cert-arn

🤝 Contributing

This project demonstrates modern development practices. To contribute:

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

Development Guidelines

Follow TypeScript best practices
Maintain infrastructure as code principles
Test all changes in development environment first
Document any new configuration options
Ensure portability across AWS accounts

📄 License

MIT License - see LICENSE file for details.

🙋‍♂️ Support

Issues: Create GitHub issues for bugs or feature requests
Documentation: This README covers all deployment scenarios
AWS Costs: Remember to destroy resources after testing

This project demonstrates production-ready serverless architecture with modern DevOps practices, complete portability, and cost-effective resource management.# Test commit for GitHub Actions

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
frontend		frontend
infrastructure		infrastructure
scripts		scripts
.gitignore		.gitignore
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
README.md		README.md
cdk.json		cdk.json
debug_script.sh		debug_script.sh
dynamodb-policy.json		dynamodb-policy.json
package-lock.json		package-lock.json
package.json		package.json
response.json		response.json
test-api-gateway.json		test-api-gateway.json

Latest commit

History

Folders and files

Repository files navigation