Lingo-Bingo Tailwind Templates

Lingo Bingo

Lingo Bingo is an interactive React-based single-page application designed to make vocabulary learning fun and effective. Featuring Firebase authentication, private routes, text-to-speech, YouTube tutorials, and responsive design, it supports multiple languages like Japanese, Spanish, and more.

Lingo Bingo: A Vocabulary Learning Application

Lingo Bingo is a fun and interactive single-page language learning application designed to help users expand their vocabulary and improve communication skills in multiple languages.


🎯 Project Purpose

The primary goal of this project is to make vocabulary learning simple and enjoyable by allowing users to learn words, their meanings, and pronunciations for a specific language. This application supports login functionality, private routes, and responsive design.


🌐 Live Demo

Visit the Live Site


🔑 Key Features

  • Interactive Vocabulary Learning:
    • Learn words categorized into lessons with details like pronunciation, meaning, and usage examples.
    • Embedded YouTube tutorials to learn alphabets and phrases of the selected language.
  • Authentication:
    • Firebase-powered login/registration with Google Social Login.
    • Private routes for secured content (e.g., lessons and tutorials).
  • Dynamic Content:
    • JSON-based language vocabulary with support for various languages (except Bengali and English).
    • Supports languages like Japanese, Spanish, Arabic, French, and more.
  • Responsive Design:
    • Fully responsive across mobile, tablet, and desktop devices.
  • Unique Design:
    • Creative header, footer, and layout.
    • Modal and animations powered by AOS and animate.css.
  • Extra Functionalities:
    • Password reset functionality.
    • Text-to-speech feature for vocabulary pronunciation.
    • Profile update functionality.

⚙️ Tech Stack

  • Frontend:
    • React.js
    • React Router
    • AOS/Animate.css for animations
    • HTML5, Tailwind CSS, Daisy-UI
  • Backend and Authentication:
    • Firebase

🔨 Setup Instructions

  1. Clone this repository:
    git clone https://github.com/RaiyanJiyon/Lingo-Bingo
    
  2. Navigate to the project directory:
    cd Lingo-Bingo
    
  3. Install dependencies:
    npm install
    
  4. Start the development server:
    npm start
    

📝 To-Do List

  • Add more language options.
  • Enhance UI/UX based on user feedback.
  • Add audio support for vocabulary pronunciation.

🤝 Contributions

Contributions are welcome! Feel free to fork this repository, make your changes, and submit a pull request.

Top categories

Loading Svelte Themes