This is a full-stack mono repository for XenElectronic, one of electronics and home appliance store.

As part of XenElectronic MVP, this application has the following features:

• Customers should be able to view the list of the products based on the product categories
• Customers should be able to add the products to the shopping cart
• Customers should be able to view the products listed on the shopping cart
• Customers should be able to remove the products listed on the shopping cart
• Customers should be able to checkout shopping cart and continue their transaction to payment

This project will be built using React (for front-end) and Node.js Express (for back-end). As part of a full-stack JavaScript application, TypeScript is implemented to ensure type-safety in the development phase.

• npm - v8.x
• Node.js - v16.x
• git
• Heroku PostgreSQL - for Heroku Development and Production Environment
• SQLite - for Local Development

$ git clone https://github.com/PrawiraGenestonlia/xenelectronic
$ cd xenelectronic
$ npm install

$ npm run dev

There will be 2 services being run - api and ui. api-service will be listening to port 8080 and ui-service will be listening to port 3000. The development environment is hot-reload enabled, as such, there is no need to restart the program when changing source code files. For OpenAPI documentation, you can navigate to http://localhost:8080/api/docs/ to access swagger application.

If you want to run unit test for the project, run npm run test command. However, if you want to run coverage test, run npm run coverage command. If there are no failed test cases, lcov html files will be generated and this command will automatically opens the coverage results for both api and ui.

As the api is written in TypeScript (node.js), the following technology is used:

• mocha - JavaScript test framework
• chai - JavaScript asserting library
• nyc - Code coverage generation tool

The following screenshot shows the code coverage as of 27th Feb 2022.

As the ui is developed using React UI Library, the following technology is used:

• react testing library - React testing library
• jest - JavaScript testing framework
• nyc - Code coverage generation tool

The following screenshot shows the code coverage as of 27th Feb 2022.

The application is deployed in heroku. Two versions are made public:

• XenElectronic - development - Development environment for SIT
• XenElectronic - production - Production environment for public consumption

A single URL entry instead of separate url for api and ui is decided to ensure the project is accessible and secure through CORS control. If you would like to explore REST API services, do visit the swagger file.

When there are changes to the development branch in the repository, the application will be deployed to development environment. Upon successful testing and verification, a pull request to main branch is to be made. This will trigger a deployment in production environment.

• React - The web UI library
• Tailwindcss - A utility-first CSS framework
• Express - Node.js web application framework (for REST APIs)
• TypeORM - A typescript-enabled Object-Relational Mapping
• PostgreSQL - A powerful, open source object-relational database

The project is a monorepo project with npm workspace. This enables global scripts to start, build or test both api and ui repository with a single command. This is the project structure.

- api                   //api application
- images               
- ui                    //ui web application
  .gitignore
  checklist.md
  package-lock.json
  package.json
  Procfile
  README.md

To improve development productivity, the database will be seeded with necessary information if it is empty. The seeding data can be found in {project}/src/database/seeding/* folder.

In this MVP, a total of 24 APIs were developed. The complete API request (path, query or body) and response body schemas can be found in the swagger file. This is done through programatic generation of OpenAPI spec. To view this spec locally, you can run this project and find the file at {project}/api/tsoa/swagger.json path.

To improve the state management in the React UI, redux and redux-saga are implemented. This is to ensure a high level of responsiveness when user navigates from pages to pages. A detailed implementation of redux can be found in {project}/ui/src/redux/* folder.

• Prawira Genestonlia - Lead Developer

• Unsplash - For categories' images
• Alicdn = For products' images
• Xendit - For this opportunity and problem statement
• David - For enablement