https://github.com/uthso297/lingobingo
**Lingo Bingo** is an interactive German learning platform with customizable lessons, vocabulary cards, and real-time progress tracking. Built with React and Firebase, it offers secure login, responsive design, and engaging features like pronunciation, YouTube tutorials, and success animations. Perfect for learners of all levels.
https://github.com/uthso297/lingobingo
firebase reactjs tailwindcss
Last synced: 3 months ago
JSON representation
**Lingo Bingo** is an interactive German learning platform with customizable lessons, vocabulary cards, and real-time progress tracking. Built with React and Firebase, it offers secure login, responsive design, and engaging features like pronunciation, YouTube tutorials, and success animations. Perfect for learners of all levels.
- Host: GitHub
- URL: https://github.com/uthso297/lingobingo
- Owner: uthso297
- Created: 2024-12-02T18:22:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-04T20:43:50.000Z (over 1 year ago)
- Last Synced: 2025-04-23T21:14:08.171Z (about 1 year ago)
- Topics: firebase, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://assignment-09-60f57.web.app/
- Size: 1.99 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎓 Lingo Bingo – Your Ultimate German Learning Platform
## 🚀 Project Overview
Lingo Bingo is an innovative **German language learning platform** designed to provide an engaging and interactive learning experience. With a dynamic vocabulary system, customizable lessons, and real-time progress tracking, Lingo Bingo ensures effective language acquisition for learners of all levels.
## 🖼️ Screenshot
## 🛠️ Technologies Used
Lingo Bingo is built using modern web technologies to ensure **high performance, responsiveness, and a seamless learning experience**.
### **Frontend**
- **React** – For building an interactive user interface.
- **Tailwind CSS** – For responsive and modern styling.
### **Backend**
- **Firebase** – Authentication, data storage, and hosting.
### **Additional Integrations**
- **React CountUp** – For animated success tracking.
- **React Helmet Async** – For SEO optimization.
- **React Icons & Animations** – To enhance UI/UX with interactive elements.
### **10 Key Features of the Lingo Bingo Website**
1. **User Authentication**
- Secure login with **email/password** and **Google authentication**.
- Forgot password functionality.
2. **Responsive Design**
- Optimized for **mobile, tablet, and desktop** screens.
- User-friendly navigation with a single-page layout.
3. **Interactive Vocabulary Learning**
- Detailed vocabulary cards with images and meanings.
- Pronunciation feature: "Speak up your Vocabularies".
4. **Dynamic Lesson Pages**
- Organized lessons with vocabulary breakdowns.
- Customizable learning experience with language-specific vocabulary.
5. **Tutorial Page with YouTube Integration**
- Embedded video tutorials for effective learning.
6. **Profile Management**
- Private routes for profile updates and user data management.
7. **Success Stats & Animations**
- Progress tracking with **React CountUp animations**.
- Real-time feedback on user achievements.
8. **Error Handling & Page Redirection**
- Custom **404 error page** for undefined routes.
- Smooth redirection and friendly error messages.
9. **Hosting & Deployment**
- **Client-side** hosted on **Firebase**.
- **Data storage & authentication** handled via Firebase.
10. **Live Count & Feedback**
- Real-time tracking of learning progress.
- Interactive feedback system for user improvement.
---
### 🔹 **Core Dependencies**
| Dependency | Version | Description |
|------------|---------|-------------|
| `react` | ^18.3.1 | Core library for building UI components |
| `react-dom` | ^18.3.1 | Provides DOM-specific methods for React |
| `react-router-dom` | ^7.0.2 | Handles routing and navigation |
| `firebase` | ^11.0.2 | Authentication and real-time data storage |
| `react-toastify` | ^10.0.6 | Notifications and alerts |
| `sweetalert2` | ^11.14.5 | Custom pop-up alerts |
| `react-icons` | ^5.4.0 | Scalable vector icons |
| `react-tooltip` | ^5.28.0 | Tooltip for enhanced user experience |
| `react-helmet-async` | ^1.3.0 | SEO optimization |
| `react-countup` | ^6.2.0 | Animated number counting |
| `react-slick` | ^0.30.2 | Carousel and slider component |
| `slick-carousel` | ^1.8.1 | Smooth slider effects |
| `aos` | ^2.3.4 | Scroll animations |
| `prop-types` | ^15.8.1 | Type checking for React components |
---
# Lingo Bingo
### **Website Details**
- **Website Name:** Lingo Bingo
- **Live Website URL:** [https://assignment-09-60f57.web.app/](https://assignment-09-60f57.web.app/)
---
## 🏗️ Running the Project Locally
Follow these steps to set up and run **Lingo Bingo** on your local machine.
### 1️⃣ **Clone the Repository**
Download the project files by cloning the GitHub repository:
```sh
git clone https://github.com/your-username/lingo-bingo.git
cd lingo-bingo
```
### 2️⃣ **Install Dependencies**
Navigate to the project folder and install all required dependencies using:
```sh
npm install
```
### 3️⃣ **Set Up Environment Variables**
Create a `.env` file in the root directory and add the required environment variables:
```sh
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
```
### 4️⃣ **Start the APP**
Run the project in development mode with:
```sh
npm run dev
```