Sortable Frontend Exercise

Table of Contents

• About the Project
• Build with
• Getting Started
• Installation
• Running
• Screenshots
• File Structure
• Unit Testing
• Running Unit tests

About The Project

Sortable Frontend Exercise This exercise will evaluate your skills in front-end web development using different technologies.

LIVE DEMO:: https://sortable-exercise.herokuapp.com/

Build with

• React JS
• Typescript
• Node.js
• HTML/CSS
• SASS
• Redux
• Jest
• Enzyme
• Axios
• Material Icons

Getting Started

This is an list of needed instructions to set up your project locally, to get a local copy up and running follow these instructions.

Installation

1. Clone the repository

$ git clone https://github.com/abdulsamadola/sortable-exercise.git

2. Navigate to repository directory

$ cd sortable-exercise

3. Install dependencies

$ npm install 

4. cd client

$ npm install 
### Running

1. **_Running on development mode_**

cd ..
$ npm run start

2. Build for production

$ npm run build

Screenshots

File Structure

|-- Sortable Frontend Exercise
    |-- .DS_Store
    |-- .gitignore
    |-- README.md
    |-- package-lock.json
    |-- package.json
    |-- server.js
    |-- client
    |   |-- .DS_Store
    |   |-- .gitignore
    |   |-- README.md
    |   |-- package.json
    |   |-- tsconfig.json
    |   |-- public
    |   |   |-- favicon.ico
    |   |   |-- index.html
    |   |   |-- logo192.png
    |   |   |-- logo512.png
    |   |   |-- manifest.json
    |   |   |-- robots.txt
    |   |-- src
    |       |-- index.tsx
    |       |-- react-app-env.d.ts
    |       |-- setupTests.ts
    |       |-- components
    |       |   |-- App
    |       |       |-- App.tsx
    |       |       |-- OrderTable.tsx
    |       |       |-- __tests__
    |       |           |-- OrderTable.test.tsx
    |       |-- services
    |       |   |-- index.ts
    |       |   |-- orderService.ts
    |       |-- store
    |       |   |-- actions.ts
    |       |   |-- effects.ts
    |       |   |-- reducer.ts
    |       |   |-- types.ts
    |       |-- styles
    |       |   |-- App.scss
    |       |-- utils
    |           |-- constants.ts
    |           |-- dateFormat.ts
    |           |-- sorting.ts
    |-- screenshots
        |-- 1.png

Unit testing

Each component in this project has its own unit test file inside __tests__ directory eg. OrderTable.test.tsx

Running Unit tests

Run the following command.

npm run test