{"id":25317477,"url":"https://github.com/devhabeeblateef/serverless-react-app-with-aws","last_synced_at":"2025-07-06T16:05:11.640Z","repository":{"id":264253556,"uuid":"892836950","full_name":"devhabeeblateef/serverless-react-app-with-aws","owner":"devhabeeblateef","description":"A simple serverless application that allows users to add items to a list using AWS services. The app uses S3, API Gateway, Lambda, and DynamoDB to provide seamless scalability and functionality.","archived":false,"fork":false,"pushed_at":"2024-11-22T22:25:27.000Z","size":39648,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T17:43:48.212Z","etag":null,"topics":["aws","aws-lambda","react","serverless"],"latest_commit_sha":null,"homepage":"https://item-frontend-static-hosting-73762.s3.us-east-1.amazonaws.com/index.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devhabeeblateef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-22T21:53:38.000Z","updated_at":"2024-11-23T02:08:50.000Z","dependencies_parsed_at":"2024-11-22T23:32:27.662Z","dependency_job_id":null,"html_url":"https://github.com/devhabeeblateef/serverless-react-app-with-aws","commit_stats":null,"previous_names":["devhabeeblateef/serverless-react-app-with-aws"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devhabeeblateef/serverless-react-app-with-aws","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devhabeeblateef%2Fserverless-react-app-with-aws","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devhabeeblateef%2Fserverless-react-app-with-aws/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devhabeeblateef%2Fserverless-react-app-with-aws/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devhabeeblateef%2Fserverless-react-app-with-aws/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devhabeeblateef","download_url":"https://codeload.github.com/devhabeeblateef/serverless-react-app-with-aws/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devhabeeblateef%2Fserverless-react-app-with-aws/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260953823,"owners_count":23088111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","aws-lambda","react","serverless"],"created_at":"2025-02-13T19:38:27.213Z","updated_at":"2025-06-20T13:36:04.285Z","avatar_url":"https://github.com/devhabeeblateef.png","language":"TypeScript","readme":"```markdown\nServerless Item Add Application\n\nThis is a serverless application that allows users to manage a list of items, including adding, retrieving, updating, and deleting items. The architecture leverages AWS services such as DynamoDB, API Gateway, Lambda, and CloudFormation to provide a scalable and cost-efficient solution.\n\nArchitecture Overview\n\nThe application follows a serverless design, with the following components:\n\nDynamoDB: Acts as the database to store item details.\nLambda Function: Handles business logic and integrates with DynamoDB.\nAPI Gateway: Provides a RESTful API interface for the frontend to interact with the backend.\nCloudFormation: Automates the deployment of infrastructure resources.\n\nSetup and Deployment\n\nI used the AWS Management Console to create and deploy the following resources:\n\n1. DynamoDB Table\n Created a table named `all-items` with the following attributes:\n  Primary Key: `itemId` (String).\n  Provisioned throughput set to 1 read/write unit (for demonstration purposes).\n\n 2. Lambda Function\n A Node.js function was created to process API requests.\n The function supports the following operations:\n   GET: Retrieve items or a single item by ID.\n   PUT: Add or update items in the database.\n   DELETE: Remove an item from the database.\n- The Lambda function was given permissions to access DynamoDB and log to CloudWatch.\n\n 3. API Gateway\nConfigured an HTTP API to expose endpoints for interacting with the Lambda function.\n API Methods:\n   GET /items: Retrieve all items.\n   GET /items/{id}: Retrieve a specific item by ID.\n   PUT /items: Add or update an item.\n   DELETE /items/{id}: Delete an item by ID.\nEnabled CORS for cross-origin requests.\n\n 4. CloudFormation Template\n\nTo streamline and automate resource creation, I created the following CloudFormation template:\n\n```yaml\nAWSTemplateFormatVersion: '2010-09-09'\nDescription: Serverless Item Add Application\n\nResources:\n  # DynamoDB Table\n  ItemDynamoDBTable:\n    Type: AWS::DynamoDB::Table\n    Properties:\n      AttributeDefinitions:\n        - AttributeName: 'itemId'\n          AttributeType: 'S'\n      KeySchema:\n        - AttributeName: 'itemId'\n          KeyType: 'HASH'\n      ProvisionedThroughput:\n        ReadCapacityUnits: 1\n        WriteCapacityUnits: 1\n      TableName: all-items\n\n  # Lambda Function\n  ItemLambdaFunction:\n    Type: AWS::Lambda::Function\n    Properties:\n      Runtime: nodejs18.x\n      Role: !GetAtt ItemFunctionExecutionRole.Arn\n      Handler: index.handler\n      Code:\n        ZipFile: |\n          const AWS = require(\"aws-sdk\");\n          const dynamo = new AWS.DynamoDB.DocumentClient();\n\n          exports.handler = async (event) =\u003e {\n            let body, statusCode = 200;\n            try {\n              switch (event.routeKey) {\n                case \"GET /items\":\n                  body = await dynamo.scan({ TableName: \"all-items\" }).promise();\n                  break;\n                case \"GET /items/{id}\":\n                  body = await dynamo.get({\n                    TableName: \"all-items\",\n                    Key: { itemId: event.pathParameters.id }\n                  }).promise();\n                  break;\n                case \"PUT /items\":\n                  let requestJSON = JSON.parse(event.body);\n                  await dynamo.put({\n                    TableName: \"all-items\",\n                    Item: requestJSON\n                  }).promise();\n                  body = `Added item ${requestJSON.itemId}`;\n                  break;\n                case \"DELETE /items/{id}\":\n                  await dynamo.delete({\n                    TableName: \"all-items\",\n                    Key: { itemId: event.pathParameters.id }\n                  }).promise();\n                  body = `Deleted item ${event.pathParameters.id}`;\n                  break;\n                default:\n                  throw new Error(`Unsupported route: \"${event.routeKey}\"`);\n              }\n            } catch (err) {\n              statusCode = 400;\n              body = err.message;\n            }\n            return { statusCode, body: JSON.stringify(body) };\n          };\n\n  # API Gateway\n  ItemAPI:\n    Type: AWS::ApiGatewayV2::Api\n    Properties:\n      Name: items-api\n      ProtocolType: HTTP\n      Target: !GetAtt ItemLambdaFunction.Arn\n\n  # Lambda Permissions for API Gateway\n  APIInvokeLambdaPermission:\n    Type: AWS::Lambda::Permission\n    Properties:\n      FunctionName: !Ref ItemLambdaFunction\n      Action: lambda:InvokeFunction\n      Principal: apigateway.amazonaws.com\n      SourceArn: !Sub arn:aws:execute-api:${AWS::Region}:${AWS::AccountId}:${ItemAPI}/$default\n\n  # Lambda Execution Role\n  ItemFunctionExecutionRole:\n    Type: AWS::IAM::Role\n    Properties:\n      AssumeRolePolicyDocument:\n        Version: '2012-10-17'\n        Statement:\n          - Effect: Allow\n            Principal:\n              Service:\n                - lambda.amazonaws.com\n            Action: 'sts:AssumeRole'\n      Policies:\n        - PolicyName: LambdaDynamoDBAccess\n          PolicyDocument:\n            Version: '2012-10-17'\n            Statement:\n              - Effect: Allow\n                Action:\n                  - dynamodb:PutItem\n                  - dynamodb:GetItem\n                  - dynamodb:DeleteItem\n                  - dynamodb:Scan\n                Resource: !GetAtt ItemDynamoDBTable.Arn\n\nOutputs:\n  InvokeURL:\n    Value: !Sub https://${ItemAPI}.execute-api.${AWS::Region}.amazonaws.com\n    Description: The URL to invoke the API.\n```\n\n### Deployment Steps:\n1. Navigated to the **CloudFormation Console** in the AWS Management Console.\n2. Uploaded the above YAML template.\n3. Launched the stack and verified all resources were created successfully.\n4. Retrieved the API Gateway invoke URL from the **Outputs** section of the CloudFormation stack.\n\n## **Testing**\n1. Used **Postman** or a browser to test the API endpoints:\n   - `PUT /items` with a JSON payload to add an item.\n   - `GET /items` to fetch all items.\n   - `GET /items/{id}` to retrieve a specific item.\n   - `DELETE /items/{id}` to delete an item.\n2. Verified that DynamoDB stored and updated the data as expected.\n\n## **Key Features**\n- Fully serverless and scalable architecture.\n- Automated deployment with CloudFormation.\n- Seamless integration of API Gateway, Lambda, and DynamoDB.\n\n## **Next Steps**\n- Add authentication using Amazon Cognito or IAM roles.\n- Optimize DynamoDB with indexes for more complex queries.\n- Implement monitoring using AWS CloudWatch Metrics and Logs.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevhabeeblateef%2Fserverless-react-app-with-aws","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevhabeeblateef%2Fserverless-react-app-with-aws","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevhabeeblateef%2Fserverless-react-app-with-aws/lists"}