Learn-lingo

Learn-lingo is a responsive React application designed to help users find language tutors for foreign language learning. It offers a wide range of features including tutor filtering, theming, and trial lesson booking.

✨ Features

• 🔍 Filter tutors by:
  • Language
  • Level of knowledge
  • Hourly price
• ⭐ Add tutors to favorites (requires authentication)
• 📅 Book a free trial lesson
• 🎨 Switch between 5 color themes
• 🔐 Firebase authentication and user data management
• 🧠 Form validation using react-hook-form and yup
• ⚛️ State management using Redux Toolkit
• 🌐 Routing with react-router-dom

📐 Design

You can view the design prototype on Figma: 👉 View Figma Design

🧪 Tech Stack

• React 19
• Redux Toolkit
• Firebase
• React Hook Form + Yup
• Vite
• TypeScript
• ESLint
• React Router v7
• Modern Normalize
• Theme management with CSS Modules and clsx
• Gsap

📁 Project Structure

src/
├── components/     # Reusable components
├── firebase/       # Firebase configurations
├── pages/          # Custom hooks
├── redux/          # Redux slices and store config
├── styles/         # Styles configurations and variables
├── utils/          # Helper functions & Custom hooks
└── App.tsx         # App entry point

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/EevgenK/LearnLingo
cd learn-lingo

2. Install dependencies:

npm instal

3. Start the development server:

npm run dev

4. Build the project for production:

npm run build

👤 Author

Evgen Kulbachenko

👉 More works and contact info