LearnLingo is a modern Vite + React single‑page app that helps learners discover language tutors, explore detailed profiles and reviews, and book a trial lesson. Authentication is powered by Firebase. Forms are built with react‑hook‑form and validated with Yup. Favorites are persisted per user in Firebase and survive page refreshes.
- ✅ Three pages:
Home,Teachers,Favorites - 🔐 Auth with Firebase: registration, login, logout (modals)
- 🧠 Strong form UX: react-hook-form + Yup, all fields required
- 🗂️ Teachers list with filters (language, level, price) and server‑aware pagination
- ❤️ Favorites per authorized user (stored in Firebase), persisted between sessions
- 🔍 “Read more” expands rich teacher details with reviews
- 📅 “Book trial lesson” opens a validated booking form
- ♿ Modal UX: close by cross, backdrop click, or Esc key
- 🧭 Protected routes for
TeachersandFavorites - ⚡ Vite dev server, production build ready for Vercel
Note: In this implementation,
TeachersandFavoritesroutes are gated behind auth. Unauthorized users attempting to favorite a teacher are prompted appropriately.
- Vite 7
- React 19
- React Router 7 (using
react-routerpackage) - Firebase (Auth + Realtime Database)
- react-hook-form + @hookform/resolvers
- Yup validation
- ESLint 9
src/
App.jsx # App shell + route outlet
main.jsx # Router, routes, protected pages
components/
Header.jsx # Top navigation + auth modals
modals/
login.jsx # Login modal (Esc/backdrop/cross to close)
registration.jsx # Registration modal
teachersPage/
CardList.jsx # 4-per-page list + Load more
Card.jsx # Teacher card (read more, favorite, book)
BookTrialLesson.jsx# Booking form modal (validated)
filters/TeacherFilter.jsx
favouritePage/
... # Favorites page UI helpers (shared styles via Card)
pages/
HomePage.jsx # Marketing hero + stats
TeachersPage.jsx # Filters + list
FavoritesPage.jsx # User’s favorites (authorized only)
db/
dbInit.js # Firebase App/Auth/DB/Analytics
auth.js # Sign in/up/out, session, favorites API
teachers.js # DB queries, pagination, filtering
utilities/
validations.js # Yup schemas
localStorage.js # Session helpers
pageAuthorization.jsx# Route guard
constants/ImportedImages.js
- Displays 4 cards initially; click “Load more” to fetch the next page.
- Filters: language, level, exact price per hour.
- Under the hood (
src/db/teachers.js):- Uses Firebase Realtime Database queries.
- Applies one primary server-side filter (price) where possible.
- Applies secondary filters (language/level) client-side for robust results.
- Cursor-based pagination ensures no duplicates between pages.
Expected teachers collection shape (flexible; arrays or keyed objects supported):
{
"teachers": {
"0": {
"name": "Jane",
"surname": "Doe",
"avatar_url": "https://...",
"languages": ["english", "spanish"],
"levels": ["A1 Beginner", "A2 Elementary"],
"price_per_hour": 20,
"lessons_done": 122,
"rating": 4.9,
"lesson_info": "Personalized 1:1 online lessons",
"conditions": ["First lesson free"],
"experience": "5+ years teaching adults",
"reviews": [
{
"reviewer_name": "Alex",
"reviewer_rating": 5,
"comment": "Amazing lesson!"
}
]
}
}
}- Only authorized users can add/remove favorites.
- Stored at
users/{uid}/favoritesin Firebase Realtime Database. - UI state syncs live via a subscription; selections persist after refresh.
- Login and registration live in modals.
- Validation via Yup; all fields are required.
- Each modal closes via cross icon, backdrop click, or Esc key.
Session is stored in localStorage for quick gating and is synced with Firebase Auth state.
- Node.js 18+ (20+ recommended)
- npm 9+
npm installCreate .env.local in the project root with your Firebase web API key:
VITE_FIREBASE_API_KEY=YOUR_FIREBASE_WEB_API_KEYOther Firebase config values are already embedded in src/db/dbInit.js for the LearnLingo project. If you fork this app for your own Firebase project, update authDomain, databaseURL, projectId, etc. accordingly.
npm run devnpm run build
npm run previewnpm run lint # Run ESLint- Push the repository to GitHub/GitLab.
- Create a new Vercel project and import the repo.
- Set Environment Variables:
VITE_FIREBASE_API_KEY
- Build settings:
- Install Command:
npm ci(ornpm install) - Build Command:
npm run build - Output Directory:
dist
- Install Command:
- Deploy. Vercel will serve the SPA and fallback routes automatically.
/teachers and /favorites are protected with a simple authorization wrapper (src/utilities/pageAuthorization.jsx). Unauthorized users are redirected to Home until they sign in.
- Keyboard users can close modals with
Esc. - Focus order and visual indicators are preserved by default components and styles.
- Images include
alttext; decorative icons avoid noise.
- React Router v7 single package (
react-router) for modern routing. - Realtime Database querying favors correctness and pagination consistency; secondary filters are applied client‑side for flexibility.
- Favorites live in Firebase (not only localStorage) to keep state consistent across devices and refreshes.
Issues and PRs are welcome. If you plan significant changes (e.g., switching DB, adding SSR), please open an issue first to discuss the approach.
This project currently ships without an explicit license. If you intend to use it beyond learning or evaluation, consider adding a license file (e.g., MIT) to the repository.
- Built with Vite and React
- Firebase Auth & Realtime Database
- react-hook-form & Yup for forms and validation