📘 FindMyTutor – Tutor Discovery Platform

FindMyTutor is a fully responsive web platform that connects students with qualified tutors in their area. It features a searchable directory of tutors, detailed profiles, registration flows for both students and teachers, and an engaging home page with reviews and platform statistics.

HTML5 CSS3 JavaScript (ES6) Firebase Auth Responsive

🚀 Live Demo

Open index.html in any modern browser to start exploring.
Note: Firebase authentication is partially implemented; replace the configuration in login_page.html to enable full login functionality.

📖 Table of Contents

• Features
• Pages & Functionality
• Technologies Used
• Project Structure
• Getting Started
• Data Structure (allTutors)
• Firebase Setup
• Future Improvements
• License

✨ Features

🎓 For Students

• Browse popular tutors
• Search by location & subject
• Detailed tutor profiles
• Like & comment on reviews

🧑‍🏫 For Tutors

• Multi‑step registration
• Showcase certifications
• Languages, grades, demo video

⚙️ General

• Responsive design
• Animated stats counter
• Reviews slider
• Consistent footer

🧩 Pages & Functionality

Page	Description
index.html	Landing page with search bar, top tutors, platform stats, and a reviews slider.
search_teachers.html	Displays all tutors with “Show More” button; search filters are applied here.
teacher_profile.html	Dynamic profile page for a single tutor (uses ?id=... from data.js).
login_page.html	Dual‑tab login: Email/Password (Firebase) and Mobile OTP (demo).
register_student_teacher.html	Tabbed registration: one‑step for students, three‑step for teachers.

🛠 Technologies Used

• HTML5 – semantic structure
• CSS3 – gradients, animations, responsive layouts
• JavaScript (ES6) – dynamic rendering, event handling, Firebase integration
• Firebase (Auth) – email/password and phone authentication (demo OTP flow)
• Font Awesome & Google Fonts – icons and typography
• RandomUser.me – placeholder profile images

📁 Project Structure

findmytutor/
├── index.html               # Homepage
├── search_teachers.html     # Search results page
├── teacher_profile.html     # Dynamic tutor profile
├── login_page.html          # Login with Firebase
├── register_student_teacher.html # Registration page
├── style.css                # Global styles
├── script.js                # Main JavaScript (rendering, search, slider)
├── data.js                  # Master array of 16 tutors (allTutors)
└── README.md                # This file (original markdown)

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/your-username/findmytutor.git
   cd findmytutor

2. Open the project – simply open index.html in your browser. No build tools required.
3. Replace Firebase config (optional) – in login_page.html, replace the firebaseConfig object with your own Firebase project credentials to enable real authentication.

📊 Data Structure (allTutors)

All tutor data is stored in data.js as an array of objects. Each object contains:

{
  id: 1,
  name: "Priya Sharma",
  img: "url",
  location: "Rohini, Delhi, India",
  rating: 4.5,
  reviews: 128,
  experience: 5,
  subjects: ["Math", "Science"],
  genderIcon: "👩‍🏫",
  isPopular: true,
  qualification: "M.Sc (Physics), B.Ed",
  bio: "...",
  contact: { phone: "+91 9876543210", email: "..." },
  availability: "Mon-Fri (5 PM - 8 PM)",
  fees: "₹800/hr (Online)",
  languages: ["Hindi", "English"],
  grades: ["Class 9", "Class 10", ...],
  certifications: ["CBSE Certified Educator", ...],
  stats: { successRate: "98%", students: 128, rating: 4.5 },
  demo_video: "https://www.youtube.com/embed/...",
  linkedin: "https://linkedin.com/in/..."
}

<h2 id="firebase-setup">🔥 Firebase Setup</h2>

To enable real authentication:

1. Go to the Firebase Console and create a new project.
2. Enable Email/Password and Phone sign‑in methods.
3. Copy your web app's configuration (apiKey, authDomain, etc.).
4. Paste it into the firebaseConfig object in login_page.html:

   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     appId: "YOUR_APP_ID"
   };

🔮 Future Improvements

• Backend Integration – Replace static data.js with a database (Firestore, MongoDB).
• Real OTP – Implement Firebase phone authentication with reCAPTCHA.
• User Dashboard – Allow students to save favourite tutors and book sessions.
• Review System – Let students submit actual reviews.
• Payment Gateway – Integrate online fee payment.

📄 License

This project is for educational purposes. You are free to use and modify it as needed.

⚡ Made with ❤️ for students and tutors.
FindMyTutor · Project Documentation · 2025