luckyleonard / smsglobal-assessment Goto Github PK

View Code? Open in Web Editor NEW

SMSGlobal React assessment website created with react and typescript powered by CRA. View online :point_down:

HTML 3.56% TypeScript 96.33% CSS 0.11%

smsglobal-assessment's Introduction

SMSGlobal Coding Assessment

The README generated by Create React App has been moved to CRA-README

Overview

SMSGlobal Coding Assessment is help you to send messages using SMSGlobal REST API. It is powered by Create React App with TypeScript.

Online demo

Click 👉 http://bit.ly/smsglobal-assessment

Features

React(Hooks) + Redux(Saga) + React Router + Axios + TypeScript
UI Library: Material-UI
Unit Test: Jest

Issues

Only do the unit test cases with redux store to keep the data update under control

Getting Started

Prerequisties

Git
Node and YARN

Installation

$ git clone https://github.com/luckyleonard/smsglobal-assessment.git
$ cd smsglobal-assessment

# Install frontend dependencies
$ yarn

# Start whole project
$ yarn start

Test

Unit Test

# run unit test with Jest
$ yarn run test

Deploy

Build

# build website artifacts in ./build
$ yarn run build

Online Deploy

Project Structure

Only src/ will be elaborated below.

# some folders/files had been omitted
src/
├── components/ # They are shared Components
├── helpers/ # Helper functions
├── pages/ # All page containers
│   ├── Home/
│   ├── Report/
│   │   ├── components/ # Only used in this container
│   │   └── index.ts
│   └── Router.tsx # Routes config
├── redux/ # https://github.com/rematch/rematch
│   ├── actions/ # Action creator and Action types
│   ├── reducers/
│   ├── saga/ # To take care side effects
│   ├── selectors/ # To selector state from redux store
│   └── store.ts
├── types/ # Centralized redux and fetch response types
├── App.tsx
└── index.tsx