Frontend Assessment Project: Health Care Dashboard
Stack
- React
- TailwindCSS
- Vite
- Redux
Overview
Built a pixel-perfect responsive dashboard from Adobe XD design specifications, demonstrating both visual accuracy and front-end engineering best practices. The project emphasized clean state management, accessibility, and performance within a modern toolchain.
Highlights
- State Management: Implemented Redux slices for patient data and authentication, creating a scalable structure for managing asynchronous API requests and user session state.
- Accessibility (a11y): Designed the dashboard with semantic HTML and ARIA-conscious layouts. For example, diagnostic data was presented as a table for screen reader compatibility, styled with CSS to meet the visual spec while remaining accessible.
- Responsive Grid Layout: Structured the dashboard using CSS Grid, prioritizing semantic order of key content (e.g., Profile Panel placed early in the DOM hierarchy) to improve accessibility and logical navigation.
- Design Fidelity: Delivered a pixel-perfect implementation, resolving gaps in the provided API (e.g., missing high-res profile images) with thoughtful fallbacks that matched the spec.
- Performance: Used Vite and vite-plugin-singlefile for optimized builds and efficient bundling.
Outcome
The project showcases my ability to translate design specifications into fully functional, accessible interfaces using modern front-end tools. While the code and original spec are under NDA, a demo and case study are available privately upon request.
