🔵 BlueDot Frontend

Modern Angular healthcare platform for doctor discovery, appointment booking, and healthcare management.

---

✨ Features

• 🔐 Secure Authentication & RBAC
  Protected Angular routes for patients, doctors, admin using Auth0 JWT integration.

• 📅 Appointment Scheduling System
  Manage bookings, appointments, doctor availability, and healthcare scheduling workflows.

• 🔎 Doctor Discovery & Filtering
  Browse doctors by specialty, healthcare category, and location.

• 🗺️ Interactive Map Integration
  Leaflet-powered healthcare location services and doctor mapping.

• ⚡ Modern Angular Architecture
  Built using Angular 21 standalone components with lazy-loaded routing architecture.

---

🏗 Architecture

Angular 21.2+ Standalone Components
├── Feature-based modular structure
├── Angular Router with lazy loading
├── RxJS service-driven state management
├── Tailwind CSS 4.0 + SCSS styling
├── Role-based route guards (Patient, Doctor, Admin)
├── Auth0 JWT token integration
└── Leaflet maps integration

---

💻 Tech Stack

Category	Technology	Version
Framework	Angular	21.2.0
Language	TypeScript	5.9.2
Styling	Tailwind CSS + SCSS	4.0
State Management	RxJS	7.8.0
Maps	Leaflet	1.9.4
Authentication	Auth0 Angular JWT	5.2.0
Formatting	Prettier	3.8.1
Linting	ESLint	Latest
Build Tool	Angular CLI	21.2.8
Package Manager	npm	11.12.1

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm 11+
• Git

Installation

git clone https://github.com/yourusername/bluedot-frontend.git
cd bluedot-frontend
npm install

Start Development Server

npm start

Application runs on:

http://localhost:4200

Production Build

npm run build

Production files are generated inside:

dist/

Watch Mode

npm run watch

---

⚙️ Environment Configuration

Create a .env or environment configuration file if required:

NG_APP_API_URL=http://localhost:3000/api
NG_APP_ENVIRONMENT=development
NG_APP_AUTH0_DOMAIN=your-auth0-domain
NG_APP_AUTH0_CLIENT_ID=your-client-id

Update the variables according to your backend API and Auth0 configuration.

---

📁 Project Structure

src/
├── app/
│   ├── core/                      # Core utilities & shared components
│   ├── features/                  # Feature modules
│   │   ├── Login/                 # Authentication feature
│   │   ├── patient-dashboard/     # Patient features
│   │   ├── doctor-dashboard/      # Doctor features
│   │   ├── admin-dashboard/       # Admin features
│   │   └── not-found/             # 404 page
│   ├── services/                  # Business logic & API services
│   │   ├── auth.service.ts
│   │   ├── appointment.service.ts
│   │   ├── doctor.service.ts
│   │   ├── admin.service.ts
│   │   ├── analytics.service.ts
│   │   ├── role.guard.ts
│   │   └── admin.guard.ts
│   ├── app.routes.ts              # Routing configuration
│   └── app.config.ts              # Application configuration
├── styles.css                     # Global styles
├── main.ts                        # Bootstrap entry point
└── index.html                     # Main HTML file

---

🔐 Authentication & Authorization

BlueDot implements role-based access control (RBAC) using Angular route guards with Auth0 JWT token integration.

User Roles

• patient — Appointment booking and profile management
• doctor — Availability and appointment management
• admin — Full platform administration access

---

Production Build

npm run build

Build artifacts are generated inside:

dist/

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push the branch
5. Open a Pull Request

Development Standards

• Follow Angular style guide best practices
• Use TypeScript strict mode
• Format code with Prettier
• Write tests for new features
• Use standalone components
• Keep architecture modular and scalable
• Implement proper RxJS error handling

Code Quality

• ESLint for linting
• Prettier for formatting
• TypeScript strict mode enabled
• Tailwind CSS class sorting support

---

---

📚 Resources

• Angular Documentation: https://angular.io
• Angular CLI Documentation: https://angular.io/cli
• TypeScript Documentation: https://www.typescriptlang.org/docs
• Tailwind CSS Documentation: https://tailwindcss.com/docs
• RxJS Documentation: https://rxjs.dev
• Leaflet Documentation: https://leafletjs.com
• Auth0 Angular SDK: https://auth0.com/docs/libraries/auth0-angular
• Vitest Documentation: https://vitest.dev

---

📝 Important Notes

• Ensure Node.js 18 or higher is installed
• npm is the recommended package manager
• Tailwind CSS 4.0 is used in this project
• All Angular components follow standalone architecture
• Configure environment variables before deployment

---

---

👥 Team

MY CLICKCARE — TEAM 4

1. NIKOS DASKALAKIS
2. KONSTANTINOS PETSOPOULOS
3. MARIA ANAGNOU
4. APOSTOLOS SOUGLERIS

---

📝 License

Licensed under the MIT License.

---

Built with Angular 21 for modern healthcare experiences ❤️