How to Build a Hospital Record App with NextJs and Strapi

Introduction

Hospital records help to provide information on the background health conditions of prospective patients. There is a need to have an easily retrievable and accessible means of getting this record. We will solve this case study using the Strapi Content Management System to access and store patient records in an application.

Goal

In this article, we will build a Record application focusing on Patient Records. The app will focus on managing patient records in relations using the Strapi CMS and will provide all records to any patient when a request is made. These records will be fetched from an API and managed in Strapi.

Prerequisites

To follow up on this tutorial, prior knowledge of NextJs and APIs is required.

What is Strapi?

Strapi is an open-source, headless Content Management System that was developed using the Nodejs Javascript framework. Strapi provides users with features to enable them to store, manipulate, and manage content across their application workflows. It’s simple and easy to use, and with its administrative panel, users can easily monitor and manage their content. What’s more? With Strapi, we can integrate APIs that can provide and manage content stored on the Strapi CMS.

Setting up a Strapi Project

To set up our Strapi back-end, we will first create a directory for our project using the following code in CLI:

This creates a folder for our project recordapp. Next, we move into this folder:

Then, we install Strapi:

The command above sets up Strapi for our app with all required dependencies and creates a new folder record-backend for this.

Once the installation is complete, it will start up the server which you can view in your browser via the specified link. In your browser, you will have a result similar to the image below:

Here, simply fill in the required details and create a user account to access your dashboard.

Here we will set up the collection for our application.

Before we create our Strapi collection for our data, we have to understand how our hospital record app should operate. The application is to be able to facilitate identifying specific patient records on query. We will use MeiliSearch to make looking up of content in each record easier. With this, we can easily search for and get results from our Strapi collection showing content that have data related to the search keyword.

To set up our content, we will start by defining the content we wish to store on Strapi. To do this: first click on the Create your first Content Typebutton.

On the new page that opens up, click on Create new collection type.

On the next page, we get different content types we can create for our collection.

We will create fields for the patients. These fields will include: name, surname, age, blood_type, ailment, medicine, last_visit, allergies, next_of_kin, next_of_kin_contact, gender, and address. All of these fields will be text fields except the age and last visit which would be of type number and date respectively.

Above are all the fields for the patient record. After creation, click on the save button at the top right.

Building the Records App

With our content setup on Strapi CMS complete, the next thing we need to do is to build the front-end of our application. To do this, we will be using the NextJs framework which is an open-source Javascript framework developed on NodeJs to render applications on server-side as opposed to client-side rendering by ReactJs.

To install NextJs, enter the following command in your terminal:

We will be using Tailwind CSS to scaffold our application. This can be installed in CLI with the following command:

This creates a project folder hospitalrecords in your current directory. The created folder has the NextJs framework installed and we will use it to scaffold our application. The images below show what our finished app will look like.

Landing Section:

Search Section:

Patient Info section:

Here is the tree structure of our application:

Here, the index.js file contains all the components for the web page. In this file, we have:

Taking the components in order, the Topnav component contains the website’s navigation bar and has the following code:

Next, Landing.js is the website’s landing section:

The Records component contains the search bar for patient records.

Card.js is where the fetched data from Strapi will be displayed to the user:

It contains a child component Data that completely displays a selected patient’s data. Data.js contains the following lines of code:

Currently, the Card and Data components contain hard-coded values but these will be replaced as we proceed with building the application.

And finally, there’s the Footer.js Component with the following code:

Next in the tree above are the style sheets. The global.module.css file has been slightly modified to make use of Tailwind styles.

You can run the application with the npm run dev command in CLI to get a result similar to the images above.

Building the Patients API

For the purpose of this tutorial, we will be building a simple API to handle our patient’s data. For this, we will be making use of Node.js, express.js and a JSON file. First, we will create a new folder called api handler . This file will be where we will build and set up our API. Next we will create a JSON file containing our data. The file will be called patients.json and will contain the following:

Above is the structure of our sample patient data. Here, we have six patients in total with their corresponding records. For our API, we will require the Express.js framework. This can installed via CLI with the following bash code:

The above command installs Express.js and adds it to the dependencies. With this installed, we can now set up the server. Create a new file called server.js in the working directory and add the following code to it:

The above code sets up our server. It makes use of the file systemmodule to access the JSON file we earlier created for the patient data. The server is set to listen on port 8081. We can run this with the following command:

You will get a message saying: Listening at http://:::8081. You can navigate to the port 8081 in your browser via http://localhost:8081/fetchpatients to view the JSON response.

With this, our API is complete and we can now link it to Strapi to manage the relationship between the data.

Integrating the App with Strapi

With the API setup complete, we will proceed by first adding data from the API to our Strapi collection. Then, we will integrate milisearch into the application to fetch data and add search functionality.

First, we will install and make use of Axios to perform our fetch and post requests. we can install this with the following command in CLI

After installation we can use this to fetch our JSON response from our API. Back in the index.js file, add the following code:

The code above uses axios to fetch the data from our API running on port 8081. It then runs an asynchronous function that awaits the fetch request and logs it in the browser console.

Adding Data to Strapi To allow access to the Strapi collection we have to make changes to the user roles. To do this, navigate in the dashboard to the settings pane on the left navigation menu. Select Roles under Users and Permissions. Click on Public, select the patient-name collection and check all checkboxes.

Finally, click on the Save button at the top-right to save these changes.

Back within our index.js file, we will make modifications to send our API data to our Strapi Collection.

The code above stores our API response in a variable called response. A function sendData() is then called. This function maps through the response from the API and for each response, it sends the corresponding data to Strapi. At the end, if we view our Strapi Content-manager we will see six entries in our Patient name collection.

We can view the content of each entry by clicking on them. We get a window displaying each of the fields and their values.

Integrating Meilisearch To use Meilisearch locally, we will download and run an instance of it. This can be downloaded from Meilisearch Local. Opening the downloaded application shows a terminal with the Meilisearch instance hosted on local host:

If we navigate in the browser to the specified URL, we can see the Meilisearch interface:

To make use of Meilisearch from within our application, we would need to install it via CLI with the following command:

Back in the records.js file, we will add an import for the meilisearchmodule.

Then we create a client and set the host to the Meilisearch instance URL

The code above instantiates a client for our data. An index is created using this client and data is fetched from the Strapi collection and stored in it. The results are added to the index and displayed in the console. The index.search method is used to find strings in the data and it’s what we will implement in our search functionality. In this case, it is searching for the string “Stella”. Note that if the index.search method takes an empty string "" then all data will be displayed as results.

Next, we will need to pass the results of our search query to the Cardscomponents to display only the patients that match the search query. In the handlesearch function, we add:

Then, we will get this props in the parent component Index.js with the following code:

While also passing the function as a props to the Records component.

With this we get the results of the search query from the Recordscomponent. We can then pass these results to the Cards component and display them.

Next, we iterate over the number of results and display the corresponding data. To do this, add the following to the Cards.js file

The above code displays the cards with the corresponding data, and the number of displayed cards changes based on the search input.

If we were to search for a particular name, you only get that card displayed.

With Meilisearch, we can search for any data pertaining to a patient. This could be age, next of kin or even a health condition.

Finally, we need to display the entire patient data when the user clicks on the more info button. We will need to pass the data from the clicked card to the Data.js component. We will first create a variable for this:

Then, use the More info button to change the value of this state by modifying its onClick event-listener as follows:

We can now pass the fullData as props to the Data component.

To display this data in the Data.js file, we will make the following modifications:

With this, we have the correct data displayed when we click on the More info button.

Conclusion

In this tutorial, we learned about the Strapi CMS and how we can use it to build a hospital records application. We also learned how to make use of a search functionality to manage our data.

Resources

The repository containing all the code used in this tutorial can be found here

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Strapi

Strapi

The open source Headless CMS Front-End Developers love.