Moinuddin-dotcom / language-learning-website

Lingo Bingo: A Vocabulary Learning Application

Features

1. Authentication

• Login/Sign-Up: Users can log in or sign up using their email and password.
• Google Social Login: Allows users to log in with Google for a seamless experience.
• Private Routes: Access to lessons, tutorials, and profile pages is restricted to authenticated users.

2. Vocabulary Learning

• A JSON dataset with 50-200 vocabulary words, including details like:
  • Word, pronunciation, meaning, part of speech, difficulty level, and usage examples.
• Cards with vocabulary information, color-coded by difficulty level (Easy, Medium, Difficult).
• Modal pop-ups for detailed examples and usage scenarios.

3. Lesson Management

• 10 structured lessons, each accessible via static cards.
• Private route enforcement ensures only logged-in users can access lesson pages.

4. Interactive Tutorials

• A dedicated Tutorials page with embedded YouTube videos for learning alphabets and advanced language topics.

5. User Dashboard

• My Profile page showing the user’s details like name, email, and photo.

6. Dynamic Home Page

• Banner/Slider: Features language learning images.
• Animated Success Section: Shows counts for users, lessons, and vocabulary with React Count-Up.
• Custom Sections: Extra sections with engaging designs.

7. Additional Features

• A 404 error page with a "Go Back Home" button for invalid routes.
• Responsive design for mobile and desktop users.
• Footer with contact details, social media links, and copyright notice.

Tech Stack

• Frontend: React.js, React Router, Tailwind CSS
• Backend: Firebase Authentication (for user management)
• Other Libraries:
  • React-Count-Up: For animated success counters.
  • AOS: For smooth animations.
  • Toastify: For error/success messages.