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.
Click to view full size
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 & Impact
Created a functional educational tool for phlebotomy situational judgment training
Successfully implemented real-time feedback system despite cold start delays on free tier hosting
Leveraged Vue's Composition API for clean, maintainable component architecture
Demonstrated full-stack proficiency by building, deploying, and connecting a decoupled application
Established deployment pipeline across Netlify and Render platforms
Implemented responsive design that works smoothly across desktop and mobile devices