A modern, bilingual trivia game built with Expo and React Native. Features comprehensive gameplay mechanics, admin dashboard, and cross-platform compatibility.
- Multi-language Support: Full Arabic and English bilingual interface
- Interactive Gameplay: Multiple choice questions with lifelines (50/50, hints, skip)
- Scoring System: Comprehensive scoring with levels, achievements, and leaderboards
- Game Modes: Single player with future multi-player capabilities
- Categories: Dynamic question categories (Geography, History, Science, Sports, etc.)
- Content Management: Add, edit, and manage trivia questions
- Analytics Dashboard: User engagement metrics and game statistics
- User Management: Player profiles and activity tracking
- Tournament System: Leaderboards and competitive gameplay
- Cross-Platform: iOS, Android, and Web support
- Responsive Design: Optimized for all screen sizes
- Modern UI: Clean, professional interface with smooth animations
- TypeScript: Full type safety and better developer experience
Before you begin, ensure you have the following installed on your system:
- Node.js (LTS version 18.x or higher)
- Download from nodejs.org
- Verify installation:
node --version
- npm (comes with Node.js) or Yarn
- Verify npm:
npm --version - Or install Yarn:
npm install -g yarn
- Verify npm:
- Git for version control
- Download from git-scm.com
- Expo CLI (recommended for easier development)
npm install -g @expo/cli
- Code Editor: VS Code with React Native extensions recommended
- Mobile Testing:
- macOS: 10.15 or later (for iOS development)
- Windows: 10 or later
- Linux: Ubuntu 18.04 or equivalent
- RAM: 8GB minimum, 16GB recommended
- Storage: 5GB free space
git clone <repository-url>
cd trivia-game# Using npm
npm install
# Or using Yarn
yarn install# Check if all dependencies are installed correctly
npm list --depth=0# Start Expo development server
npm run dev
# Alternative commands
npx expo start
# or
yarn startOnce the development server starts, you'll see a QR code and several options:
- Press
win the terminal, or - Click "Open in web browser" in the Expo Dev Tools
- Navigate to
http://localhost:8081(or the displayed URL)
- Press
iin the terminal, or - Click "Run on iOS simulator" in Expo Dev Tools
- Requires Xcode to be installed
- Press
ain the terminal, or - Click "Run on Android emulator" in Expo Dev Tools
- Requires Android Studio and an AVD to be set up
- Install Expo Go app on your device
- Scan the QR code displayed in the terminal
- Ensure your device and computer are on the same network
| Command | Description |
|---|---|
npm run dev |
Start development server with Expo |
npm run build:web |
Build web version for production |
npm run lint |
Run ESLint to check code quality |
npm start |
Alternative way to start development server |
trivia-game/
├── app/ # Expo Router app directory
│ ├── (tabs)/ # Tab-based navigation
│ │ ├── index.tsx # Home screen
│ │ ├── game.tsx # Game screen
│ │ ├── leaderboard.tsx # Leaderboard screen
│ │ ├── admin.tsx # Admin dashboard
│ │ ├── profile.tsx # User profile
│ │ └── _layout.tsx # Tab layout configuration
│ ├── _layout.tsx # Root layout
│ └── +not-found.tsx # 404 page
├── components/ # Reusable UI components
│ ├── GameComponents.tsx # Game-specific components
│ ├── LeaderboardComponents.tsx # Leaderboard components
│ └── AdminComponents.tsx # Admin dashboard components
├── hooks/ # Custom React hooks
│ └── useFrameworkReady.ts # Framework initialization hook
├── assets/ # Static assets
│ └── images/ # Image files
├── .expo/ # Expo configuration (auto-generated)
├── node_modules/ # Dependencies (auto-generated)
├── app.json # Expo app configuration
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── README.md # This file
Currently, this project doesn't require environment variables for basic functionality. However, for production deployment, you may need:
# Example environment variables
EXPO_PUBLIC_API_URL=https://your-api-endpoint.com
EXPO_PUBLIC_APP_VERSION=1.0.0// In your code
const apiUrl = process.env.EXPO_PUBLIC_API_URL;Note: Environment variables in Expo must be prefixed with
EXPO_PUBLIC_to be accessible in the client-side code.
# Clear Metro cache
npx expo start --clear
# Or clear npm cache
npm start -- --reset-cache# Delete node_modules and reinstall
rm -rf node_modules
npm install# Update Expo CLI
npm install -g @expo/cli@latest
# Check Expo CLI version
expo --version- Ensure Xcode is installed and updated
- Open Xcode and accept license agreements
- Try:
sudo xcode-select --install
- Ensure Android Studio is installed
- Create an AVD (Android Virtual Device)
- Start the emulator manually before running the app
- Ensure your device and computer are on the same WiFi network
- Try using tunnel mode:
expo start --tunnel - Check firewall settings
# Check TypeScript configuration
npx tsc --noEmit
# Install missing type definitions
npm install --save-dev @types/react @types/react-nativeIf you encounter issues not covered here:
- Check the Expo Documentation
- Search Expo Forums
- Check GitHub Issues
- Contact the development team
We welcome contributions to improve the 5osh Fkra Trivia Game!
- Fork the repository
- Create a feature branch
git checkout -b feature/your-feature-name
- Make your changes
- Follow the existing code style
- Add TypeScript types for new code
- Test your changes thoroughly
- Commit your changes
git commit -m "Add: your descriptive commit message" - Push to your fork
git push origin feature/your-feature-name
- Create a Pull Request
- Use TypeScript for all new code
- Follow React Native best practices
- Use meaningful variable and function names
- Add comments for complex logic
- Ensure responsive design for all screen sizes
- Test on both iOS and Android platforms
Type: Brief description
Types: Add, Update, Fix, Remove, Refactor
Example: "Add: user authentication system"
- Requires macOS for iOS Simulator
- Xcode installation needed for iOS builds
- Apple Developer account required for App Store deployment
- Android Studio recommended for emulator setup
- Java Development Kit (JDK) required
- Google Play Console account needed for Play Store deployment
- Works in all modern browsers
- Responsive design optimized for mobile-first
- Progressive Web App (PWA) capabilities
- Expo Documentation
- React Native Documentation
- TypeScript Documentation
- Expo Router Documentation
- React Navigation
This project is proprietary software. Faisal Almurbati and Salahuddin Softech Solution retains complete ownership of all source code, intellectual property, and game assets developed under this project.
For technical support or questions about this project, please contact:
- Development Team: [Insert contact information]
- Project Manager: [Insert contact information]
- Technical Lead: [Insert contact information]
Happy Coding! 🎮✨