Learn Lingo

This project is an application that will help users learn languages with their favorite speakers.

Table of Contents

• Features
• Technologies
• Getting Started
• Installation

Features

• Registration, login, to get the current user, logout users.

  

• A "Home" page with a list of company benefits and a link to get started with the application and redirect to the "Teachers" page. Stylization is implemented with different palette variations.

  

• Rendering of the list of cards. Four cards are rendered on the "Teachers" page, and the rest are loaded by clicking on the button "Load more".

  

• Mark cars as favorites. A private "Favorites" page is available for an authorized user, when going to which the user has the opportunity to view all teacher cards that he has added to "favorites".

• A card with description of the teacher`s characteristics. When you click on the button "Read more", the card opens with more detailed information about the teacher and feedback from his students. If you click on the button "Book trial lesson", a modal window opens with a form for booking a trial class. The modal window is closed by clicking on the button in the form of a "cross", by clicking on the backdrop or pressing the Esc key.

  

• Filtering by the language of instruction, by the level of students`knowledge and by the price per lesson hour.

  

Technical task https://docs.google.com/document/d1ZB_MFgnnJj7t7OXtv5hESSwY6xRgVoACZKzgZczWc3Y/edit Figma layout https://www.figma.com/file/dewf5jVviSTuWMMyU3d8Mc/Learn-Lingo?type=design&node-id=0-1&mode=design&t=SVW3nqE3y6WazVGo-0

Technologies

• React.js - for frontend implementation

• Firebase - backend

• Firebase Realtime Database - database

• Redux Toolkit - to store the state of the components

• Styled Components- application styling

• Redux-persist - data storage of the current user

• Formik & Yup- forms and validation

• React-hot-toast - pop-up messages

• React-modal - modal windows

(back to top)

Getting Started

To get started with this project, follow installation instructions below

Installation

1. Clone the repo

   git clone https://github.com/oksanamarusich/Learn-Lingo.git

2. Install NPM packages

   npm install

3. Start the development server

   npm start

4. Open https://oksanamarusich.github.io/Learn-Lingo/ to view in the browser

(back to top)