React-based web application for the J. Craig Venter Institute

The project

We developed a web application for the J. Craig Venter Institute to help scientists work with an enormous trove of data from two major studies of adolescent brain development — the Adolescent Brain Cognitive Development (ABCD) study and the Healthy Brain and Child Development Study (HBCD). While the number of records (rows) in the data is not huge (~100k), the ABCD study, for example, has collected more than 80,000 variables so the data is big. The data's size makes it difficult for users to work with. The platform currently allows users to view detailed summaries of all the variables and curate custom datasets. We are also working with the JCVI team to add extensive charting capabilities and the ability to run models directly from the platform.

Our role

We partnered with JCVI to develop the application from concept to delivery. We are responsible for building both the frontend of the tool as well as the backend that powers data retrieval and management of user resources such as tables, explorations, and analyses.

Features of the work

• We wrote the application using React with Typescript
• Material UI (MUI) for UI components and styling
• PostgreSQL for database
• MUI DataGridPro for advanced tables
• Victory Charts for data visualization (bar charts, scatter plots etc.)
• React D3 Tree to represent hierarchical tree data
• Recoil for application state management
• Jest, React Testing Library, Cypress for unit, integration, and e2e tests
• URQL as the GraphQL client for data fetching
• Node and NestJS for REST and Graphql APIs
• TypeGraphQL and Prisma ORMs
• AWS Infrastructure (EC2, EB, RDS, SQS, S3, ELB, and many more) and Node SDK
• DuckDB (Analytical queries and Parquet processing)
• Keycloak SSO Multi-Tenant Authentication
• Github Actions CI/CD

Tools used

Made for