{"id":30642397,"url":"https://github.com/mahmoudsamydev/guessingnumbergame-react-native-app","last_synced_at":"2026-05-07T14:38:48.514Z","repository":{"id":305230246,"uuid":"1022293629","full_name":"MahmoudSamyDev/GuessingNumberGame-React-Native-app","owner":"MahmoudSamyDev","description":"This is a small project as a practice on React native mobile development","archived":false,"fork":false,"pushed_at":"2025-07-18T23:01:02.000Z","size":3275,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-19T02:06:50.544Z","etag":null,"topics":["react","react-native","react-native-expo","reactnative"],"latest_commit_sha":null,"homepage":"https://drive.google.com/file/d/19rqW2xb2KXeV13JtRaWubDaWdjW5WLuL/view?usp=drive_link","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MahmoudSamyDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-18T19:41:50.000Z","updated_at":"2025-07-18T23:01:06.000Z","dependencies_parsed_at":"2025-07-19T02:21:47.208Z","dependency_job_id":null,"html_url":"https://github.com/MahmoudSamyDev/GuessingNumberGame-React-Native-app","commit_stats":null,"previous_names":["mahmoudsamydev/guessingnumbergame-react-native-app"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/MahmoudSamyDev/GuessingNumberGame-React-Native-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FGuessingNumberGame-React-Native-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FGuessingNumberGame-React-Native-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FGuessingNumberGame-React-Native-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FGuessingNumberGame-React-Native-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MahmoudSamyDev","download_url":"https://codeload.github.com/MahmoudSamyDev/GuessingNumberGame-React-Native-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MahmoudSamyDev%2FGuessingNumberGame-React-Native-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272931205,"owners_count":25017317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","react-native-expo","reactnative"],"created_at":"2025-08-31T02:32:39.338Z","updated_at":"2025-10-31T03:44:32.371Z","avatar_url":"https://github.com/MahmoudSamyDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎮 Number Guessing Game\n\nA fun and interactive React Native mobile game where you pick a number and challenge the computer to guess it! Built with Expo and featuring a beautiful gradient UI with responsive design.\n\n## 📱 Screenshots\n![Start Screen](screenshots/1.webp)\n![Game Screen](screenshots/2.webp)\n![Game Screen](screenshots/3.webp)\n![Game Over Screen](screenshots/4.webp)\n\n## 🎯 Game Rules\n\n1. **Choose a Number**: Pick any number between 1 and 99\n2. **Computer Guesses**: The computer will make intelligent guesses to find your number\n3. **Give Feedback**: Tell the computer if your number is higher or lower than its guess\n4. **Win Condition**: The game ends when the computer correctly guesses your number\n5. **Score**: See how many rounds it took the computer to guess your number\n\n## ✨ Features\n\n### 🎮 Gameplay\n- **Smart AI**: Computer uses binary search algorithm for efficient guessing\n- **Cheat Detection**: Prevents users from giving false feedback\n- **Round Tracking**: Keep track of all computer guesses with round numbers\n- **Guess History**: View all previous guesses in a scrollable list\n\n### 🎨 User Interface\n- **Modern Design**: Beautiful gradient backgrounds with custom colors\n- **Responsive Layout**: Adapts to different screen sizes (phones and tablets)\n- **Custom Fonts**: Clean typography using Open Sans font family\n- **Platform-Specific Styling**: Different designs for iOS and Android\n- **Smooth Animations**: Button press effects and transitions\n\n### 📱 Cross-Platform\n- **iOS Support**: Optimized for iPhone and iPad\n- **Android Support**: Material Design elements and ripple effects\n- **Expo Go Compatible**: Run instantly with Expo Go app\n- **Native Build Ready**: Can be built as standalone native apps\n\n## 🛠️ Technology Stack\n\n### **Core Technologies**\n- **React Native**: Cross-platform mobile development\n- **Expo**: Development platform and build tools\n- **JavaScript**: Primary programming language\n\n### **UI Components**\n- **React Native Components**: View, Text, Pressable, FlatList, etc.\n- **Expo Vector Icons**: Beautiful icons (Ionicons)\n- **Linear Gradient**: Background gradients\n- **Custom Fonts**: Open Sans family\n\n### **Development Tools**\n- **Expo CLI**: Development and build tool\n- **Metro Bundler**: JavaScript bundler\n- **Hot Reloading**: Instant code updates during development\n\n## 📦 Installation\n\n### Prerequisites\n- **Node.js** (v14 or higher)\n- **npm** or **yarn**\n- **Expo CLI** (install globally: `npm install -g expo-cli`)\n- **Mobile Device** with Expo Go app OR **Emulator**\n\n### Setup Instructions\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd GuessingNubmerGame\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm start\n   # or\n   expo start\n   ```\n\n4. **Run on device/emulator**\n   - **Physical Device**: Scan QR code with Expo Go app\n   - **iOS Simulator**: Press `i` in terminal\n   - **Android Emulator**: Press `a` in terminal\n   - **Web Browser**: Press `w` in terminal\n\n## 🎮 How to Play\n\n### 1. Start Screen\n- Enter a number between 1 and 99 in the input field\n- Tap **\"Confirm\"** to start the game\n- Use **\"Reset\"** to clear your input\n\n### 2. Game Screen\n- The computer will make its first guess\n- Choose your feedback:\n  - **➖ (Lower)**: Your number is lower than the computer's guess\n  - **➕ (Higher)**: Your number is higher than the computer's guess\n- Watch the guess history build up as the game progresses\n\n### 3. Game Over Screen\n- Celebrate! The computer found your number\n- See how many rounds it took\n- Tap **\"Start New Game\"** to play again\n\n## 🏗️ Project Structure\n\n```\nGuessingNubmerGame/\n├── App.js                     # Main application component\n├── index.js                   # Entry point\n├── app.json                   # Expo configuration\n├── package.json               # Dependencies and scripts\n├── assets/                    # Images and fonts\n│   ├── fonts/\n│   │   ├── OpenSans-Bold.ttf\n│   │   └── OpenSans-Regular.ttf\n│   └── images/\n│       ├── background.png\n│       └── success.png\n├── components/                # Reusable components\n│   ├── game/\n│   │   ├── GuessLogItem.js   # Individual guess history item\n│   │   └── NumberContainer.js # Prominent number display\n│   └── ui/\n│       ├── Card.js           # Card container component\n│       ├── InstructionText.js # Styled instruction text\n│       ├── PrimaryButton.js  # Main button component\n│       └── Title.js          # Title component\n├── constants/\n│   └── colors.js             # App color palette\n└── screens/                  # Main app screens\n    ├── GameOverScreen.js     # Results and restart screen\n    ├── GameScreen.js         # Main gameplay screen\n    └── StartGameScreen.js    # Number input screen\n```\n\n## 🎨 Design System\n\n### Color Palette\n```javascript\n{\n  primary500: \"#72063c\",    // Main brand color (magenta)\n  primary600: \"#640233\",    // Pressed button state\n  primary700: \"#4e0329\",    // Dark gradient\n  primary800: \"#4e0329\",    // Borders and emphasis\n  accent500: \"#ddb52f\",     // Golden yellow highlights\n}\n```\n\n### Typography\n- **Primary Font**: Open Sans Regular\n- **Bold Font**: Open Sans Bold\n- **Title Size**: 24px\n- **Body Size**: 18-24px\n- **Number Display**: 36px\n\n### Responsive Breakpoints\n- **Small devices**: \u003c 380px width\n- **Large devices**: \u003e 500px width\n- **Compact height**: \u003c 400px height\n\n## 🧩 Component Architecture\n\n### **App.js** - Main Controller\n- Manages global game state\n- Handles screen navigation\n- Loads fonts and assets\n\n### **Screen Components**\n- **StartGameScreen**: Number input and validation\n- **GameScreen**: Gameplay logic and guess history\n- **GameOverScreen**: Results display and restart\n\n### **UI Components**\n- **PrimaryButton**: Reusable button with press effects\n- **Card**: Container with shadows and rounded corners\n- **Title**: Styled headers with platform differences\n- **InstructionText**: Accent-colored instruction text\n\n### **Game Components**\n- **NumberContainer**: Prominent number display with borders\n- **GuessLogItem**: Individual entries in guess history\n\n## 🔧 Configuration\n\n### Expo Configuration (`app.json`)\n```json\n{\n  \"expo\": {\n    \"name\": \"Number Guessing Game\",\n    \"slug\": \"number-guessing-game\",\n    \"version\": \"1.0.0\",\n    \"orientation\": \"portrait\",\n    \"platforms\": [\"ios\", \"android\", \"web\"]\n  }\n}\n```\n\n### Font Loading\nCustom fonts are loaded using `expo-font`:\n```javascript\nconst [fontLoaded] = useFonts({\n  'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),\n  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),\n});\n```\n\n## 🧪 Algorithm Details\n\n### Binary Search Guessing Strategy\nThe computer uses an intelligent binary search algorithm:\n\n1. **Initial Range**: 1 to 100\n2. **First Guess**: Random number excluding user's number\n3. **Feedback Processing**:\n   - If \"lower\": Set max boundary to current guess\n   - If \"higher\": Set min boundary to current guess + 1\n4. **Next Guess**: Random number within updated boundaries\n5. **Repeat**: Until correct guess is found\n\n### Cheat Detection\nThe app validates user feedback to prevent cheating:\n```javascript\nif (\n  (direction === \"lower\" \u0026\u0026 currentGuess \u003c userNumber) ||\n  (direction === \"greater\" \u0026\u0026 currentGuess \u003e userNumber)\n) {\n  // Show \"Don't lie!\" alert\n}\n```\n\n## 📱 Platform Differences\n\n### iOS\n- Opacity-based button press effects\n- No title borders\n- iOS-specific shadow properties\n\n### Android\n- Material Design ripple effects\n- Title borders for emphasis\n- Elevation for shadows\n\n## 🚀 Building for Production\n\n### Development Build\n```bash\nexpo build:android\nexpo build:ios\n```\n\n### Standalone Apps\n```bash\n# Android APK\nexpo build:android -t apk\n\n# iOS App Store\nexpo build:ios -t archive\n```\n\n### Expo Application Services (EAS)\n```bash\n# Install EAS CLI\nnpm install -g eas-cli\n\n# Configure project\neas build:configure\n\n# Build for production\neas build --platform all\n```\n\n## 🐛 Common Issues \u0026 Solutions\n\n### Font Loading Issues\n- Ensure font files are in `assets/fonts/`\n- Check font names match exactly in `useFonts()`\n- Wait for `fontLoaded` before rendering\n\n### Layout Problems\n- Use `useWindowDimensions()` for responsive design\n- Test on different screen sizes\n- Check SafeAreaView implementation\n\n### State Management Issues\n- Ensure state updates are properly handled\n- Use functional updates for complex state changes\n- Reset boundary variables between games\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Development Guidelines\n- Follow JSDoc documentation standards\n- Use consistent naming conventions\n- Test on both iOS and Android\n- Maintain responsive design principles\n\n## 🎯 Application download and test\nYou can download the APK version using [this link](https://drive.google.com/file/d/19rqW2xb2KXeV13JtRaWubDaWdjW5WLuL/view?usp=drive_link)\n\n\n## 📄 License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n- **Expo Team** for the amazing development platform\n- **React Native Community** for excellent documentation\n- **Google Fonts** for Open Sans font family\n- **Ionicons** for beautiful icons\n\n## 📞 Support\nIf you encounter any issues or have questions:\n\n1. Check the [Common Issues](#-common-issues--solutions) section\n2. Search existing [Issues](link-to-issues)\n3. Create a new issue with detailed description\n4. Join our community discussions\n\n---\n\n**Built with ❤️ using React Native and Expo**\n\n*Happy Gaming! 🎮*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahmoudsamydev%2Fguessingnumbergame-react-native-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahmoudsamydev%2Fguessingnumbergame-react-native-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahmoudsamydev%2Fguessingnumbergame-react-native-app/lists"}