Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wamiq319/patients-dashboard
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, ensuring it adapts to various screen sizes, and populate it with data from the API for displaying single patient details, all while adhering to industry standards.
https://github.com/wamiq319/patients-dashboard
adobe api apiintegration dashboard medical-application react tailwindcss xd
Last synced: 27 days ago
JSON representation
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, ensuring it adapts to various screen sizes, and populate it with data from the API for displaying single patient details, all while adhering to industry standards.
- Host: GitHub
- URL: https://github.com/wamiq319/patients-dashboard
- Owner: Wamiq319
- Created: 2024-12-20T05:59:06.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-30T16:22:14.000Z (28 days ago)
- Last Synced: 2024-12-30T17:19:05.405Z (28 days ago)
- Topics: adobe, api, apiintegration, dashboard, medical-application, react, tailwindcss, xd
- Language: JavaScript
- Homepage:
- Size: 791 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## 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](https://documenter.getpostman.com/view/11861104/2sA35G42ve)
## Design
The design for the dashboard was provided through Adobe XD. You can view the full design layout and specifications here:
- [Adobe XD Design](https://xd.adobe.com/view/121254c9-532f-4772-a1ba-dfe529a96b39-4741/)
## Installation
### Prerequisites
- Node.js and npm (Node Package Manager) installed on your local machine.
### Steps to Run the Project Locally
1. Clone the repository:
```bash
git clone https://github.com/your-username/patient-dashboard.git
cd patient-dashboard
```
Install dependencies:
```bash
npm install
```
Create a .env file in the root directory and add the API Credentials:
```bash
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
```bash
npm run dev
```
AND ENGOY THE PROJECT