Update README.md
This commit is contained in:
parent
5e90282968
commit
0d939d4f14
248
README.md
248
README.md
@ -53,241 +53,6 @@
|
||||
4. Follow the installation prompts
|
||||
5. Launch the app and start learning!
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
### Core Technologies
|
||||
|
||||
- **[React Native 0.76.5](https://reactnative.dev/)** - Cross-platform mobile framework
|
||||
- **[TypeScript 5.0.4](https://www.typescriptlang.org/)** - Type-safe JavaScript
|
||||
- **[React 18.3.1](https://react.dev/)** - UI library
|
||||
|
||||
### State Management & Data
|
||||
|
||||
- **[Zustand 5.0.8](https://github.com/pmndrs/zustand)** - Lightweight state management with persistence
|
||||
- **[Apollo Client 3.13.5](https://www.apollographql.com/docs/react/)** - GraphQL client
|
||||
- **[AsyncStorage](https://react-native-async-storage.github.io/async-storage/)** - Local data persistence
|
||||
|
||||
### Navigation & UI
|
||||
|
||||
- **[React Navigation 7.x](https://reactnavigation.org/)** - Navigation library
|
||||
- **[React Native Reanimated 3.17](https://docs.swmansion.com/react-native-reanimated/)** - Smooth animations
|
||||
- **[React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)** - Material Design icons
|
||||
- **[React Native SVG](https://github.com/software-mansion/react-native-svg)** - SVG support
|
||||
|
||||
### Audio & Media
|
||||
|
||||
- **[react-native-audio-recorder-player](https://github.com/hyochan/react-native-audio-recorder-player)** - Audio recording & playback
|
||||
- **[react-native-sound-player](https://github.com/johnsonsu/react-native-sound-player)** - Audio playback
|
||||
- **[react-native-fast-image](https://github.com/DylanVann/react-native-fast-image)** - Optimized image loading
|
||||
|
||||
### Internationalization
|
||||
|
||||
- **[react-i18next](https://react.i18next.com/)** - Multi-language support (Arabic/English)
|
||||
|
||||
---
|
||||
|
||||
## 💻 Development Setup
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- **Node.js** >= 18
|
||||
- **Bun** (latest version) or npm
|
||||
- **React Native CLI**
|
||||
- **Android Studio** (for Android development)
|
||||
- **Xcode** (for iOS development, macOS only)
|
||||
|
||||
### Installation
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd ILQ
|
||||
```
|
||||
|
||||
2. **Install dependencies**
|
||||
```bash
|
||||
bun install
|
||||
# or
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Install iOS dependencies** (macOS only)
|
||||
```bash
|
||||
cd ios
|
||||
pod install
|
||||
cd ..
|
||||
```
|
||||
|
||||
4. **Start Metro bundler**
|
||||
```bash
|
||||
bun start
|
||||
# or
|
||||
npm start
|
||||
```
|
||||
|
||||
5. **Run the app**
|
||||
|
||||
**For Android:**
|
||||
```bash
|
||||
bun run android
|
||||
# or
|
||||
npm run android
|
||||
```
|
||||
|
||||
**For iOS:**
|
||||
```bash
|
||||
bun run ios
|
||||
# or
|
||||
npm run ios
|
||||
```
|
||||
|
||||
### Build Scripts
|
||||
|
||||
```bash
|
||||
# Development
|
||||
bun start # Start Metro bundler
|
||||
bun run android # Run on Android
|
||||
bun run ios # Run on iOS
|
||||
|
||||
# Testing
|
||||
bun test # Run tests
|
||||
bun run lint # Run ESLint
|
||||
|
||||
# Production
|
||||
bun run build:android # Build Android APK
|
||||
bun run build:ios # Build iOS IPA
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
ILQ/
|
||||
├── src/
|
||||
│ ├── api/ # External API integrations
|
||||
│ │ ├── quran_mp3.ts # Quran audio URL provider
|
||||
│ ├── assets/ # Static assets (fonts, images)
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ │ ├── AudioRecorder.tsx # Voice recording component
|
||||
│ │ ├── VersePlayer.tsx # Audio playback + text sync
|
||||
│ │ ├── ArabicTextDisplay.tsx # Text with evaluation overlay
|
||||
│ │ └── AnimatedArabicWord.tsx # Word-level animations
|
||||
│ ├── gql/ # GraphQL queries & mutations
|
||||
│ │ ├── queries.ts # SORAT, AYAT, AYA queries
|
||||
│ │ ├── mutations.ts # EVALUATE mutation
|
||||
│ │ └── types.d.ts # GraphQL type definitions
|
||||
│ ├── hooks/ # Custom React hooks
|
||||
│ ├── i18n/ # Internationalization
|
||||
│ │ ├── config.ts # i18next setup
|
||||
│ │ └── locales/ # Translation files (ar.json, en.json)
|
||||
│ ├── routes/ # Navigation structure
|
||||
│ ├── screens/ # Screen components
|
||||
│ │ ├── AyaPage.tsx # Verse learning/practice screen
|
||||
│ │ ├── SoratScreen.tsx # Chapter carousel browser
|
||||
│ │ ├── ProgressScreen.tsx # Learning statistics
|
||||
│ │ └── SettingsScreen.tsx # App settings
|
||||
│ ├── services/ # Business logic
|
||||
│ │ └── progressService.ts # Progress tracking & analytics
|
||||
│ ├── stores/ # Zustand state management
|
||||
│ │ ├── useLanguageStore.ts # Language preference
|
||||
│ │ ├── useThemeStore.ts # Theme mode
|
||||
│ │ └── useVersePlayerStore.ts # Audio playback state
|
||||
│ ├── theme/ # Design system
|
||||
│ │ ├── colors.ts # Light/dark color palettes
|
||||
│ │ └── styleHelpers.ts # Style utilities
|
||||
│ ├── types/ # TypeScript definitions
|
||||
│ └── utils/ # Utility functions
|
||||
├── android/ # Android native code
|
||||
├── ios/ # iOS native code
|
||||
├── App.tsx # Root component
|
||||
└── index.js # App entry point
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 How It Works
|
||||
|
||||
### 1. **Browse Quran Chapters**
|
||||
Navigate through 114 Suras with a beautiful carousel interface featuring background images and smooth animations.
|
||||
|
||||
### 2. **Learn Verses**
|
||||
- Listen to professional Quranic recitation
|
||||
- Follow along with word-by-word highlighting
|
||||
- View transliteration for pronunciation help
|
||||
- Read verse meanings in English
|
||||
|
||||
### 3. **Practice Recitation**
|
||||
- Record your recitation using the microphone button
|
||||
- AI analyzes your pronunciation against the original text
|
||||
- Get word-level accuracy scores (0-100%)
|
||||
- Review detailed feedback on mispronounced words
|
||||
|
||||
### 4. **Track Progress**
|
||||
- View statistics on total words practiced
|
||||
- Monitor mispronunciation percentage
|
||||
- See most practiced Suras and verses
|
||||
- Track improvement over time
|
||||
|
||||
---
|
||||
|
||||
## 🔑 Key Components
|
||||
|
||||
### AyaPage (Verse Learning Screen)
|
||||
The main practice screen where users:
|
||||
- Listen to verse audio with synchronized highlighting
|
||||
- Record and evaluate their recitation
|
||||
- View evaluation results with color-coded accuracy
|
||||
- Access verse meanings and transliteration
|
||||
|
||||
### AudioRecorder
|
||||
Handles voice recording with:
|
||||
- High-quality audio capture (44.1kHz, 128kbps)
|
||||
- Real-time recording timer
|
||||
- Automatic upload to evaluation backend
|
||||
- Playback of recorded audio
|
||||
|
||||
### VersePlayer
|
||||
Manages audio playback with:
|
||||
- Word-level synchronization using time segments
|
||||
- Play/pause/replay controls
|
||||
- Animated word highlighting
|
||||
- Progress tracking
|
||||
|
||||
### AnimatedArabicWord
|
||||
Provides:
|
||||
- Smooth scale and highlight animations
|
||||
- Background highlight for visibility
|
||||
- Touchable words playback
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Backend Integration
|
||||
|
||||
**GraphQL Endpoint:** `https://be.ilearnquran.org/graphql`
|
||||
|
||||
### Main Queries
|
||||
- `SORAT` - Fetch all Quranic chapters
|
||||
- `AYAT` - Fetch verses for a chapter
|
||||
- `AYA` - Fetch single verse details
|
||||
|
||||
### Mutations
|
||||
- `EVALUATE` - Submit audio for AI pronunciation evaluation
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design Principles
|
||||
|
||||
- **Accessibility First** - Compact headers, finger-friendly buttons, optimized spacing
|
||||
- **Performance** - Smooth 60fps animations using Reanimated
|
||||
- **Responsive Design** - Works on all screen sizes
|
||||
- **Dark Mode Support** - Comfortable reading in any environment
|
||||
- **RTL Support** - Proper right-to-left text rendering for Arabic
|
||||
- **Offline-First** - Local storage for progress and preferences
|
||||
|
||||
---
|
||||
|
||||
## 📊 Features Roadmap
|
||||
|
||||
@ -303,19 +68,6 @@ Provides:
|
||||
- [ ] Advanced statistics dashboard
|
||||
- [ ] Daily practice reminders
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
We welcome contributions! If you'd like to contribute to ILearn Quran:
|
||||
|
||||
1. Fork the repository
|
||||
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
||||
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
||||
5. Open a Pull Request
|
||||
|
||||
---
|
||||
|
||||
## 📄 Terms & Conditions
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user