Rainy Days Health

Introduction

Design

Last year, I went through the full design process to create a prototype for Rainy Days Health, a patient-facing app for requesting at-home care from a medical provider. You can read about the full process on the UX side of my portfolio. You can also check out my Figma design files, which I used to store all of my design decisions.

Demo

In order to display my experience with front-end development, I decided to create a responsive code demo of this app. Pivoting from a mobile app to a responsive website that works on both a desktop and phone browser view meant expanding my designs: making modified versions of the components in my component library to be optimized for the browser view. Having a patient intake flow available on both desktop and mobile views is a common telehealth practice, which I am familiar with due to my 6 years of professional experience working on telehealth products.

Implementation

Hosting

I decided to create a responsive web version of this application, hosted on Netlify.

Frameworks

React

I chose to create this project using React. React allowed me to create reusable and extensible components that would update through changing state as the user navigates through the app — perfect for creating flows like appointment requests.

Functional components and Hooks

When I built this project in React, I used only functional components instead of class components. Since the introduction of React Hooks in 2019, this has been more common, because functional components are more concise and readable. I used the useState Hooks to store state data in my components.

Tailwind

The project is styled using Tailwind, a CSS framework. Tailwind features predefined classes that help to speed up the development process for developers who already have lots of experience using CSS. It is also useful for maintaining consistent spacing and sizing across a project.

Libraries

React-Router

To allow users to navigate through different steps of the intake flow, I used the React library React Router. React Router provides a simple way to set different intake steps to different routes, and to navigate between them.

React Hook Form

I used the library React Hook Form to handle the form submissions and gather the patient information. This library is also great for providing data validation.

date-fns

Patients who request a visit through this application select timeslots, which means that I needed to convert times to different formats and perform calculations on them. To do this, I used the date-fns library. In previous projects, I have used MomentJS library for this instead, but date-fns is a more modern library, with all the functionality I needed at a much smaller package size (8KB).

Material UI Icons

I used the Material UI Icons library for all the icons included in this project. By including this package, I was able to pull in any icon I needed with a simple import statement.