https://github.com/mahimdev/arabic-vocabulary-learn
Arabic Vocabulary is an interactive learning platform designed to make learning Arabic accessible, engaging, and effective for everyone.
https://github.com/mahimdev/arabic-vocabulary-learn
Last synced: about 1 year ago
JSON representation
Arabic Vocabulary is an interactive learning platform designed to make learning Arabic accessible, engaging, and effective for everyone.
- Host: GitHub
- URL: https://github.com/mahimdev/arabic-vocabulary-learn
- Owner: mahimDev
- Created: 2025-01-09T15:01:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T10:08:01.000Z (over 1 year ago)
- Last Synced: 2025-02-17T23:41:40.456Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://arabic-vocabulary-94d04.web.app/
- Size: 175 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **📚 Arabic Vocabulary Learning Website**
🌍 **An interactive platform to master Arabic vocabulary with engaging animations and exercises!**
---
## **🔗 Live Demo**
👉 [Arabic Vocabulary](https://arabic-vocabulary-94d04.web.app/)
---
## **🚀 Project Overview**
The **Arabic Vocabulary Learning Website** helps users expand their Arabic vocabulary in a fun and interactive way. The platform includes animations, quizzes, and progress tracking to make learning engaging.
📌 **Key Highlights:**
✅ Smooth animations for an engaging experience
✅ User authentication & progress tracking
✅ Interactive vocabulary quizzes
✅ Responsive & mobile-friendly design
---
## **🛠️ Technologies Used**
**Category**
**Technologies**
**Frontend**
React, React Router DOM, Tailwind CSS
**Backend**
Firebase (Authentication)
**UI/Animations**
Animate.css, AOS, Swiper
**Utilities**
SweetAlert2, React Icons, React Fast Marquee
---
## **📸 Screenshot**
## **🔥 Features**
✅ **User Authentication** – Secure login & signup using Firebase
✅ **Vocabulary Learning & Quizzes** – Interactive exercises to test knowledge
✅ **Animated UI Elements** – Engaging animations using AOS & Animate.css
✅ **Progress Tracking** – Keep track of learned words and quizzes taken
✅ **Mobile-Friendly Design** – Works seamlessly on all devices
---
## **📦 Dependencies**
```json
"dependencies": {
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"firebase": "^11.0.2",
"localforage": "^1.10.0",
"match-sorter": "^8.0.0",
"react": "^18.3.1",
"react-countup": "^6.5.3",
"react-dom": "^18.3.1",
"react-fast-marquee": "^1.6.5",
"react-helmet": "^6.1.0",
"react-icons": "^5.3.0",
"react-router-dom": "^6.28.0",
"react-snowfall": "^2.1.1",
"sort-by": "^1.2.0",
"sweetalert2": "^11.14.5",
"swiper": "^11.1.14"
}
```
---
## **💻 How to Run the Project Locally**
1️⃣ **Clone the repository**
```bash
git clone https://github.com/mahimDev/arabic-vocabulary-learn.git
```
2️⃣ **Navigate to the project directory**
```bash
cd arabic-vocabulary-learn
```
3️⃣ **Install dependencies**
```bash
npm install
```
4️⃣ **Start the development server**
```bash
npm run dev
```