Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/najibhossain49/linbo
LinBo: A Vocabulary Learning Application
https://github.com/najibhossain49/linbo
apis daisyui firebase-auth jsavascript npm-package react-router reactjs tailwindcss
Last synced: 2 days ago
JSON representation
LinBo: A Vocabulary Learning Application
- Host: GitHub
- URL: https://github.com/najibhossain49/linbo
- Owner: NajibHossain49
- Created: 2024-11-20T13:12:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-12-14T17:49:15.000Z (about 2 months ago)
- Last Synced: 2024-12-14T18:30:32.387Z (about 2 months ago)
- Topics: apis, daisyui, firebase-auth, jsavascript, npm-package, react-router, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://lingo-bingo-vocab.web.app/
- Size: 5.77 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 LinBo: A Vocabulary Learning Application
## 🚀 Project Overview
**LinBo** is a fun and interactive **French language learning** application designed to help users expand their vocabulary and improve their communication skills. With a user-friendly interface and gamified approach, this application makes learning enjoyable and retention of vocabulary easier.
[Live Demo 🌐](https://lingo-bingo-vocab.web.app/)
---
## 🎯 Purpose
Learning a new language, especially vocabulary, can be daunting. Lingo Bingo simplifies the process by offering:
- A seamless login system powered by **Firebase Authentication**.
- Vocabulary tailored to **French learners**.
- Fun animations and interactive features to make learning engaging.
---
## ✨ Key Features
### 🏁 Easy Onboarding
- Users can start learning with just a click.
- Log in with **Firebase Authentication** to access the vocabulary list.
### 📚 Vocabulary Practice
- Explore curated French vocabulary lists to improve your language skills.
### 🎨 User-Friendly Interface
- Beautifully designed with **Daisy UI** and animations from **Animate.css**.
### 🚀 Smooth Animations
- Interactive UI with animations from **AOS (Animate on Scroll)** and **React Typing Effect**.
### 📈 Gamified Learning
- Engaging counters and progress visualizations powered by **React CountUp**.
### 🔝 Scroll Back to Top
- Seamless navigation using the **React Scroll-to-Top** package.
### 📱 Responsive Design
- Fully responsive and mobile-friendly, ensuring an optimal experience on all devices.
---
## ⚙️ Installation and Setup
To get started with the project, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/NajibHossain49/LinBo.git
cd LinBo
cd lingo-bingo
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
---
---
## 🛠️ Technologies & Concepts Used
### **Technologies**
- **React.js**: Core framework for building the single-page application.
- **Firebase**: Authentication and backend support.
- **Tailwind CSS**: For responsive design and utility-first styling.
- **DaisyUI**: Tailwind CSS-based component library.
- **Animate.css** & **AOS**: Animation libraries for enhancing UI interactivity.
### **Concepts**
- **Responsive Design**: Ensuring the application adapts to different screen sizes.
- **Component-Based Architecture**: Reusable and modular UI components in React.
- **State Management**: Efficiently managing data flow within the application.
- **Authentication**: Secure user login and access control with Firebase.
---
## 🛠️ React Concepts Used
### 1️⃣ **Functional Components**
- Reusable and clean component structure to build the UI.
### 2️⃣ **State Management with useState**
- Efficiently managing UI states like loading animations, user login, and vocabulary data.
### 3️⃣ **useEffect Hook**
- Fetching data and handling side effects, such as animations and Firebase interactions.
### 4️⃣ **React Router**
- Single-page navigation for seamless transitions between components.
### 5️⃣ **Third-Party Integrations**
- Integrating animation libraries like **React Typing Effect**, **React CountUp**, and **React Icons**.
---
## 🛡️ Features in Detail
### 🔐 Secure Login
- Firebase Authentication ensures user data is safe and only authenticated users can access vocabulary lists.
### 📖 Vocabulary Display
- Interactive vocabulary lists dynamically loaded for personalized learning.
### 🎢 Smooth Animations
- UI elements animated with **AOS** and **React Typing Effect**, making the learning experience lively and engaging.
### 📊 Real-Time Counters
- Progress tracking with smooth counter animations using **React CountUp**.
### 🔝 Intuitive Navigation
- Back-to-top functionality using **React Scroll-to-Top**, enabling effortless navigation on long pages.
---
## 📦 Dependencies
The application leverages the following npm packages:
- **[[email protected]](https://animate.style/)**: Predefined CSS animations.
- **[[email protected]](https://michalsnik.github.io/aos/)**: Scroll animations for a dynamic user experience.
- **[[email protected]](https://daisyui.com/)**: Tailwind CSS-based UI components.
- **[[email protected]](https://firebase.google.com/)**: Authentication and database integration.
- **[[email protected]](https://lucide.dev/)**: A React-based icon library.
- **[[email protected]](https://www.npmjs.com/package/react-countup)**: Counter animations.
- **[[email protected]](https://react-icons.github.io/react-icons/)**: UI icons.
- **[[email protected]](https://www.npmjs.com/package/react-scroll-to-top)**: Back-to-top functionality.
- **[[email protected]](https://www.npmjs.com/package/react-typing-effect)**: Typing animations.
---
## 💡 What You Need to Know
Before building this application, you should be familiar with:
- **React.js** for building and structuring single-page applications.
- **Firebase** for handling user authentication and real-time database.
- **Tailwind CSS** and **DaisyUI** for efficient and responsive styling.
- **Third-party npm packages** for adding animations and interactive features.
---
## 💡 Alternate Links
- **Project Documentation**: [Link](https://docs.google.com/document/d/1BKueQQMgAm8tBDrEeC_g0VZw9Ls773p2oD9EAARLX3Y/edit?tab=t.0)
- **Live Link-1**: [Live Demo 🌐](https://linbo.netlify.app/)
- **Live Link-2**: [Live Demo 🌐](https://linbo.surge.sh/)
---
## 🧑💻 Author
Developed with ❤️ by **Najib Hossain**
[GitHub](https://github.com/NajibHossain49) | [LinkedIn](https://www.linkedin.com/in/md-najib-hossain/)
---
## 🌟 Show Your Support
If you like this project, please ⭐ the repository and share it with others!