Patient Dashboard

Overview

A responsive React-based patient dashboard developed from a client-provided XD design and API endpoint. The task was to convert the design into a responsive UI using React and Tailwind CSS, while dynamically populating patient details from an API.

View Demo

This is a live demo of the Patients Dashboard application. It provides a visual interface to display Data

You can view the live demo at the following URL:

Patients Dashboard Demo

Features

• Responsive Design: The dashboard is fully responsive, ensuring a seamless experience across desktop, tablet, and mobile devices.
• Dynamic Data Population: Fetches and displays patient data using API calls for a single patient detail.
• Industry Standards: Built with best practices in mind, adhering to modern web development standards.

Technologies Used

• React: JavaScript library for building the user interface.
• Tailwind CSS: Utility-first CSS framework for styling.
• Axios: For making API calls to populate patient data.
• HTML/CSS: For the overall structure and styling of the dashboard.

API Documentation

The patient data is fetched using the following API endpoint. You can find the full API documentation and endpoints for the project at:

• API Documentation

Design

The design for the dashboard was provided through Adobe XD. You can view the full design layout and specifications here:

• Adobe XD Design

Installation

Prerequisites

• Node.js and npm (Node Package Manager) installed on your local machine.

Steps to Run the Project Locally

1. Clone the repository:

   git clone https://github.com/your-username/patient-dashboard.git
   cd patient-dashboard

Install dependencies:

npm install

Create a .env file in the root directory and add the API Credentials:

VITE_API_USERNAME=YOUR API-USERNAME
VITE_API_PASSWORD=YOUR API-PASSWORD
VITE_API_BASE_URL=YOUR API-BASE-URL

Start the development server by

npm run dev

AND ENGOY THE PROJECT