2 min read
The primary motivation for this project, developed at the Harvard Health Systems Innovation Lab Hackathon, was to create a tool that helps clinicians document patient encounters more efficiently and accurately. Many existing solutions either lacked essential features, were overly complex with difficult interfaces, or proved too time-consuming for doctors. As part of the hackathon’s goal to integrate AI, we set out to build our own solution — one that makes recording patient notes after consultations faster, simpler, and more clinician-friendly.
Key Features
One of the main challenges was implementing a real-time Markdown-to-React editor and renderer. This was an important feature as the API was returning text in markdown but the client was reading the file as one big paragraph block. It was also important that the clinician could edit the response in case the AI model made inaccuracies. I tried to implement the marked(markdown) library which parses the markdown into HTML, however it was only able to seperate the text into new lines and bold lines. I had to implement a tedious solution which was to detect the markdown syntax and change the HTML accordingly. With the useState() library in React we were able to edit the markdown in real-time. This gave us the output we needed in the short time available.
P.S the original issue with the marked library was that the tailwind css "typography" plugin was not declared in the tailwind.config.ts file. I figured this out when building this portfolio site.