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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay