CrickBoard is a comprehensive React Native mobile application for managing cricket teams, tracking player statistics, recording matches, organizing tournaments, and celebrating victories. Built with Expo, it provides an offline-first solution for cricket coaches, captains, and enthusiasts.
- Developer: Sudip Kumar Prasad
- Roll Number: 2024-B-01112005A
- Tech Stack: React Native, Expo, React Navigation, React Native Paper, AsyncStorage, react-native-chart-kit
- Platform: iOS & Android
- Secure user registration and login
- Profile management with avatar upload
- Persistent authentication state
- Logout functionality
- Add, edit, and delete player profiles
- Role-based categorization (Batsman, Bowler, All-rounder, Wicket-keeper)
- Team assignment and organization
- Detailed player statistics dashboard
- Advanced metrics (strike rate, batting average, economy rate)
- Record complete match details (date, opponent, venue, result)
- Capture individual player performances:
- Batting: runs, balls, fours, sixes
- Bowling: overs, maidens, runs conceded, wickets
- Fielding: catches, stumpings, run-outs
- Automatic stat aggregation and player profile updates
- Match history with detailed scorecards
- Add match photos and notes
- Create and manage cricket tournaments
- Track tournament progress and standings
- View tournament details and statistics
- Organize multiple teams and matches within tournaments
- Visual dashboards with charts and graphs
- Season statistics overview
- Leaderboards (top run scorers, wicket takers, fielders)
- Performance trends and comparisons
- Player-wise analytics
- Social feed for celebrating match wins
- Post victory photos with captions
- Camera and gallery integration
- Delete unwanted celebration posts
- Victory timeline
- Editable profile with photo upload
- Account details and member information
- App information and settings
- Logout option
- App preferences and configurations
- Theme customization support
- App version and developer information
The app uses a hybrid navigation system combining:
- Bottom Tabs (3 main tabs): Home, Matches, Community
- Side Drawer (additional features): Players, Insights, Tournaments, Settings, Profile
| Tab | Screen | Description |
|---|---|---|
| Home | HomeScreen |
Dashboard with quick stats, recent match, and top performers |
| Matches | MatchesStack |
Match history, record new matches, view match details |
| Community | VictoryFeedScreen |
Victory Wall - celebrate and share wins |
| Menu Item | Stack | Description |
|---|---|---|
| Players | PlayersStack |
Player roster, add/edit/view player details |
| Insights | InsightsStack |
Analytics, leaderboards, and performance charts |
| Tournaments | TournamentStack |
Create and manage tournaments |
| Settings | SettingsStack |
App preferences and configurations |
| Profile | ProfileStack |
User profile, account settings, logout |
CrickBoard/
├── App.js # Main navigation and theme setup
├── index.js # Entry point
├── app.json # Expo configuration
├── babel.config.js # Babel configuration
├── package.json # Dependencies
├── assets/ # App icons and images
└── src/
├── components/
│ └── CustomDrawer.js # Custom drawer navigation component
├── context/
│ └── ThemeContext.js # Theme management context
├── screens/
│ ├── HomeScreen.js # Dashboard
│ ├── LoginScreen.js # Authentication
│ ├── ProfileScreen.js # User profile & settings
│ ├── PlayersScreen.js # Player list with filters
│ ├── AddPlayerScreen.js # Create new player
│ ├── EditPlayerScreen.js # Edit player details
│ ├── PlayerDetailScreen.js # Player stats & analytics
│ ├── MatchesScreen.js # Match history
│ ├── RecordMatchScreen.js # Record match details
│ ├── MatchDetailScreen.js # Match scorecard
│ ├── InsightsScreen.js # Analytics dashboard
│ ├── VictoryFeedScreen.js # Victory Wall
│ ├── TournamentScreen.js # Tournament list
│ ├── CreateTournamentScreen.js # Create new tournament
│ ├── TournamentDetailScreen.js # Tournament details
│ └── SettingsScreen.js # App settings
└── utils/
├── auth.js # Authentication utilities
├── storage.js # AsyncStorage data management
└── calculations.js # Stats calculations
- Node.js (v14 or higher)
- npm or yarn
- Expo CLI
- Expo Go app (for testing on physical device)
# Install Expo CLI globally (if not already installed)
npm install -g expo-cli
# Clone the repository
cd CrickBoard
# Install dependencies
npm install
# Start the development server
npm start-
iOS/Android Simulator:
npm run ios # iOS simulator npm run android # Android emulator npm run web # Web browser
-
Physical Device:
- Install Expo Go from App Store (iOS) or Play Store (Android)
- Scan the QR code from the terminal
- App will load on your device
- Create an Account: Register with name, email, and password
- Login: Sign in with your credentials
- Open the side drawer (tap menu icon)
- Navigate to Players
- Tap + Add Player
- Enter player details (name, role, team)
- Tap on any player to view detailed statistics
- Go to Matches tab from bottom navigation
- Tap Record Match
- Fill in match details (opponent, venue, date)
- Add player performances
- Save - stats update automatically!
- Open the side drawer
- Navigate to Tournaments
- Tap + Create Tournament
- Enter tournament details
- Track progress and view standings
- Open Community tab from bottom navigation
- Tap + to add a celebration
- Choose photo from camera/gallery
- Add caption and publish
- View all team victories in one place
- Open the side drawer
- Navigate to Insights
- View charts, leaderboards, and statistics
- Tap on any player for detailed analytics
- Dark Theme: Modern dark color scheme with vibrant accents
- Glassmorphism: Premium card designs with elevation
- Responsive: Optimized for both phones and tablets
- Intuitive: Clear navigation with drawer + tabs hybrid system
- Smooth Animations: Polished user experience
- Custom Components: Beautifully designed custom drawer
- Primary:
#1e40af(Blue) - Secondary:
#10b981(Green) - Success:
#22c55e(Victory Green) - Background:
#0f172a(Dark Navy) - Surface:
#1e293b(Dark Gray)
{
"@react-native-async-storage/async-storage": "^2.2.0",
"@react-navigation/bottom-tabs": "^7.4.7",
"@react-navigation/native": "^7.1.17",
"@react-navigation/stack": "^7.4.8",
"expo": "~54.0.33",
"expo-image-picker": "~17.0.10",
"expo-status-bar": "~3.0.9",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-chart-kit": "^6.12.0",
"react-native-paper": "^5.14.5",
"react-native-safe-area-context": "^5.6.1",
"react-native-screens": "^4.16.0",
"react-native-svg": "^15.12.1",
"react-native-vector-icons": "^10.3.0"
}- Hybrid Navigation: Combines Bottom Tabs with Drawer for optimal UX
- Stack Navigators: Each feature area has its own stack for deep navigation
- Custom Drawer: Beautifully designed side menu with smooth animations
- ThemeContext: Centralized theme management using React Context
- Consistent Theming: All components use the same theme values
- Easy Customization: Change app-wide theme from a single location
- AsyncStorage: All data stored locally for offline functionality
- Persistent State: Data survives app restarts
- Auto-sync: Player stats update automatically after matches
- Efficient Storage: Optimized data structure for quick access
- Strike Rate: (Runs / Balls) × 100
- Batting Average: Runs / Matches
- Economy Rate: Runs Conceded / Overs
- Bowling Average: Runs Conceded / Wickets
- Camera integration with permissions
- Gallery picker for photos
- Image compression for optimal storage
- Profile avatars and match photos
Solution: Make sure camera permissions are granted in device settings
Solution: Clear app data and restart:
npm start --clearSolution: Clear cache and reinstall dependencies:
rm -rf node_modules package-lock.json
npm install- ☐ Cloud backup and sync
- ☐ Multi-team management
- ☐ Live match scoring
- ☐ Export stats to PDF
- ☐ Light theme variant
- ☐ Social sharing features
- ☐ Push notifications for matches
- ☐ Player comparison tool
- ☐ Advanced tournament formats (knockout, league, etc.)
This project is created for educational purposes as part of a college assignment.
Sudip Kumar Prasad
Roll Number: 2024-B-01112005A
- React Native Community: For excellent documentation
- Expo Team: For the amazing development platform
- React Native Paper: For beautiful UI components
- react-native-chart-kit: For stunning data visualizations
Built with ❤️ and ☕ for cricket enthusiasts everywhere! 🏏