This is a web application 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
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
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:
brew install yarnto install Yarnyarn set version 3.6.1to specify the Yarn version
Alternatively, Yarn can be installed using npm which comes with Node.js.
To switch the Node.js version, we recommend using a node version manager such as fnm or nvm.
The following commands must be run from the project root directory.
To install the packages and dependencies, run the following command:
yarn install
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:
yarn start-client
yarn start-storybook
yarn start-local
yarn stop-local
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).
To generate the production build, run the following command:
yarn build
Next.js will autogenerate the .next build directory which is optimized and exportable.
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.
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.
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.
We use Prettier for JS code formatting to automatically format the changed files on each commit. It can be integrated into various IDEs.
We use ESlint to statically analyze our JS code to correct common issues to write a bug free application.
- CSS-in-JS: Styled Component
- Component Library: Grommet
refine.bio web 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.
Distrubuted under the 3-Clause BSD License.
