Rahulpatel

Posted on Jan 21

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

#acdahmblogathon #aws #awscommunity #serverless

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.

The Concept

The goal was to create a simple and 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 this codes to scaffold a basic ReactJS project.

npx create-react-app task-manager-app
cd task-manager-app

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

npx create-react-app task-manager-app
cd task-manager-app

Amplify Configuration:

👉 I set up an AWS Amplify project using the Amplify CLI.
npm install -g @aws-amplify/cli

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

amplify configure
amplify init
amplify add hosting

Phase 2: Backend Development

API Design:

POST /tasks: For creating new tasks in the database.
GET /tasks: For retrieving a list of all tasks.
PUT /tasks/{id}: For updating an existing task by its ID.
DELETE /tasks/{id}: For deleting a specific task by its ID

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

API Integration:

👉 Connected React components to API Gateway endpoints using axios.
react-router-dom

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

👉 Css was used for responsive web-app.

Phase 5: Deployment

Hosting with Amplify:

👉 I configured AWS Amplify for hosting.
amplify publish

👉 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 Final Result:

This is the beauty of AWS. It becomes easy to deploy my web-app. Now I can focus on code more than deployment. 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.