How I Built a Serverless Web App Using AWS in 24 Hours

When faced with a time crunch and the need to quickly develop a scalable web application, AWS provided the perfect solution with its serverless services. Here, I’ll walk you through how I built a fully functional serverless web app in just 24 hours using AWS tools. This blog includes detailed steps, challenges I faced, and how I overcame them. The Concept The goal was to create a simple yet functional task management app. Users should be able to: Sign up and log in securely. Create, view, update, and delete tasks. Access the app from any device, with a responsive design. The Tech Stack: To achieve this, I choose the following AWS tools and technologies: Frontend: ReactJS for a dynamic and responsive UI. Backend: AWS Lambda for serverless compute power. Database: Amazon DynamoDB for a fast and scalable NoSQL database. Hosting: AWS Amplify for seamless hosting and deployment. Authentication: Amazon Cognito for user management and secure authentication. API Gateway: AWS API Gateway to expose Lambda functions as RESTful APIs. Phase 1: Setting Up the Environment AWS Account Preparation: I ensured my AWS account was configured with the necessary IAM permissions for using services like Lambda, DynamoDB, and Amplify. Frontend Initialization: I used create-react-app to scaffold a basic ReactJS project. Installed dependencies such as axios for API calls and aws-amplify for AWS integrations. Amplify Configuration: I set up an AWS Amplify project using the Amplify CLI. Configured the hosting environment and connected it to my GitHub repository for CI/CD. Phase 2: Backend Development API Design: I identified the required API endpoints: POST /tasks for creating tasks. GET /tasks for retrieving tasks. PUT /tasks/{id} for updating tasks. DELETE /tasks/{id} for deleting tasks. Creating Lambda Functions: I developed functions using Node.js and the AWS SDK. Each function performed CRUD operations on the DynamoDB Tasks table. Setting Up DynamoDB: I created a DynamoDB table named Tasks with the following schema: Partition Key: taskId (String). Attributes: taskName, status, and createdAt. Configuring API Gateway: Connected the API Gateway endpoints to the Lambda functions. Enabled CORS to allow the React frontend to communicate with the backend. Phase 3: Authentication Amazon Cognito Setup: I created a user pool for handling sign-up, login, and user management. Enabled multi-factor authentication (MFA) for added security. Frontend Integration: Used the Amplify Auth library to integrate Cognito into the React app. Implemented authentication flows for user sign-up, login, logout, and password reset. Phase 4: Frontend Development UI Design: I created components for authentication (login/signup forms) and task management (task list, task form). Used Material-UI for styling to save time and ensure a professional look. API Integration: Connected React components to API Gateway endpoints using axios. Added error handling for failed API calls and displayed appropriate messages to users. Responsive Design: Used CSS media queries and flexbox to ensure the app looked good on mobile, tablet, and desktop screens. Phase 5: Deployment Hosting with Amplify: I configured AWS Amplify for hosting. Enabled automatic builds and deployments triggered by GitHub commits. Environment Variables: Configured Amplify to securely pass API Gateway URLs and Cognito user pool details as environment variables. Custom Domain: Connected a custom domain to the Amplify-hosted app for a professional appearance. Phase 6: Testing and Optimization Functional Testing: I tested all user flows, including authentication and CRUD operations for tasks. Simulated various scenarios, such as invalid input and network issues, to ensure robustness. Performance Optimization: Enabled caching on API Gateway to reduce latency for frequently accessed data. Monitored API usage and Lambda execution times using AWS CloudWatch. Bug Fixes: Fixed minor issues, such as inconsistent task sorting and UI glitches on smaller screens. The Result By the end of 24 hours, I had a fully functional task management web app that was: Scalable: Automatically adjusts to user demand with serverless architecture. Secure: Provided robust user authentication and data protection. Responsive: Delivered a seamless user experience across all devices. Key Takeaways Leverage Serverless: AWS services like Lambda and DynamoDB remove the overhead of managing servers, enabling faster development. Focus on MVP: Start with the core features and iterate over time. Use Monitoring Tools: AWS CloudWatch and Amplify dashboards are invaluable for tracking performance and troubleshooting issues. Resources : AWS Lambda Documentation Amazon DynamoDB Best Practices AWS Amplify Quickstart Guide Amazon Cognito User Pools AWS API Gateway Developer Guide ReactJS

Jan 21, 2025 - 17:00
 0
How I Built a Serverless Web App Using AWS in 24 Hours

When faced with a time crunch and the need to quickly develop a scalable web application, AWS provided the perfect solution with its serverless services. Here, I’ll walk you through how I built a fully functional serverless web app in just 24 hours using AWS tools. This blog includes detailed steps, challenges I faced, and how I overcame them.

Image description

The Concept

The goal was to create a simple yet functional task management app. Users should be able to:

Sign up and log in securely.

  1. Create, view, update, and delete tasks.

  2. Access the app from any device, with a responsive design.

The Tech Stack:

To achieve this, I choose the following AWS tools and technologies:

  1. Frontend: ReactJS for a dynamic and responsive UI.

  2. Backend: AWS Lambda for serverless compute power.

  3. Database: Amazon DynamoDB for a fast and scalable NoSQL database.

  4. Hosting: AWS Amplify for seamless hosting and deployment.

  5. Authentication: Amazon Cognito for user management and secure authentication.

  6. API Gateway: AWS API Gateway to expose Lambda functions as RESTful APIs.

Phase 1: Setting Up the Environment

AWS Account Preparation: I ensured my AWS account was configured with the necessary IAM permissions for using services like Lambda, DynamoDB, and Amplify.

Frontend Initialization:

I used create-react-app to scaffold a basic ReactJS project.

Installed dependencies such as axios for API calls and aws-amplify for AWS integrations.

Amplify Configuration:

I set up an AWS Amplify project using the Amplify CLI.

Configured the hosting environment and connected it to my GitHub repository for CI/CD.

Phase 2: Backend Development

API Design:

I identified the required API endpoints:

POST /tasks for creating tasks.

GET /tasks for retrieving tasks.

PUT /tasks/{id} for updating tasks.

DELETE /tasks/{id} for deleting tasks.

Creating Lambda Functions:

I developed functions using Node.js and the AWS SDK.

Each function performed CRUD operations on the DynamoDB Tasks table.

Setting Up DynamoDB:

I created a DynamoDB table named Tasks with the following schema:

Partition Key: taskId (String).

Attributes: taskName, status, and createdAt.

Configuring API Gateway:

Connected the API Gateway endpoints to the Lambda functions.

Enabled CORS to allow the React frontend to communicate with the backend.

Phase 3: Authentication

Amazon Cognito Setup:

I created a user pool for handling sign-up, login, and user management.

Enabled multi-factor authentication (MFA) for added security.

Frontend Integration:

Used the Amplify Auth library to integrate Cognito into the React app.

Implemented authentication flows for user sign-up, login, logout, and password reset.

Phase 4: Frontend Development

UI Design:

I created components for authentication (login/signup forms) and task management (task list, task form).

Used Material-UI for styling to save time and ensure a professional look.

API Integration:

Connected React components to API Gateway endpoints using axios.

Added error handling for failed API calls and displayed appropriate messages to users.

Responsive Design:

Used CSS media queries and flexbox to ensure the app looked good on mobile, tablet, and desktop screens.

Phase 5: Deployment

Hosting with Amplify:

I configured AWS Amplify for hosting.

Enabled automatic builds and deployments triggered by GitHub commits.

Environment Variables:

Configured Amplify to securely pass API Gateway URLs and Cognito user pool details as environment variables.

Custom Domain:
Connected a custom domain to the Amplify-hosted app for a professional appearance.

Phase 6: Testing and Optimization

Functional Testing:

I tested all user flows, including authentication and CRUD operations for tasks.

Simulated various scenarios, such as invalid input and network issues, to ensure robustness.

Performance Optimization:

Enabled caching on API Gateway to reduce latency for frequently accessed data.

Monitored API usage and Lambda execution times using AWS CloudWatch.

Bug Fixes:

Fixed minor issues, such as inconsistent task sorting and UI glitches on smaller screens.

The Result

By the end of 24 hours, I had a fully functional task management web app that was:

Scalable: Automatically adjusts to user demand with serverless architecture.

Secure: Provided robust user authentication and data protection.

Responsive: Delivered a seamless user experience across all devices.

Key Takeaways

Leverage Serverless: AWS services like Lambda and DynamoDB remove the overhead of managing servers, enabling faster development.

Focus on MVP: Start with the core features and iterate over time.

Use Monitoring Tools: AWS CloudWatch and Amplify dashboards are invaluable for tracking performance and troubleshooting issues.

Resources :

AWS Lambda Documentation

Amazon DynamoDB Best Practices

AWS Amplify Quickstart Guide

Amazon Cognito User Pools

AWS API Gateway Developer Guide

ReactJS Official Documentation

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow