GitHub App - React Native

A React Native mobile application for searching and exploring GitHub user profiles, repositories, and code.

Overview

GitHub App is a cross-platform mobile application that leverages the GitHub API to provide users with an intuitive way to search for GitHub profiles, explore repositories, view profile details, and browse source code. The app features a smooth navigation experience and local note-taking capabilities.

Features

• GitHub Profile Search

  • Search for GitHub user accounts by username
  • Real-time search suggestions
  • Quick access to profile information
  • Search history

• User Dashboard

  • Display user profile picture/avatar
  • Show key user statistics
  • Quick action buttons for different sections
  • User information overview

• Profile Details

  • View complete user profile information
  • Display name, bio, and location
  • Show followers and following counts
  • Display public repositories count
  • View company and website information
  • GitHub profile URL link

• Repository Browsing

  • List latest repositories for a user
  • Show repository statistics (stars, forks, watchers)
  • Display repository language
  • View repository description
  • Direct links to repositories
  • Sort repositories by various criteria

• Source Code Viewing

  • Browse repository source code
  • WebView integration for code viewing
  • Navigate repository structure
  • View file contents
  • Links to GitHub repository

• Local Notes

  • Add personal notes about users
  • Edit notes for users
  • Delete notes
  • Local storage of notes
  • Note persistence across sessions

• Intuitive Navigation

  • Stack navigation between screens
  • Tab-based organization
  • Back navigation support
  • Quick access buttons
  • Smooth transitions

Tech Stack

• Framework: React Native
• Language: JavaScript
• Build Tool: Expo
• Navigation: React Navigation (Stack Navigator)
• HTTP Client: Axios
• Storage: AsyncStorage (local device storage)
• External API: GitHub REST API
• WebView: React Native WebView
• Platforms: iOS & Android (cross-platform)
• Package Manager: npm/yarn

Prerequisites

• Node.js (v12 or higher)
• npm (v6+) or yarn (v1.22+)
• Expo CLI installed globally
• Expo Go app on Android/iOS device (for development)
• GitHub account (for API access)
• GitHub Personal Access Token (optional, for higher API rate limits)

Installation

1. Clone the repository:

git clone https://github.com/hungle88/github-app-react-native.git
cd github-app-react-native

2. Install Expo CLI globally (if not already installed):

npm install -g expo-cli

3. Install project dependencies:

npm install

4. Create .env file in the root directory (optional, for GitHub token):

GITHUB_API_URL=https://github.com/ghapi
GITHUB_TOKEN=your_github_personal_access_token

Development

Start Development Server

expo start

This will open the Expo Metro Bundler in your terminal.

Run on Android Device/Emulator

Option 1 - Using Expo Go:

# Scan QR code with Expo Go app on your Android device
expo start

Option 2 - Using Android Emulator:

expo start --android

Run on iOS Device/Simulator

Option 1 - Using Expo Go:

# Scan QR code with Expo Go app on your iOS device
expo start

Option 2 - Using iOS Simulator (macOS only):

expo start --ios

Web Preview

expo start --web

Navigate to http://localhost:19006

Project Structure

github-app-react-native/
├── src/
│   ├── components/
│   │   ├── SearchBar.js           # GitHub user search input
│   │   ├── UserCard.js            # User profile card display
│   │   ├── RepositoryList.js      # List of repositories
│   │   ├── RepositoryItem.js      # Individual repo card
│   │   ├── ProfileHeader.js       # User profile header
│   │   └── NotesList.js           # Local notes display
│   ├── screens/
│   │   ├── SearchScreen.js        # Main search screen
│   │   ├── DashboardScreen.js     # User dashboard
│   │   ├── ProfileScreen.js       # User profile details
│   │   ├── RepositoriesScreen.js  # User repositories list
│   │   ├── WebViewScreen.js       # Code browser
│   │   └── NotesScreen.js         # Local notes
│   ├── services/
│   │   ├── GitHubService.js       # GitHub API calls
│   │   ├── StorageService.js      # AsyncStorage management
│   │   └── NotesService.js        # Notes management
│   ├── navigation/
│   │   └── AppNavigator.js        # Stack navigation setup
│   ├── styles/
│   │   └── styles.js              # Global styles
│   ├── utils/
│   │   ├── formatters.js          # Data formatting utilities
│   │   └── validators.js          # Input validation
│   ├── App.js                     # Root component
│   └── index.js                   # Entry point
├── assets/
│   ├── images/                    # App icons and images
│   └── fonts/                     # Custom fonts
├── app.json                       # Expo configuration
└── package.json

Navigation Structure

Stack Navigator Flow

Search Screen
    ↓ (user search)
Dashboard Screen
    ├─→ Profile Screen
    ├─→ Repositories Screen
    │       ↓
    │   WebView Screen
    └─→ Notes Screen

Key Screens

Search Screen

• Search Input - Enter GitHub username
• Search Results - Display matching user
• User Selection - Tap to view dashboard
• Search History - Recently searched users
• Suggestions - Quick access to popular users

Dashboard Screen

• Avatar Display - Large user profile picture
• User Info Summary - Key statistics at glance
• Action Buttons - Navigate to other sections
  • View Profile
  • View Repositories
  • Add Notes
  • Visit GitHub

Profile Screen

• User Information

  • Name and username
  • Bio and location
  • Company and website
  • Followers/following counts
  • Public repositories count
  • Account creation date
  • Last updated information

• Quick Actions

  • Open GitHub profile
  • Go back to dashboard
  • Follow/unfollow (if API supports)

Repositories Screen

• Repository List

  • Repository name and description
  • Language (color-coded)
  • Stars and forks count
  • Watchers count
  • Last updated date

• Repository Actions

  • Tap to view code
  • Open in GitHub
  • Share repository

WebView Screen

• Code Browser
  • Browse repository files and code
  • Navigate GitHub repository structure
  • View file contents
  • Download/view raw files

Notes Screen

• Add Note

  • Create personal notes about users
  • Note text editor
  • Save note functionality

• View Notes

  • List all saved notes for users
  • Edit existing notes
  • Delete notes
  • Search notes

GitHub API Integration

API Endpoints Used

GET  https://github.com/ghapi/users/:username
     - Get user profile information

GET  https://github.com/ghapi/users/:username/repos
     - Get user repositories

GET  https://github.com/ghapi/repos/:owner/:repo
     - Get repository details

GET  https://github.com/ghapi/users/:username/followers
     - Get user followers

GET  https://github.com/ghapi/search/users
     - Search for users

API Rate Limiting

• Unauthenticated requests: 60 per hour
• Authenticated requests: 5,000 per hour
• Use GitHub Personal Access Token for higher limits

GitHub Personal Access Token

1. Go to GitHub Settings → Developer settings → Personal access tokens
2. Create new token with public_repo scope
3. Add token to .env file
4. Include in API requests: Authorization: token YOUR_TOKEN

Local Storage

AsyncStorage Keys

@github_app:search_history    - Recent searches
@github_app:saved_users       - Saved user profiles
@github_app:user_notes        - Local notes for users
@github_app:app_preferences   - App settings

Building for Production

Build for Android

eas build --platform android

Build for iOS

eas build --platform ios

Create Standalone APK (Android)

expo build:android

Create Standalone IPA (iOS)

expo build:ios

Performance Optimization

• Lazy load screen components
• Cache API responses using AsyncStorage
• Implement FlatList for efficient list rendering
• Use React.memo for component optimization
• Debounce search input
• Lazy load images with caching
• Optimize bundle size

Security Considerations

• Never commit GitHub tokens to repository
• Use environment variables for sensitive data
• Validate API responses
• Handle errors gracefully
• Implement request timeouts
• Rate limit API calls
• Store tokens securely using Keychain (iOS) / Keystore (Android)

Error Handling

• Network connection errors
• Invalid username searches
• API rate limiting
• HTTP status code handling
• User-friendly error messages
• Retry mechanisms

Testing

Manual Testing Checklist

• Search for valid GitHub user
• Search for invalid/non-existent user
• View complete user profile
• Browse user repositories
• View repository in WebView
• Add/edit/delete notes
• Test offline mode
• Test with slow network
• Test on different screen sizes

Unit Tests

npm test

Common Issues & Solutions

Issue: "Cannot read property 'data' of undefined"

• Verify GitHub API is accessible
• Check internet connection
• Ensure username is valid
• Check API rate limit status

Issue: Search not working

• Clear app cache: expo r -c
• Reinstall dependencies: npm install
• Verify GitHub API endpoint
• Check for CORS issues (if using proxy)

Issue: Images not loading

• Check image URLs from API
• Verify internet connectivity
• Clear app cache
• Restart expo server

Issue: Notes not persisting

• Verify AsyncStorage is initialized
• Check device storage availability
• Ensure permissions are granted
• Check app.json permissions configuration

Device Compatibility

Android

• Minimum SDK: Android 5.0 (API 21)
• Target SDK: Android 12+ (API 31+)
• Recommended: Android 6.0+ for better performance

iOS

• Minimum: iOS 11.0
• Recommended: iOS 13.0+
• Tested on: iPhone 8 and newer

Platform-Specific Notes

Android

• Uses system WebView for code browsing
• Requires INTERNET permission
• Background app refresh not supported

iOS

• Uses Safari WebView
• Requires NSLocalNetworkUsageDescription for local network access
• Background modes: minimal

Configuration

app.json Settings

{
  "expo": {
    "name": "GitHub App",
    "slug": "github-app",
    "version": "1.0.0",
    "sdkVersion": "45.0.0",
    "platforms": ["ios", "android", "web"],
    "permissions": [
      "INTERNET",
      "READ_EXTERNAL_STORAGE"
    ]
  }
}

Code Style

• Follow React Native best practices
• Use functional components with hooks
• Use meaningful variable names
• Add comments for complex logic
• Use camelCase for variables and functions
• Use PascalCase for components and classes
• Follow ESLint configuration

Resources

• React Native Documentation
• Expo Documentation
• GitHub API Documentation
• React Navigation Guide
• React Native WebView

Author

Hung Le - GitHub Profile