The CareSync Frontend is a modern, responsive Single Page Application (SPA) meticulously engineered to provide two distinct, role-optimized experiences within a single codebase: a smooth, accessible portal for Patients and a powerful, data-dense dashboard for Doctors.
- Role-Based Layouts: Implemented a dynamic layout engine that serves completely different navigation structures and dashboards/themes based on the logged-in user's role (
DoctorvsPatient) using Angular's content projection and routing. - Responsive & Adaptive: Built with TailwindCSS mobile-first utility classes, ensuring a native-like experience on phones while leveraging large screen real-estate for complex data tables on desktops.
- Interactive Dashboards: Integrated Chart.js to visualize key metrics (Patient trends, Revenue, Appointment distributions) for data-driven decision making.
- Reactive State Management: Heavy usage of RxJS BehaviorSubjects in services to manage global state (User Session, Notifications, Theme Preference) without prop-drilling.
- Http Interceptors: Custom
TokenInterceptorautomatically attaches JWTs to outgoing requests and handles401 Unauthorizederrors by triggering the refresh token flow seamlessly. - Route Guards:
AuthGuardandRoleGuardprotect sensitive routes, ensuring users can only navigate to authorized areas.
- Feature Modules: The codebase is architected into domain-specific modules (
Auth,Doctor,Patient,Shared) to enforce separation of concerns and maintainability. - Reusable Components: Created a library of "dumb" presentation components (Cards, Tables, Modals) in the
Sharedmodule to reduce code duplication and ensure design consistency. - Lazy Loading: Route-level code splitting ensures fast initial load times by only downloading the chunks required for the current view.
- WebSocket Client: Integrated
@stomp/stompjsto subscribe to personal notification topics, providing instant feedback (Toasts/Snackbars) when appointments are booked or statuses change.
| Category | Technology |
|---|---|
| Framework | Angular 19+ |
| Language | TypeScript |
| Styling | TailwindCSS, PostCSS |
| Async Operations | RxJS (Observables, Pipeable Operators) |
| Data Viz | Chart.js |
| Build Tool | Angular CLI / Vite |
- Smart Booking Flow: 3-step wizard for selecting specialized doctors, choosing slots, and secure payment.
- Medical Vault: Access history, prescriptions, and lab reports.
- Video Consultations: Integrated interface for remote consultations.
- Practice Management: Calendar view of daily appointments with drag-and-drop rescheduling (planned).
- EMR Editor: Rich text tools to write prescriptions and diagnosis notes.
- Financial Analytics: Revenue tracking and payout reports.
Built by Vikrant - Demonstrating expertise in frontend architecture, component design, and reactive programming.