Bowell Frontend

Tools, libraries, frameworks:

This setup uses Node 14 and yarn.

Frontend

• next, typescript Next JS with Typescript
• axios - HTTP client
• redux, react-redux, @reduxjs/toolkit, next-redux-wrapper - (global) state management
• sass - Scss support
• chakra-ui + dependencies (such as emotion, framer-motion) - UI libraries
• formik, yup - form validation
• react-use-websockets - websocket client
• react-dropzone - drop zone component used for file upload
• recharts - plots
• jest + dependencies - unit tests
• cypress + dependencies - E2E testing
  and more...

Third Party Dependencies:

While designing the dashboard, we took inspiration from free version of Purity UI Dashboard created by CreativeTim, also licensed under MIT. All the code we used had been rewritten to Typescript, reformatted and refactored. Most of our components are self-written and only a few components come from the mentioned source.

All images are either self created or come from stock photos and are royalty free.

Favicon and logo are available for personal and commercial use under Flaticon License.

File Structure

Click here to read project's file structure documentation.

Development setup

Environmental variables in .env.local

API_URL=http://127.0.0.1:8000/api
API_ACCESS_TOKEN_LIFETIME=3600

Without Docker

Install dependencies

yarn install

Run development server

yarn dev

Running tests:

Jest (unit tests)

yarn test

Cypress (e2e tests) - multiple ways to run:

yarn e2e                  # with dev server
yarn e2e:headless         # windowless cypress with dev server
yarn e2e:prod             # cypress with production build
yarn e2e:prod:headless    # windowless cypress with production build

With Docker

Add .babelrc file in root directory with this content (if not present):

{
  "presets": ["next/babel"]
}

This will disable SWC, which does not work on Alpine, even after installing missing libraries (musl vs glibc issue).

Make sure Docker Engine is running.

While in root directory, build docker images and run them with docker-compose. This might take up to few minutes. Rebuilding image is crucial after installing new packages via yarn/npm.

docker-compose up --build

Client application should be up and running at 127.0.0.1:3000.

If docker images are installed and no additional packages have been installed, just run to start containers:

docker-compose up

Bringing down containers

docker-compose down

To run commands in an active container:

docker exec -it frontend <command>