One.Check is a company whose aim is to boost healthcare digitalization. It strives to provide an outstanding innovative customer service that is sustainable long-term.


06.2022 – now


React.js, TypeScript, Create React App, React Helmet, GraphQL, Apollo Client, Axios, Redux Toolkit, Material UI, React-pdf, Google OAuth2, Google Maps API, Places Autocomplete API, Google Calendar API, i18next, React Datepicker, Validator, Swiper

Business solutions

  • innovative doctor appointments availabilities to get more bookings from the website
  • vast selection of doctor appointments digitized real-time availabilities to make a full-time load for the doctors
  • wide choice of availabilities filtering, sorting options and views to show all services
  • wide range of authentication flows to suit users’ needs and increasing conversion rate
  • easy selection of patients associated to make a reservation
  • a broad variety of appointment payment options to suit users’ needs and as a result, get payment from different type of systems
  • immediate booking confirmation that eliminates duplicate issues
  • personal account with a list of bookings made, personal information and patients linked to form own clinics database

Development process

  • used Create React App tool to create a SPA
  • implemented UI part, based on provided Figma files for B2B & B2C sections
  • used GraphQL to make this app faster to get only necessary data
  • added  Apollo Client, to consume a graph with asynchronous operations state management and a caching option
  • used Redux Toolkit to work with Redux logic with reduced boilerplate and such great utilities under the hood as thunks, memorized selectors, etc
  •  used Material UI a library that provides a wide selection of prebuilt components ready to use out of the box and help cut time for the development process
  • developed a tool to create PDF docs on the client side
  • to simplify the authentication process used Google OAuth2


New features adding for B2C part of the project

Jul-Sep 2022
  • innovative doctor appointments availabilities search options
  • fast selection of doctor appointments digitized real-time availabilities
  • wide choice of availabilities filtering, sorting options and views
  • wide range of authentication flows to suit users’ needs

New features adding for B2B part of the project

Sep 2022- Jan 2023
  • wide range of authentication flows to suit users’ needs
  • easy selection of patients associated to make a reservation for
  • broad variety of appointment payment options to suit users’ needs

Project updates

Jan 2023-now
  • immediate reservation confirmation
  • Google APIs (Maps, OAuth2, Calendar) integrated
  • personal area with a list of reservations made, personal information and patients associated

Main Functionality

Project Description Image


To search for doctor appointment availabilities user has to fill in the form and provide desired specialty, location, and date.
Specialties list has trending options unless user starts typing the name of desired specialty. As a means of optimization trending options are pre-fetched on initial page load and cached.
Specialties suggestions are generated based not only on match of input value with a name of a specialty but also on match of input value with tags each specialty has to show related options possibly suitable for user.

Project Description Image

Input to provide a desired location also has trending options and a button “Cerca vicino a me”. Its click triggers JavaScript Navigator utility function to get users’ geolocation previously having asked user’s permission.
The aforesaid input also has Places Autocomplete API integrated. Its suggestions in the case are restricted to Italian cities and addresses. The value chosen’s used to search for availabilities in its 50km radius.


Project Description Image

And the last but not least is the input to fill in desired date. It has customized React Datepicker integrated with dynamic locales. In the screenshot we may see Italian localization but when the language of entire application is switched to English, the locale of Datepicker is automatically changed to English as well. Here there is also a button “Mostra la prima disponibilita” to search for soonest doctor appointment availabilities.

Project Description Image


In the screenshot see the list of doctor appointment availabilities found. On the top there is a clickable component with query details. Its click redirects user to the homepage with the form with pre-chosen initial values enabling user to alter the query easily. Interface of the page below differs according to the type of date chosen. In the screenshot below we see the example of the page when “Mostra la prima disponibilita” option is chosen. The boxes on the right show the soonest available date.

Project Description Image

Here is the example of the same page when a specific date is chosen when searching for availabilities. The aforementioned box is divided into three box here: “Mattina”, “Pomeriggio” and “Sera” that stand for “Morning”, “Afternoon” and “Evening” accordingly. If there are availbilities within the timeframe the box’s colored green and is clickable. 

Project Description Image

In both screenshots we may see a wide choice of filters offered. Filters criteria are timeframes, clinics and reservation confirmation type (Toggle component with label “Conferma immediata”). We may also notice customized datepicker with custom day intervals. In this case 5 business days are always shown. User’s able to browse weeks and launch a query with the date changed from this page.
When “Ordina” button is clicked the modal with sorting options is opened. We may notice the following sorting options: by price (both ascending / descending orders), by distance (ascending order) and default option. If default option is chosen avails are compared by dates first and if the date is the same by distance in ascending order then.

Project Description Image

Let’s pay attention to an alternative availabilities view. It is the map view. Here Google Maps API is integrated. Each clinic has an associated marker on the map based on its coordinates. The card of the availability associated to the focused marker (the black one) has a black border for better UX. Map is draggable. Each marker is clickable. On its click the availability associated “climbs” to the first position in the list. This view also has all filters, sorting options mentioned above as well as the datepicker to launch the query for another date.

Project Description Image

When one of the boxes on the right of card or “Vedi disponibilita” button is clicked, such a modal opens with time-specified availabilities. Information here covers time, staff and price. Here we also have a Datepicker component to launch a query for another date in this specific clinic. For better UX avails are divided by timeframe.

Project Description Image


After choosing a doctor appointment user wants to book and checking recap of appointment chosen, user arrives at checkout page. User’s able to sign up or sign in with Google (Google One Tap is also integrated), with a standard application’s authentication logics or proceed as a guest. Application’s authentication logic relies on OTP. User’s also able to resend OTP to pre-filled email by clicking “Reinviami il codice”. 

Project Description Image

Having signed in successfully user proceeds to the second step. It is the form with information about patient. It is pre-filled in case user already provided prsonal information. Let’s pay attention to the select component in the screenshot below. It has options “Per me stresso”, “Per un’altra persona” that stand for “For myself” and “For another person” accordingly. If the second one is chosen the form’s empty. In the list of options there will be also patients associated user added in his personal area. If the patient is chosen form’s values are automatically changed to the information about the patient user provided in his personal area.This feature speeds up the whole process of making a reservation, makes it easier.

Project Description Image


At the moment three payment options are available: “Carta di credito”, “Paga in struttura” and “PayPal” that stand for “Pay by credit card” and “Pay in clinic” accordingly.
There is also a feature to change dynamically logo of credit card issuer according to the first digits of credit card number entered. Form has Luhn validation enabled if submitting with “Pay by credit card” option.

Project Description Image


The majority of availabilities can be confirmed immediately. If such availability’s booked the user gets such a notification. Also an email with booking recap is sent to user’s email.


Project Description Image

Page with booking details have such buttons as “Ottieni indicazioni” to open Google Maps with the clinics coordinates in a new tab and “Salva a calendario” to create an event in Google Calendar.
If this button is clicked and authorization to Google Account is successful user will have such an event in the calendar.

Reservation recap can be also downloaded as a PDF by clicking “Scarica la prenotazione”.

Project Description Image


User has the list of reservations made. They are divided into oncoming and past ones (the past ones also include cancelled ones). By clicking on “Vedi dettagli” button user can check the details of a specific booking.
User is also able to modify personal information ,see the list of patients associated, add them, modify pesonal information of patients or delete them.

Contact Us

We’d love to hear from you. Fill out the form, and we’ll get back to you shortly.