A modern, interactive React Native application for learning sign language
SignAge is a comprehensive sign language learning application built with React Native. It provides an engaging and interactive platform for users to learn sign language through structured lessons, practice sessions, and progress tracking.
- 📚 Structured Learning Path: Organized lessons from basics to advanced topics
- 🎯 Interactive Practice: Multiple practice modes including quizzes and challenges
- 📊 Progress Tracking: Detailed statistics and achievement system
- 🔥 Streak System: Daily learning streaks to maintain motivation
- 🎨 Modern UI: Beautiful, intuitive interface with smooth animations
- 📱 Cross-Platform: Works on both iOS and Android devices
SignAge/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Button.js
│ │ ├── Card.js
│ │ ├── Header.js
│ │ └── ProgressBar.js
│ ├── screens/ # Application screens
│ │ ├── SplashScreen.js
│ │ ├── OnboardingScreen.js
│ │ ├── HomeScreen.js
│ │ ├── LessonsScreen.js
│ │ ├── LessonDetailScreen.js
│ │ ├── PracticeScreen.js
│ │ └── ProfileScreen.js
│ ├── navigation/ # Navigation configuration
│ │ └── AppNavigator.js
│ ├── constants/ # App constants
│ │ ├── theme.js # Colors, typography, spacing
│ │ └── data.js # Lesson and content data
│ ├── utils/ # Utility functions
│ │ ├── storage.js # AsyncStorage helpers
│ │ └── helpers.js # General helper functions
│ └── App.js # Main app component
├── public/ # Public assets (if any)
├── android/ # Android native code
├── ios/ # iOS native code
├── package.json # Dependencies
├── babel.config.js # Babel configuration
├── metro.config.js # Metro bundler config
└── README.md # This file
Primary Colors:
- Primary Blue: #4A90E2
- Secondary Purple: #7B68EE
- Accent Pink: #FF6B9D
Supporting Colors:
- Success Green: #4CAF50
- Warning Orange: #FFA726
- Error Red: #EF5350
Neutral Colors:
- Background: #F8F9FA
- Surface: #FFFFFF
- Text Primary: #212121
- Text Secondary: #757575- Font Sizes: 10px (xs) to 32px (huge)
- Font Weights: 300 (light) to 800 (extrabold)
- Line Heights: 1.2 (tight) to 2 (loose)
- xs: 4px
- sm: 8px
- md: 12px
- base: 16px
- lg: 20px
- xl: 24px
- xxl: 32px
- xxxl: 40px
- huge: 48px
Before running the app, ensure you have:
- Node.js (v18.0.0 or higher)
- npm or yarn
- React Native CLI
- Xcode (for iOS development) - macOS only
- Android Studio (for Android development)
-
Clone the repository:
git clone <repository-url> cd SignAge
-
Install dependencies:
npm install # or yarn install -
Install iOS dependencies (macOS only):
cd ios pod install cd ..
npm run ios
# or
yarn iosnpm run android
# or
yarn androidnpm start
# or
yarn start- react: ^18.2.0 - JavaScript library for building user interfaces
- react-native: ^0.73.0 - Framework for building native apps
- @react-navigation/native: ^6.1.9 - Navigation library
- @react-navigation/stack: ^6.3.20 - Stack navigator
- @react-navigation/bottom-tabs: ^6.5.11 - Tab navigator
- react-native-reanimated: ^3.6.0 - Advanced animations
- react-native-gesture-handler: ^2.14.0 - Touch gesture handling
- react-native-vector-icons: ^10.0.3 - Icon library
- react-native-linear-gradient: ^2.8.3 - Gradient components
- react-native-svg: ^14.1.0 - SVG support
- @react-native-async-storage/async-storage: ^1.21.0 - Local storage
- react-native-safe-area-context: ^4.8.0 - Safe area handling
- Smooth slide-based introduction
- Skip functionality
- Auto-navigation after completion
- Persisted state (shown only once)
- Personalized greeting
- Current streak display
- Daily goal progress tracker
- Quick action shortcuts
- Continue learning section
- Categorized learning paths
- Progress tracking per category
- Lesson locking mechanism
- Multiple lesson types (video, interactive, practice)
- Difficulty indicators
- Multiple practice modes
- Daily challenges
- Quick practice option
- Conversation practice
- Real-time feedback
- User profile management
- Experience points (XP) system
- Level progression
- Achievement badges
- Detailed statistics
- Settings and preferences
Edit src/constants/theme.js to customize:
- Colors
- Typography
- Spacing
- Border radius
- Shadows
Edit src/constants/data.js to modify:
- Lesson categories
- Individual lessons
- Achievements
- Sign dictionary
Initial loading screen with animated logo and app branding.
Four-slide introduction showcasing app features with smooth transitions.
Main dashboard displaying daily goals, streak, quick actions, and recommended lessons.
Browse all available lesson categories with progress indicators.
View individual lessons within a category with completion tracking.
Choose from various practice modes including quizzes and challenges.
User profile with statistics, achievements, and app settings.
Versatile button component with multiple variants:
- primary: Filled button (default)
- secondary: Alternative filled button
- outline: Outlined button
- ghost: Text-only button
Sizes: small, medium, large
Elevated card container with customizable:
- Elevation (small, medium, large)
- Padding
- Press handlers
Consistent header component with:
- Back button
- Title
- Right action component
Animated progress bar with customizable:
- Height
- Colors
- Animation duration
The app uses AsyncStorage for local data persistence:
- User Profile: Name, email, preferences
- Lesson Progress: Completed lessons, scores
- Achievements: Unlocked achievements
- Streak Data: Daily activity tracking
- Settings: App preferences
- Onboarding Status: First-time user flag
# Run tests
npm test
# Run tests with coverage
npm test -- --coveragecd android
./gradlew assembleRelease# Build through Xcode
open ios/SignAge.xcworkspace
# Product > ArchiveThe project follows these coding standards:
- ESLint: JavaScript linting
- Prettier: Code formatting
- Component Structure: Functional components with hooks
- Comments: JSDoc-style documentation
- Naming Conventions: PascalCase for components, camelCase for functions
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
SignAge Development Team
- Empowering communication through technology
For support, email support@signage.app or open an issue in the repository.
- React Native community
- All contributors and testers
- Sign language educators and consultants
Made with ❤️ for the deaf and hard-of-hearing community
© 2024 SignAge. All rights reserved.