![](https://private-user-images.githubusercontent.com/63775967/290856676-7ee5a785-4846-4a3b-bef3-234a19b727d6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NTIzODQsIm5iZiI6MTcyMTY1MjA4NCwicGF0aCI6Ii82Mzc3NTk2Ny8yOTA4NTY2NzYtN2VlNWE3ODUtNDg0Ni00YTNiLWJlZjMtMjM0YTE5YjcyN2Q2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDEyNDEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYwOTQ0Y2UyMzI5ZTcwZmE1ZDQ0Y2E3Y2VhMWFiYmFiYzgzMTA3YTJhMmY2NzIxYjZkZGMzMDIwNGExMjhlMjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.R-UA5w6R4SceV71BVo3FHVKAUYJbngIlKXfQtex2up0)
HorsesRides is a web application for requesting rorses rides from Wild Rydes. It showcases serverless AWS technologies, offering user authentication and real-time ride management.
- User Authentication
- Interactive Ride Booking
- Real-time Ride Management
The serverless architecture for this web application is built upon several AWS services:
- AWS Amplify: Serves as the foundation, hosting the static web content. It's the first interaction point for users, delivering HTML, CSS, and JavaScript to their browsers.
- AWS Cognito: The second layer of user interaction, handling authentication. It ensures that users are securely logged in before interacting with backend services.
- AWS API Gateway: Acts as the intermediary for all dynamic API calls over HTTPS from the client, enabling communication between the web browser and AWS Lambda.
- AWS Lambda: The compute layer, it processes the application logic in response to API calls and interacts with the database.
- AWS DynamoDB: Maintains a robust NoSQL database for storing ride data, interacted with by Lambda functions.
Part 1: Host a Static Website
AWS Services:
- AWS CodeCommit for code storage.
- AWS IAM for permission handling.
- AWS Amplify for web hosting.
1. Create a Git Repository:
- Start by creating a repository named “wildrydes-site” in AWS CodeCommit.
- In AWS IAM, create a new user, e.g., TTTAdmin, and attach the
AWSCodeCommitPowerUser
policy for CodeCommit access. - Generate Git credentials for HTTPS connections to CodeCommit.
2. Configure the Git Repository:
- Clone your new repository using AWS CloudShell.
- Use Git commands to copy static files from S3, then add, commit, and push these files.
3. Enable Web Hosting with AWS Amplify:
- Set up a new web app in AWS Amplify linked to your CodeCommit repository.
- Follow the prompts to deploy your website.
Part 2: Create User Pool in Cognito
AWS Service: AWS Cognito for user management.
1. Create an AWS Cognito User Pool:
- Create a user pool named “WildRydes” with default settings.
- Save the User Pool ID and Client ID.
2. Update the Website Config File:
- Adjust
js/config.js
with theuserPoolId
anduserPoolClientId
from Cognito.
Part 3: Build a Serverless Backend
AWS Services:
- AWS DynamoDB for data storage.
- AWS Lambda for backend processing.
1. Create an Amazon DynamoDB Table:
- Create a table named “Rides” with “RideId” as the partition key.
2. Create an IAM Role for Lambda:
- Set up a role in IAM for Lambda, granting necessary permissions for DynamoDB access.
3. Create a Lambda Function:
- In AWS Lambda, establish a function named “RequestUnicorn.”
- Assign the IAM role and deploy the function with
requestUnicorn.js
code.
Part 4: Deploy a RESTful API
AWS Service: AWS API Gateway.
1. Create a REST API:
- In API Gateway, establish a new API named “WildRydes.”
2. Create an Authorizer:
- Set up a Cognito authorizer and test it with an Authorization Token.
3. Create a New Resource and Method:
- Add a 'ride' resource with a POST method, integrated with the Lambda function.
- Set the Cognito authorizer for the method.
4. Deploy Your API:
- Deploy the API by creating a stage named 'dev'.
- Note the Invoke URL for future use.
5. Update the Website Config:
- In
js/config.js
, update theinvokeUrl
with the URL from the API Gateway.
![](https://private-user-images.githubusercontent.com/63775967/290527745-9bf42832-ce28-419f-962d-ee6466cfc9ce.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NTIzODQsIm5iZiI6MTcyMTY1MjA4NCwicGF0aCI6Ii82Mzc3NTk2Ny8yOTA1Mjc3NDUtOWJmNDI4MzItY2UyOC00MTlmLTk2MmQtZWU2NDY2Y2ZjOWNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDEyNDEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBlYmE4YzVhMTBhNGM3NzhiZWQ3M2VjZTE2ZGY5ZTZkOGMwYjM5N2EzOGM1MzhkNjkzNjZjMzFmYjBiOTg3YmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.IwxR37nQUn4jI12VMBRnzW7eSMUqsAuLhXlveDPlj2E)
![](https://private-user-images.githubusercontent.com/63775967/290528155-280b182f-d63a-448c-a355-7a138567b5b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NTIzODQsIm5iZiI6MTcyMTY1MjA4NCwicGF0aCI6Ii82Mzc3NTk2Ny8yOTA1MjgxNTUtMjgwYjE4MmYtZDYzYS00NDhjLWEzNTUtN2ExMzg1NjdiNWIxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDEyNDEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk2YzEzNmI4MDc0Mjg3NzM5MmVlOWQ2NTlkNDI4OTI5NGZhYjEzYThlYzhlNzJiYzdlMzI5MjQ1OTc1ZDdkMDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.isXw2IeGUmMMPtUfNuo9RiDeSFm-xa0PgFa3WlsghCA)
![](https://private-user-images.githubusercontent.com/63775967/290542003-0391b1d7-64fb-4f61-9ac9-3595f1258236.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NTIzODQsIm5iZiI6MTcyMTY1MjA4NCwicGF0aCI6Ii82Mzc3NTk2Ny8yOTA1NDIwMDMtMDM5MWIxZDctNjRmYi00ZjYxLTlhYzktMzU5NWYxMjU4MjM2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDEyNDEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk3OTUzNjI1OTE1MDc2MDg4NzgyMmNlZTA3NWVjZjU2ZWZkNjFkNWRkOWE3MmNhZDVjMDM5NjViMWZiOGQyMjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1euC7sefEK7Baybaqhn1oaTB4h_Vs59XEApishD3jFM)
![](https://private-user-images.githubusercontent.com/63775967/290542272-64dc087c-40d5-4e75-a357-74fe9d9fa6fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE2NTIzODQsIm5iZiI6MTcyMTY1MjA4NCwicGF0aCI6Ii82Mzc3NTk2Ny8yOTA1NDIyNzItNjRkYzA4N2MtNDBkNS00ZTc1LWEzNTctNzRmZTlkOWZhNmZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIyVDEyNDEyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA0ZjVjMzYxNjQ2YzZjZWEyZDRhYTc1Y2VjZTE4ZWY1NDYwMTFmMWI2OGQxMWJjODUyNjE3NDY3NWRkOWNkNTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ScgEw5qFoIF4A-F1u3STp6amcnZf4TiRfbdxsxmFGXI)
For a more detailed tutorial, I have created this guide in a Notion page: Link
This project was inspired by the AWS tutorial on building a serverless web application: Build a Serverless Web Application.