Phlebotomy Situational Quiz
Built to demonstrate proficiency in modern full-stack development while creating a genuine learning tool for healthcare professionals. Features a decoupled architecture with separate frontend and backend deployments.
Key Features
Interactive quiz with 15 real-world phlebotomy scenarios
Immediate visual and textual feedback for each answer
Clean, medical-themed UI that feels professional yet approachable
Real-time progress tracking with visual progress bar
Completion summary with option to retake for continuous learning
Fully responsive design optimized for both desktop and mobile
Decoupled architecture allowing independent scaling of frontend and backend
CORS-enabled API serving structured JSON responses
Single-page application with smooth client-side routing
Technical Architecture
Backend
Frontend
Deployment
Architecture
Development
Technical Challenges
Navigating Tailwind CSS v4 configuration issues led to a strategic rollback to v3, ensuring stable styling while maintaining modern utility classes.
Architecting a custom Vite build configuration to enable independent frontend deployment on Netlify while maintaining seamless API integration.
Orchestrating deployments across two platforms—Netlify for the Vue SPA and Render for the Laravel API—requiring careful CORS configuration and environment management.
Implementing proper error handling for cross-origin requests to ensure a smooth user experience even during API latency or connection issues.
Results & Outcomes
A working training tool for phlebotomy situational judgment — used by actual healthcare students
Real-time feedback that works even with cold start delays on free-tier hosting
Clean Vue 3 Composition API architecture that would be easy for another dev to pick up
Fully decoupled frontend/backend deployed across Netlify and Render
Responsive design that works the same on a phone as on a desktop