A comprehensive mentoring platform built with Angular and Firebase, designed to connect mentees with expert mentors for professional growth and knowledge sharing.
- User Roles: Distinct roles for mentees, mentors, and administrators
- Mentor Profiles: Detailed mentor profiles with expertise, experience, and availability
- Session Booking: Easy scheduling of mentoring sessions
- Calendar Integration: Google Calendar integration for seamless scheduling
- Feedback System: Rating and feedback mechanism for mentoring sessions
- Search & Discovery: Advanced search functionality to find the right mentor
- Availability Management: Mentors can manage their availability slots
- Session Tracking: Track all mentoring sessions and requests
- Data Analytics: Dashboard for mentors to track their performance
- Responsive UI: Modern, responsive interface using TailwindCSS and PrimeNG
- Firebase Integration: Authentication, Firestore database, and storage
- Real-time Updates: Live updates for mentorship requests and sessions
- Custom UI Components: Custom loader, navigation, and toast notifications
- Data Seeding: Built-in database seeding for development
- Frontend: Angular 20.3.6
- Styling: TailwindCSS, DaisyUI, PrimeNG
- Backend Services: Firebase (Auth, Firestore, Storage)
- State Management: RxJS Observables
- Build Tools: Angular CLI, Webpack
- UI Components: Material UI, PrimeIcons
- Date Picker: Flatpickr
- Notifications: SweetAlert2
- Data Visualization: Chart.js (via PrimeNG)
- Testing: Jasmine, Karma
- Node.js (v16 or higher)
- npm or yarn
- Angular CLI
- Firebase account
-
Clone the repository:
git clone https://github.com/yourusername/mentoring-app.git cd mentoring-app -
Install dependencies:
npm install
-
Set up Firebase:
- Create a Firebase project at Firebase Console
- Add your Firebase configuration to
src/environments/environment.tsandsrc/environments/environment.prod.ts - Enable Authentication, Firestore Database, and Storage services
-
Run the development server:
ng serve
-
Access the application: Open your browser to
http://localhost:4200
For a complete development environment:
# Install all dependencies including dev tools
npm install --save-dev
# Set up environment variables
cp .env.example .env
# Run tests
ng test
# Build for production
ng build --prodThe application features a role-based navigation system:
// Example route configuration from app.routes.ts
{
path: 'mentee',
loadChildren: () => import('../app/features/mentee/mentee-routing-module').then(m => m.MENTEE_ROUTES),
canActivate: [AuthGuard, RoleGuard],
data: { authGuardPipe: redirectToLogin, roles: ['mentee'] }
}- Sign In: Users can sign in with email/password or Google
- Role Selection: New users select their role (mentee/mentor)
- Profile Completion: Users complete their profile based on their role
// Example service method to get mentor profile
getFullMentorProfileById(mentorId: string): Observable<any> {
// Implementation using Firestore
}- Search for mentors by expertise, location, or availability
- View mentor profiles and availability
- Book sessions with preferred mentors
Searching for Mentors:
// Using the MentorService
async searchMentors(keyword: string): Promise<any[]> {
// Implementation using Firestore query
}Booking a Session:
// Using the MentorService
async bookSlot(formValue: any): Promise<void> {
// Implementation using Firestore
}mentoring-app/
├── src/
│ ├── app/
│ │ ├── core/ # Core services, guards, and utilities
│ │ ├── features/ # Feature modules (auth, mentor, mentee, admin)
│ │ ├── shared/ # Shared components and interfaces
│ │ ├── app.component.ts # Main application component
│ │ ├── app.routes.ts # Routing configuration
│ │ └── app.config.ts # Application configuration
│ ├── assets/ # Static assets
│ ├── environments/ # Environment configuration
│ └── index.html # Main HTML template
├── public/ # Public assets
├── .editorconfig # Editor configuration
├── .gitignore # Git ignore rules
├── angular.json # Angular configuration
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation
Create a .env file in your project root with the following variables:
FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_auth_domain
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_sender_id
FIREBASE_APP_ID=your_app_id
Update your environment files:
// src/environments/environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
}
};
Thanks to my pair Daniel Mengote for colaboration with this project and to Angular PH Mentors.