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.
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.
- Users can start learning with just a click.
- Log in with Firebase Authentication to access the vocabulary list.
- Explore curated French vocabulary lists to improve your language skills.
- Beautifully designed with Daisy UI and animations from Animate.css.
- Interactive UI with animations from AOS (Animate on Scroll) and React Typing Effect.
- Engaging counters and progress visualizations powered by React CountUp.
- Seamless navigation using the React Scroll-to-Top package.
- Fully responsive and mobile-friendly, ensuring an optimal experience on all devices.
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/NajibHossain49/LinBo.git cd LinBo cd lingo-bingo
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
- 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.
- 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.
- Reusable and clean component structure to build the UI.
- Efficiently managing UI states like loading animations, user login, and vocabulary data.
- Fetching data and handling side effects, such as animations and Firebase interactions.
- Single-page navigation for seamless transitions between components.
- Integrating animation libraries like React Typing Effect, React CountUp, and React Icons.
- Firebase Authentication ensures user data is safe and only authenticated users can access vocabulary lists.
- Interactive vocabulary lists dynamically loaded for personalized learning.
- UI elements animated with AOS and React Typing Effect, making the learning experience lively and engaging.
- Progress tracking with smooth counter animations using React CountUp.
- Back-to-top functionality using React Scroll-to-Top, enabling effortless navigation on long pages.
The application leverages the following npm packages:
- animate.css@4.1.1: Predefined CSS animations.
- aos@2.3.4: Scroll animations for a dynamic user experience.
- daisyui@4.12.14: Tailwind CSS-based UI components.
- firebase@11.0.2: Authentication and database integration.
- lucide-react@0.460.0: A React-based icon library.
- react-countup@6.5.3: Counter animations.
- react-icons@5.3.0: UI icons.
- react-scroll-to-top@3.0.0: Back-to-top functionality.
- react-typing-effect@2.0.5: Typing animations.
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.
-
Project Documentation: Link
-
Live Link-1: Live Demo 🌐
-
Live Link-2: Live Demo 🌐
Developed with ❤️ by Najib Hossain
GitHub | LinkedIn
If you like this project, please ⭐ the repository and share it with others!