DEV Community

Cover image for How I Built a Serverless Web App Using AWS in 24 Hours
Rahulpatel
Rahulpatel

Posted on

5

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.

Image description

The Concept

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

  1. Sign up and log in securely.

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

  3. 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 this codes to scaffold a basic ReactJS project.

npx create-react-app task-manager-app
cd task-manager-app
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ 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
Enter fullscreen mode Exit fullscreen mode

Amplify Configuration:

Image description

πŸ‘‰ 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
Enter fullscreen mode Exit fullscreen mode

Phase 2: Backend Development

API Design:

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

Creating Lambda Functions:

Image description

πŸ‘‰ I developed functions using Node.js and the AWS SDK.

πŸ‘‰ Each function performed CRUD operations on the DynamoDB Tasks table.

Setting Up DynamoDB:

Image description

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

  2. Partition Key: taskId (String).

  3. Attributes: taskName, status, and createdAt.

Configuring API Gateway:

Image description

πŸ‘‰ 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:

Image description

πŸ‘‰ 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.

Resources I used were :

AWS Lambda Documentation

Amazon DynamoDB Best Practices

AWS Amplify Quickstart Guide

Amazon Cognito User Pools

AWS API Gateway Developer Guide

ReactJS Official Documentation

Thank you for Reading my blogs. Have a nice day. Stay udated.
I Hope this was helpfull.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up