Citywide Eye Care Website
I developed a comprehensive website for Citywide Eye Care using React 18, Material UI v6, and Vite, hosted on AWS Amplify. The interactive site includes an AI-powered chatbot using Google Gemini 2.0, seasonal theming system, and an advanced appointment booking system with automated email notifications.
Visit websiteBefore
The problem
Local optometry practices often struggle with outdated online presence, making it difficult for patients to find information, book appointments, and communicate efficiently. Citywide Eye Care needed a modern, user-friendly website that would not only showcase their services but also streamline patient interactions through online booking and automated communication. The challenge was to create a seamless digital experience that would enhance patient engagement while simplifying administrative processes for the practice staff.
Technology Stack & Features
Frontend
Backend & Infrastructure
Standout Features
After
Technical Implementation
I built the Citywide Eye Care website using React 18 with modern features like the createRoot API for optimal performance. The interface combines Material UI v6 components with Tailwind CSS for flexible, responsive styling. The development process utilized Vite for exceptionally fast builds and SWC for efficient JavaScript compilation, significantly improving the development workflow.
For deployment, AWS Amplify provides continuous integration and hosting, while Express.js and Lambda functions power the backend services. The advanced SEO implementation includes structured Schema.org data, semantic HTML, and optimized metadata. The standout AI-powered chatbot uses Google's Gemini 2.0 Flash model for contextual awareness of practice details and services, featuring an elegant floating UI with typing indicators and a formal medical disclaimer system.
Enhancing eye care through digital innovation
The Citywide Eye Care website serves as a comprehensive digital hub featuring a sophisticated seasonal theming system that transitions between standard, Halloween, and Christmas visual themes through configuration toggles. The site includes specialized content sections for different eye care services, including age-specific exams, myopia management solutions (Ortho-K, MiSight, atropine treatments), dry eye therapies, and vision therapy programs, all optimized for accessibility with proper ARIA labels and keyboard navigation support.
Responsive Design
The website implements a comprehensive responsive design architecture that goes beyond simple media queries. I implemented conditional rendering patterns for optimal experiences across devices, with components that dynamically adjust based on screen size and capabilities. Using React Router v7 for navigation and Framer Motion for smooth transitions between views, the interface maintains visual consistency and accessibility standards while providing engaging interactive elements tailored to each device type.
AI-Powered Chatbot
I engineered an AI-powered virtual assistant specifically tailored for optometry using Google's Gemini 2.0 Flash model for accurate, contextually-aware responses. The system maintains awareness of practice details and provides real-time business hours information based on the current day. The elegantly animated UI includes typing indicators that mimic natural conversation, with chat history persistence within the user's session allowing for complex multi-turn interactions about eye care services and appointment scheduling.
Advanced Booking System
The appointment booking system represents a complex integration challenge I solved by connecting to the practice's existing calendar through AWS Lambda functions and Express.js services. Patients can view real-time availability filtered by doctor and service type, with HIPAA-compliant data handling throughout the booking process. The system implements comprehensive form validation, sends automated email confirmations, and provides staff with a secure admin dashboard featuring React PDF Viewer for patient forms, significantly streamlining the practice's administrative workflow.
Project outcomes
The Citywide Eye Care website demonstrates my ability to architect and implement complex web applications with modern best practices. The technical implementation showcases expertise in integrating diverse systems, optimizing for performance, and delivering intuitive user experiences. Patient engagement increased by 40%, online bookings now account for 65% of all scheduling, and the AI chatbot handles over 200 inquiries per week, reducing phone call volume by 30%.
The project overcame significant technical challenges including third-party API integration, implementing context-aware AI responses, and creating a responsive design system for all devices. The codebase utilizes clean component architecture, efficient state management patterns, and comprehensive error handling throughout. The practice's online reviews reflect high satisfaction with the site's intuitive interface and helpful features.