henriqueinonhe / medical-dashboard

Medical Dashboard

TL;DR

Make sure you have these installed:

• Node

Installation

git clone https://github.com/henriqueinonhe/medical-dashboard
cd medical-dashboard
npm ci

Configuration

Configure environment variables.

• Copy .env-sample contents to .env.

Running

Make sure port 8080 is available.

For development:

npm run dev-start

For "production-like" environment:

npm run prod-start

Table of Contents

• 1 Stack
• 2 Pre Requisites
• 3 Installation
• 4 Configuration
• 5 Running
• 6 Linting
• 7 Testing

1 Stack

• Language: Typescript
• Framework: React
• CSS in JS: Styled Components
• Bundler: Webpack
• Linter: ESLint
• Tests: Jest
• UI Tests: Cypress

2 Pre Requisites

• Node/NPM

3 Installation

Clone the project:

git clone https://github.com/henriqueinonhe/medical-dashboard

4 Configuration

There are two environment variables:

• API_BASE_URL - Self explanatory
• TEST_ENVIRONMENT - Must be set to true when running cypress tests.

As environment variables are actually replaced (textually, just like C #define) by webpack, each time you update an environment variable value you MUST restart the server for the update to take effect.

5 Running

For a development environment:

npm run dev-start

For a production-like environment:

npm run prod-start

This one is much more performant however takes much longer to compile and thus much longer to iterate, so it is mostly used for profiling purposes.

6 Linting

To run the linter:

npx eslint .

7 Testing

There are mostly UI integration tests, where the API is mocked, but aside that, everything runs pretty much "in the flesh".

To run unit tests:

npx jest

To run UI Integration tests you must first serve the web server (e.g. npm run dev-start), set TEST_ENVIRONMENT environment variable to true and then you may either run them in headless mode

npx cypress run

or in a headed mode:

npx cypress open

(It's cooler to use the headed mode to see things happening for real)