A modern and responsive web interface for the clinical management system, developed with the latest version of Angular (v21), utilizing Standalone Components and an architecture prepared for Signals.
⚙️ Backend Repository: This frontend application consumes a .NET 10 RESTful API. You can find the complete backend code, Clean Architecture implementation, and database configuration here.
- Angular 21: Single Page Application (SPA) framework running on its most performant LTS version.
- Standalone Components: Clean and modular architecture eliminating the need for
NgModules. - Signals Ready: Architecture structured to support Angular's modern granular reactivity model.
- TailwindCSS: Utility-first CSS framework for rapid UI development and highly responsive designs.
- Reactive Forms: Robust handling of complex, strictly-typed forms with built-in validations.
- HTTP Interceptors: Automatic injection of JWT Bearer tokens across all authenticated requests.
- Functional Guards: Modern route protection utilizing Angular's functional syntax for enhanced security.
- Services: Strict isolation of HTTP communication and business logic from UI components.
- Chart.js (ng2-charts): Dynamic, interactive, and responsive data visualization for business intelligence.
The project follows modern Angular feature-based organization:
src/app/
├── core/ # Singleton services, interceptors, functional guards, and models
├── features/ # System modules and screens (e.g., Auth, Patients, Dashboard)
└── shared/ # Reusable visual components and UI elements
- Authentication: Seamless JWT login integrated with the .NET API.
- Patient Management:
- Responsive data tables for listing patients.
- Registration forms with strict input validation.
- Secure record deletion.
- Security: Automatic session management and redirection upon token expiration or unauthorized access.
- Business Intelligence Dashboard:
- Overview panel with core KPIs (Total Patients, Revenue, Average Ticket).
- Interactive financial charts to support data-driven decision-making.
- Node.js (v20 or higher)
- Backend API running locally (Refer to the backend repository, or use the provided Docker Compose).
-
Clone the repository:
git clone https://github.com/Lorenzo-Zagallo/clinica-front-angular.git cd clinica-front-angular -
Install the required dependencies:
npm install
-
Start the development server:
ng serve
-
Open your browser and navigate to:
http://localhost:4200
(Note: If you are using the Docker Compose setup from the backend repository, the frontend container will automatically build and map to port 4200 without needing to run ng serve manually).
Developed by Lorenzo Zagallo 👨💻