http://charm-app.s3-website-ap-southeast-2.amazonaws.com/

This is a re-usable Ecommerce Application built using React, React-Hooks, Redux, ExpressJS, Mongo DB and AWS Lambda.

The Express JS REST API is run on two AWS Lambda functions, one of which is for the private routes (Vendor) and the other for the public routes (Shop). These are triggered using two API Gateways configured as a proxy, which pass all the REST requests to each of the Lambda functions which then route to MongoDB using the Express JS router. The ExpressJS router is wrapped for the Lambda fuctions using serverless-http.

Authentication is required to access the private routes and also for uploading images. This is done using the AWS Cognito service.

The React App itself is hosted on a S3 bucket configured as a static website. The App is designed to work on both Mobile and Desktop.

The uploading of product images to the S3 bucket is via the AWS SDK, which was added to the React code. Image cropping and resizing was also client-side using the library CropperJS. Images are lazy-loaded, copied from the way instagram loads images.

The styling of the App was based on the Niche template of Generate Press but with a Carousel added to the home page using the library, react-image-gallery. The photos of the model are by the photographer Alena Ozerova, who is also the model. The Jewellery photos were taken by myself using a mobile phone and a white background was added using GIMP.

The three diagrams below describe the AWS configuation for the App.

Mark Mackenzie

February 2021