https://github.com/triptigithub/healthcare
https://github.com/triptigithub/healthcare
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/triptigithub/healthcare
- Owner: Triptigithub
- Created: 2025-05-26T06:13:32.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-26T06:43:46.000Z (9 months ago)
- Last Synced: 2025-05-26T08:24:37.033Z (9 months ago)
- Language: JavaScript
- Homepage: https://healthcare-mu-pearl.vercel.app
- Size: 5.24 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Healthcare Dashboard (React - Static Display)
A pixel-perfect, responsive healthcare dashboard built using React. This project recreates a static visual design based on the provided reference image, demonstrating component-based UI development, static data rendering, and responsive styling.
---
## Project Overview
This single-page React application represents a clean, minimalist healthcare dashboard featuring:
- A fixed sidebar navigation with static links
- A top header with logo, search bar, notifications, user profile, and add button
- Main dashboard content including:
- Anatomical illustration with health indicators
- Health status cards
- Static calendar view with appointment highlights
- Upcoming schedule with appointment cards
- Activity feed with a static bar chart
The project uses mock data for all visual elements passed via props, focusing entirely on UI fidelity without interactive functionality.
---
## Features
- Pixel-perfect recreation of the provided design image
- Fully responsive layout for desktop, tablet, and mobile screens
- Modular React component architecture with reusable components
- Static data rendering through JavaScript mock data files
- Styled using CSS Modules for scoped and maintainable styling
- Accessible with alt attributes and semantic HTML
---
## Tech Stack
- React (functional components with hooks)
- CSS Modules for styling
- JavaScript for mock data management
- Vite (or create-react-app) for project setup and development
---
## Getting Started
### Prerequisites
- Node.js (v14 or above recommended)
- npm or yarn package manager
### Installation
1.Clone the repo:
```bash
git clone https://github.com/yourusername/healthcare-dashboard.git
cd healthcare-dashboard
2.Install dependencies:
npm install
# or
yarn install
3.Run the development server:
npm run dev
# or
yarn dev
4.Open your browser at http://localhost:3000 to view the dashboard.