refine.bio Web

This is a web client for refine.bio that enables users to search, build, and download custom datasets for their needs including gene expression matrices and sample metadata.

Table of Contents

- [Getting Started](#getting-started) - [Prerequisites](#prerequisites) - [Development](#development) - [Initialization](#initialization) - [Services](#services) - [Linter](#linter) - [Build](#build) - [Deployment](#deployment) - [Environments](#environments) - [Staging](#staging) - [Production](#production) - [Tech Stacks](#tech-stacks) - [Framework and Tool](#framework-and-tool) - [Formatting](#formatting) - [Linting](#linting) - [Styling](#styling) - [Support](#support) - [License](#license)

Getting Started

Prerequisites

To run the application on localhost, the following requirements must be installed on your environment:

• Node.js verson 18.17
• Yarn package manager version 3.6.1 (required Node.js)
• Docker

Yarn

For macOS, Yarn can be installed using the Homebrew package manager which also installs Node.js if it's not already installed.

In the terminal, run:

1. brew install yarn to install Yarn
2. yarn set version 3.6.1 to specify the Yarn version

npm

Alternatively, Yarn can be installed using npm which comes with Node.js.

Node.js

To switch the Node.js version, we recommend using a node version manager such as fnm or nvm.

Development

The following commands must be run from the project root directory.

Initialization

To install the packages and dependencies, run the following command:

yarn install

Services

These ports are used by a client and a storybook services that run locally in separate Docker containers.

| Service | Port | URL | | :-------- | :--- | :--------------------------------------------- | | Client | 3002 | http://localhost:3002 | | Storybook | 6006 | http://localhost:6006 |

To start the services, run the following commands:

Run the client

yarn start-client

Run the storybook

yarn start-storybook

Run all services

yarn start-local

Stop all services

yarn stop-local

Linter

To lint the code, run the following command:

yarn lint

You can run this command with options such as --fix which automatically corrects minor linting errors (e.g., module import order, layout formatting).

Build

To generate the production build, run the following command:

yarn build

Next.js will autogenerate the .next build directory which is optimized and exportable.

Deployment

Environments

Staging

The staging environment is a close replica of the production environment and we use it to run QA tests before releasing it to the production server. The staging server is deployed automatically by merging PR into the dev branch.

Production

The production environment is the latest release of the application that is available to end users. We manually promote a staging deployment to the production server in Vecel once all the QA tests are passed.

Tech Stacks

Framework and tool

This project is using Next.js (currently version 13) as a frontend framework and Storybook (currently version 7) as a collaboration tool for the UI development.

Formatting

We use Prettier for JS code formatting to automatically format the changed files on each commit. It can be integrated into various IDEs.

Linting

We use ESlint to statically analyze our JS code to correct common issues to write a bug free application.

Styling

• CSS-in-JS: Styled Component
• Component Library: Grommet

Support

refine.bio is developed by Childhood Cancer Data Lab and powered by Alex's Lemonade Stand Foundation.

You can support the CCDL’s efforts to give researchers the tools to create a healthier, more prosperous future for kids fighting cancer and beyond.

License

Distrubuted under the 3-Clause BSD License.