LearnLingo

Online language tutoring platform — teacher catalog, Firebase auth, favorites and trial lesson booking.

 

Overview

LearnLingo is the frontend for an online language-tutoring company. Visitors browse the teacher catalog, narrow it down with filters, save favorites across sessions, read student reviews and book a trial lesson — all built as a course project for the GoIT Frontend Development program.

The UI follows the Figma-based mockup supplied with the assignment (Learn Lingo/ folder in this repo).

Live Demo

Production	learnlingo-nu.vercel.app
Repository	github.com/kutluhangil/LearnLingo

Features

• Home page — hero with a "Get started" call to action and a stats section, matching the supplied mockup.
• Teachers catalog — cards with avatar, languages, rating, lessons done, price and CEFR level badges; "Read more" expands the card with the tutor's bio and student reviews.
• Filtering — language, level of knowledge and price per hour, resolved against the loaded teacher set.
• Pagination — "Load more" re-queries Firebase Realtime Database for the next batch of teachers.
• Favorites — toggled from any card, persisted to localStorage, restored on reload; guests are prompted to log in first.
• Authentication — email/password registration and login via Firebase Auth, with react-hook-form + yup validation and session persistence across reloads.
• Trial lesson booking — a modal form (reason, name, email, phone) that writes the request to Firebase Realtime Database.
• Modals — Login, Registration and Book Trial Lesson all close via the close icon, a backdrop click or the Esc key.

Tech Stack

Layer	Choice
Build tool	Vite
UI library	React 19
Routing	React Router 7
Forms & validation	React Hook Form + Yup
Auth & database	Firebase Authentication + Realtime Database
Styling	Tailwind CSS 4
Deployment	Vercel

Backend

Data is served from a Firebase Realtime Database instance:

GET  /teachers.json          # teacher catalog (name, languages, levels, price, reviews, ...)
POST /trialBookings.json     # trial lesson booking requests

Authentication (registration, login, session, logout) runs through Firebase Authentication's email/password provider.

Routes

Path	Page
/	Home
/teachers	Teacher catalog with filters
/favorites	Favorited teachers (requires login)
*	Not found

Getting Started

Requires Node.js 20 or newer and a Firebase project (Authentication + Realtime Database enabled).

npm install                # install dependencies
cp .env.example .env       # fill in your Firebase project config
node scripts/seedTeachers.mjs   # seed the teachers collection from teachers.json
npm run dev                # start the dev server on http://localhost:5173
npm run build               # production build into dist/
npm run preview             # preview the production build
npm run lint                 # lint the source

Project Structure

src/
├── components/    UI components (Header, Modal, TeacherCard, filter bar, auth modals, ...)
├── pages/         route-level components (Home, Teachers, Favorites, NotFound)
├── context/       AuthContext — Firebase auth state provider
├── hooks/         useFavorites — localStorage-backed favorites
├── lib/           firebase client, teachers data layer, yup validation schemas
└── assets/        images and icons

Author

Kutluhan Gil GitHub

Built as part of the GoIT Frontend Development program.

_{MIT Licensed — see LICENSE}