Skip to content

HTML/CSS/JS website for a fictitious automotive detailing business deployed on AWS

Notifications You must be signed in to change notification settings

jknight4/car-wash-htmlcss-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

Static web site deployed to AWS

HTML/CSS/JS website for a fictitious automotive detailing business, deployed on AWS
(S3, CloudFront, Route53, Lambdas, DynamoDB, API Gateway, SSM Parameter Store, CodePipelines)

Link to website

https://primetimeauto.knightj.xyz

Technologies

HTML, CSS, JavaScript, Google reCaptcha API, AWS
(S3, CloudFront, Route53, Lambdas, DynamoDB, API Gateway, SSM Parameter Store, CodePipelines)

Status

Project is completed (February 2022 - February 2025)

Why

    After completing a Udemy course on HTML and CSS by Jonas Schmedtmann,
I wanted to test out my HTML, CSS, and JavaScript skills.

I decided to develop a website for a fictitious business.
The fictitious business is called Primtetime Automotive Detailing LLC.

I came up with the idea, because I thought that a car detailing business would need various features
such as a Gallery, Pricing plans, FAQs, a Contact form, and more.

2 years later, after gaining more experience with JavaScript through online resources such as Frontend Masters
and Youtube, I decided to implement more features on this project.

I revamped the form section and improved the sticky navigation bar.

The form is multi step and has a progress bar on top.

I also added validations for the appointment date with the earliest date being the current date and the latest being 2 months in advance.

At the end of 2024, I wanted to gain more experience with AWS, so I decided to migrate from Netlify to AWS

Infrastructure

I used AWS CDK to provision various resources
(S3 Bucket, CloudFront Distribution, CodePipelines, Inserting a DNS record, Lambdas, DynamoDB, API Gateway).

Setup automated CI/CD pipeline with CodePipelines that is triggered by GitHub Commits to the main branch.

Integrated infrastucture tests within the pipeline.

Created two AWS Lambda functions for server-side validation and securing database calls, exposing them
through API Gateway to enable the Contact Us form to submit data to DynamoDB.

Implemented Google reCaptcha to protect the contact us form from spam and bots.

Wireframes

IMG_6077

IMG_6078

IMG_6079

IMG_6080

Updates (2024)

Form before:

image

Form after:

image image