Serverless Expense Manager

This is the submission of Cloud Developer Nanodegree Capstone project. i've implemented a Simple Expense Manager application using AWS Lambda and Serverless framework in the backend and Angular 8 in the frontend.

Functionality of the application

This application allow creating/removing/updating/fetching Expenses. Each Expense can optionally have an attachment image. Each user only has access to Expense that he/she has created.

Deployment Link

the frontend have been deployed as a static website using S3 and CloudFront as a CDN.

• frontend link https://d16t0bma8g1do4.cloudfront.net

Tech Stack

frontend

• Angular 8
• Angular Material and FlexLayout
• Auth0 for authentication
• AWS S3
• AWS CloudFront

backend

• Serverless Framework
• NodeJS
• AWS Lambda
• AWS S3
• AWS DynamoDB
• API Gateway
• AWS XRAY

API Endpoints

endpoints:
  GET - https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev/expenses
  POST - https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev/expenses
  PATCH - https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev/expenses/{expenseId}
  DELETE - https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev/expenses/{expenseId}
  POST - https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev/expenses/{expenseId}/image
functions:
  Auth: expense-manager-app-dev-Auth
  GetExpenses: expense-manager-app-dev-GetExpenses
  CreateExpense: expense-manager-app-dev-CreateExpense
  UpdateExpense: expense-manager-app-dev-UpdateExpense
  DeleteExpense: expense-manager-app-dev-DeleteExpense
  GenerateUploadUrl: expense-manager-app-dev-GenerateUploadUrl

Frontend credentials

export const environment = {
  production: false,
  baseUrl: "https://xm6pd9tj3g.execute-api.us-east-1.amazonaws.com/dev",
  auth0: {
    domain: "mowamed.auth0.com",
    client_id: "LGYoHVP8w9iFdgoAU166OlT2VpA8gDUj",
    redirect_uri: `${window.location.origin}`,
    audience: "http://finale-project-expense-manager.com",
    scope: "openid profile email read:users"
  }
};

How to run the application

Backend

To deploy an application run the following commands:

cd backend
npm install
sls deploy -v

Frontend

To run a client application first edit the frontend/src/environments/environment.ts file to set correct parameters. And then run the following commands:

tip: the default credentials have already been added in the file

cd frontend
npm install
ng serve

This should start a development server with the Angular application that will interact with the serverless Expense application.

tip: you can view it in your browser at localhost:4200

Screenshots

AWS

Xray screenshot:

Debugging with Xray:

API Gateway screenshot:

CloudWatch screenshot:

Backend

sls deploy output:

Serveless Dashboard:

Frontend

Unauthenticated user:

Authenticated user:

Add new expense:

Expense details:

Expense List: