An interactive word learning platform where users can explore words, listen to their pronunciation, and understand their usage through engaging modals and word cards.
✅ Word Categories – Users can explore words by category.
✅ Word Cards – Displays the word, its meaning, part of speech, and pronunciation.
✅ Interactive Modals – Provides example usage for better understanding.
✅ Word Pronunciation – Integrated with browser's Speech Synthesis API.
✅ Dynamic Data Fetching – Uses external JSON files (categories.json
, product.json
).
✅ Private Routes – Restricts access to specific pages for authenticated users.
✅ Seamless Navigation – No reload required while navigating.
✅ Secure Authentication System – Ensures safe user access through Firebase authentication.
- Frontend: React, Tailwind CSS, DaisyUI
- Routing: React Router
- State Management: React
useState
,useEffect
- Authentication: Firebase Auth
Package | Version |
---|---|
react |
^18.3.1 |
react-router-dom |
^6.27.0 |
tailwindcss |
^3.4.14 |
daisyui |
^4.12.14 |
firebase |
Latest |
🔗 Live Website: Lingo Bingo
# Clone the repository
git clone https://github.com/programming-hero-web-course1/b10-a9-authentication-alazim-star.git
# Navigate to the project directory
cd lingo-bingo
# Install dependencies
npm install
# Start the development server
npm run dev
📜 Documentation
📄 Project Document: View Here
🏆 Contributing
Contributions are welcome! Feel free to submit a pull request.