I wanted something better.

So I built a serverless contact form API that not only sends the submitted form data to my email using AWS services but also replies to the user with a unique, AI-generated inspirational quote. Instead of a bland confirmation, users receive something that leaves a positive impression.

What This Project Does

• Accepts contact form submissions via a REST API

• Sends the form details to my email using Amazon SES

• Uses Amazon Bedrock to generate an inspirational quote

• Sends the user a confirmation email that includes the quote

• The website owner also gets an email with the message attached

• All deployed and managed through Terraform

Technologies Used

• AWS Lambda – Runs a Python script that processes form submissions.

• API Gateway – Exposes a RESTful endpoint for the frontend form.

• Amazon SES – Sends two emails: one to me and one to the user.

• Amazon Bedrock – Generates a unique inspirational quote with every submission.

• Terraform – Manages infrastructure as code.

Try It Yourself

Want to see it in action?
Head over to the contact page on my website and send me a message. You’ll receive an inspirational quote generated by Amazon Bedrock straight in your inbox!

Curious about how it's built?
👉 Check out the Terraform code on GitHub

In this project, I built and deployed a React website hosted on AWS S3, with Amazon CloudFront as a content delivery network (CDN) to improve performance and ensure global availability. Terraform was used for infrastructure as code, and GitHub Actions handled the automation of the deployment process. This documentation walks you through the setup, the structure of the project, and how the various components work together to achieve a seamless deployment pipeline. The source code is available on github. The project structure includes three primary folders: terraform for infrastructure, website for the React application, and .github for the deployment workflow.

Click here for Github Code
Click here to view live website

React Website

The React website is a simple application created using Vite, a modern build tool that has gained popularity for its fast build speeds and developer-friendly features. Unlike Create React App (CRA), which has been the go-to option for React applications, Vite is actively maintained and offers better performance. As CRA is no longer maintained as of a certain date, I chose Vite to future-proof the application.

The website folder contains the React application code, which was generated using the vite command below

npm create vite@latest website -- --template react

After generating the react code, Terraform is used to develop the AWS infrastructure to host the website. AWS S3 was used as the primary storage and hosting solution for the static files of the React application. Additionally, Amazon CloudFront was configured as a content delivery network (CDN) to enhance performance by caching these assets at edge locations globally, reducing latency for end users.

Terraform Code

The infrastructure for this project is managed entirely using Terraform. The terraform folder is organized into modular components, with each module serving a specific purpose. These modules are housed in the modules folder, and the main Terraform configuration files in the root folder bring everything together. Here’s an explanation of each module and its role:

Remote Backend: The remote_backend module sets up the infrastructure needed to store and manage the Terraform state. This includes creating an S3 bucket for storing the state file and a DynamoDB table for state locking. Additionally, the module creates an IAM user with the AdministratorAccess policy attached to ensure Terraform has the necessary permissions to deploy resources. While attaching AdministratorAccess simplifies permissions management during development, it is not recommended for production-scale applications due to the potential security risks.

S3 Website: The s3_website module provisions an S3 bucket configured for static website hosting. It enables versioning on the bucket, sets up website-specific configurations (such as specifying index.html as the entry point), and allows public access through a bucket policy.

S3 + CloudFront: The s3_cloudfront module sets up a CloudFront distribution to serve the website by caching the website’s files at edge locations worldwide, reducing latency for users. It also configures an Origin Access Control (OAC) to allow CloudFront to securely access the S3 bucket.

GitHub Actions Workflow

The deployment process is automated using GitHub Actions, with the workflow defined in .github/workflows/deploy.yaml. This workflow is triggered whenever changes are pushed to the main branch and consists of three jobs.

The first job, "Terraform," handles the deployment of the AWS infrastructure. The second job, "Sync_S3," builds the React application and uploads the production files to the S3 bucket. The final job, "Invalidate_CloudFront," invalidates the CloudFront cache to ensure that users see the latest version of the website.

Conclusion

This project demonstrates how to build and deploy a React website using AWS S3, CloudFront, Terraform, and GitHub Actions. The setup ensures scalability, global performance, and automation, with S3 hosting the app, CloudFront improving delivery speed, and Terraform simplifying infrastructure management. While the workflow securely uses GitHub Secrets for sensitive credentials, configurations like AdministratorAccess should be refined for production environments.