- Table of Contents
- About the project:
- Technologies used on the project:
- Functionalities:
- Technologies Stack:
- Prerequisites:
- Getting Started:
- API Endpoints:
- How to use the application:
- Postman collection:
E-Store-Serverless is a basic Serverless web application as a CRUD of the Web store with deals.
- NodeJS
- Angular 12
- JSON
- Bootstrap
- auth0
- karma
- jasmine
- typescript
- CSS
- HTML5
- AWS
- Serverless
- Swagger
- Application can be able to CREATE, UPDATE, DELETE, VIEW and UPLOAD IMAGES for items (Deals).
- Visitor (non authenticated user) can see deals (Regular and Special deals) which got created by users of the app.
- Application can be login/logout and show contents of the current user.
- User needs to be authenticated to could perform CRUD operations to Deal items that he/she has created
- Serverless Framework as Deployment Framework
- Angular for the Frontend
- AWS as cloud provider for following services : DynamoDB, Cloudwatch, Lambda, API Gateway, Cloudformation, S3, X-Ray, AWS SDK
- Auth0 as Authentication Framework
- Node.js for the Backend
- Auth0 account
- GitHub account
- Serverless
- Create a Serverless account user
- Install the Serverless Framework’s CLI (up to VERSION=2.21.1). Refer to the official documentation for more help.
npm install -g serverless@2.21.1 serverless --version
- Login and configure serverless to use the AWS credentials
# Login to your dashboard from the CLI. It will ask to open your browser and finish the process. serverless login # Configure serverless to use the AWS credentials to deploy the application # You need to have a pair of Access key (YOUR_ACCESS_KEY_ID and YOUR_SECRET_KEY) of an IAM user with Admin access permissions sls config credentials --provider aws --key YOUR_ACCESS_KEY_ID --secret YOUR_SECRET_KEY --profile serverless
- you need to edit the
environment.tsfile in thefrontend/environmentfolder. This file configures your client application and contains an API endpoint and Auth0
configuration:
const apiId = '...' API Gateway id export const apiEndpoint = `https://${apiId}.execute-api.us-east-1.amazonaws.com/dev` export const authConfig = { domain: '...', // Domain from Auth0 clientId: '...', // Client id from an Auth0 application callbackUrl: 'http://localhost:4200/callback' }
cd backend
npm install
serverless deploy -v
cd frontend
npm install
ng serve
This project was generated with Angular CLI version 12.2.11.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
| Method | endpoint |
|---|---|
| GET (Get Regular Deals) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/RegularDeals |
| GET (Get Special Deals) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/SpecialDeals |
| GET (Get USER'S Deals) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals |
| POST (Add Deal) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals |
| PATCH (Update Deal) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals/{dealId} |
| DELETE (Delete Deal | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals/{dealId} |
| PATCH (Add special deal) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals/{dealId}/special |
| GET (Get Deal's Details) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals/{dealId} |
| POST (Upload an image to a Deal) | https://ficmpgzsvc.execute-api.us-east-1.amazonaws.com/dev/deals/{dealId}/attachment |
- First, Home page is displayed to users and visitors of the webstore, showing all the deals by category : Regular or Special Deals
- Second, users should login with Google in order to use Auth0 authentication. This application only has option to login with Google account.
- After authentication success, users would be redirected to their own home page where they could perform CRUD operations on the app.
To create a new deal, click on ADD NEW DEAL button at the user's home page (Deals-List).
- Fill the fields on the form .
- Click
Submit
To update an existing deal, click on Edit button of the newly created deal at the user's home page (Deals-List).
- Make update in Edit page
- Click
Submit
To delete a deal, click on the Delete button of the newly created deal at the user's home page (Deals-List).
- Press Ok on the confirmation dialog
To create special deals, click on the Special Deal button of the newly created deal at the user's home page (Deals-List).
- Fill the sale price field on the form
- Click
Submit
To add an image for the newly created deal, click on the Image Upload button at the user's home page (Deals-List).
- Click on
Browsebutton to Choose an image to upload - Click
Uploadto upload the image
To get more details on the deal, click on the DETAILS button at the home page.
An alternative way to test the API, you can use the Postman collection that contains sample requests. You can find a Postman collection in this project. To import this collection, do the following.
Click on the import button:
Click on the "Choose Files":
Select a file to import:
Right click on the imported collection to set variables for the collection:
Provide variables for the collection (similarly to how this was done in the course):
