🚂 TrainLink Client (Angular)

TrainLink is a modern, full-stack meeting and training slot management system. This repository contains the Frontend Client built with Angular 19 and Tailwind CSS 4, designed to provide a seamless experience for Administrators, Trainers, and Members.

---

🔗 Quick Links

Resource	Link
🌐 Live Demo	Click here...
🔙 Backend Repo	Coming Soon...
👨‍💻 Portfolio	calldevx.tech
💼 LinkedIn	Muhammad Asad

---

📸 Screenshots

| Login Screen |

| Login Successfull Dashboard Overview |

Dashboard Overview |

Create a Meeting Slot then add the link to activate that slot

Meeting Slot Page with an active Slot

Change Password

Also Light Theme

---

✨ Key Features

• 🔐 Secure Auth: JWT authentication with auto-refresh, route guards, and session management.
• 📊 Dynamic Dashboard: Real-time statistics, charts (Chart.js), and role-based views.
• 📅 Slot Management: Create, delete, and manage training/meeting slots with one-click link copying.
• 👥 User Control: Admin panel for managing users, roles, and membership expiry.
• 🎨 Modern UI: Fully responsive design with Dark/Light mode support using Tailwind CSS.

---

🛠️ Tech Stack

• Framework: Angular 19
• Styling: Tailwind CSS 4
• Icons: Lucide Angular
• Visuals: Vanta.js, Three.js, Chart.js
• Notifications: ngx-toastr
• HTTP Client: Angular HttpClient (with Interceptors)

---

🚀 Getting Started

Follow these steps to set up the project locally.

1. Prerequisites

• Node.js (v18 or higher)
• Angular CLI (npm install -g @angular/cli)

2. Clone the Repository

git clone [https://github.com/MuhammadAsad878/TrainLink-Client-Angular.git](https://github.com/MuhammadAsad878/TrainLink-Client-Angular.git)
cd TrainLink-Client-Angular

3. Install Dependencies

npm install

4. Configure Environment

Create or update src/environments/environment.ts to point to your local or hosted backend API:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api' // Update this with your .NET Backend URL
};

5. Run the Application

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

---

🏗️ Architecture Overview

The application follows a modular architecture with strict separation of concerns:

src/app/
├── components/      # UI Components (Dashboard, Login, Slots)
├── services/        # API Communication & State Management
├── guards/          # Auth & Role-Based Route Protection
├── interceptors/    # JWT Token Injection & Error Handling
├── layouts/         # AuthLayout vs MainLayout
└── shared/          # Reusable UI elements (Loaders, Dialogs)

---

🤝 Contributing

Contributions are welcome! Please fork the repository and create a pull request for any features or bug fixes.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/NewFeature)
3. Commit your Changes (git commit -m 'Add NewFeature')
4. Push to the Branch (git push origin feature/NewFeature)
5. Open a Pull Request

---

👨‍💻 Author

Muhammad Asad

• Portfolio: calldevx.tech
• LinkedIn: Connect on LinkedIn

---

Made with ❤️ using Angular & .NET