Bloom
Date
Aug 2022 - Present
Type
Full Stack
Languages
HTML, CSS, JavaScript
Tools
React, Node, Express, Neo4j, Oracle, Material UI, React Hook Form, SAML, Next.js
Live Version
https://bloom.crso.unc.edu/ (only available to UNC campus VPN)
Bloom is an award-winning process mapping SPA that assists research teams in understanding and navigating the steps required to initiate clinical research studies (Innovation Challenge at the 2023 MAGI East Clinical Research Conference). I developed both the user and admin panel.
Features
1. Login & Sign Up
- Implemented Passport to serve as the authentication middleware for SAML SSO.
![Login & Sign Up Gif](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FBloom_SSO_Login.70d25fa2.gif&w=16&q=75)
![Study Table Image](/_next/static/media/Bloom_Study_Table.43393615.png)
2. Study Table & Form Modal
- Implemented Material UI (MUI) Datagrid for table display and React Hook Form for form submission.
- Delivered asynchronous API calls (AJAX) through Express server for database handling.
3. Wizard & Process Map
- Utilized Neo4j graph database to chronologically map out clinical research initiation process based on user inputs about their studies.
![Process Map Image](/_next/static/media/Bloom_Process_Map.b9e04e07.png)
![New Post Gif](/_next/static/media/Lock.de020d7d.png)
4. Work in Progress
- Because Create React App (CRA) is no longer a recommended solution for creating React applications, we are working on switching Bloom to Next.js framework with a new interface layout.