Healthcare Dashboard

A modern healthcare dashboard built from a Figma design, developed as a frontend coding challenge. The application displays patient health information using data fetched from an external API while maintaining a responsive and pixel-accurate user interface.

---

Preview

---

Features

• Responsive dashboard layout
• Pixel-perfect implementation from Figma
• External API integration
• Dynamic patient information
• Blood pressure visualization using Chart.js
• Clean and reusable React components
• Modern UI with responsive design

---

Tech Stack

• React
• JavaScript
• HTML5
• CSS3
• Chart.js
• Axios

---

Project Structure

src/
├── components/
├── services/
├── assets/
├── styles/
└── App.jsx

---

Getting Started

Clone the repository

git clone https://github.com/YOUR_USERNAME/healthcare-dashboard.git

Install dependencies

npm install

Run the development server

npm start

---

Design

The interface was developed by converting a Figma design into a responsive web application while preserving spacing, typography, colors, and layout consistency.

---

API

Patient information is retrieved from the provided Healthcare API and rendered dynamically throughout the dashboard.

---

Learning Outcomes

This project helped strengthen my experience with:

• Converting Figma designs into production-ready interfaces
• Building reusable React components
• API integration
• Responsive layouts
• Data visualization
• Component organization

---

Author

Mathew Oloyede

Frontend Developer

• GitHub: https://github.com/yourusername
• LinkedIn: https://linkedin.com/in/yourlinkedin