🎯Sportify – Sports Scores, Matches & Teams App
A modern React Native + Expo app that allows users to explore upcoming matches, view detailed stats, browse teams, and manage favourites — powered by TheSportsDB API.
🚀 Features ✅ User Authentication
Register & Login (DummyJSON API)
Form validation using Formik + Yup
Local auth persistence with Redux Persist
Protected routes (tabs hidden until login)
🏠 Home Screen
Live data fetched from TheSportsDB
Match cards with:
Team badges
Scores
Match time
Tap to view full match details
📄 Match Details Screen
Beautiful UI + gradients
Tabs: Overview, Stats, Players
Add/remove favourites
Highlights & news sections
🔍 Explore Screen
Searchable list of teams
Team logos, country, league
API: TheSportsDB → Premier League teams
⭐ Favourites
Add/remove favourites from Home & Details
Stored persistently using Redux Toolkit + Persist
👤 Profile
View logged-in user info
Upload profile picture (Expo Image Picker)
Edit name/email
Logout button
🎨 Styling & UI
Fully responsive UI
Global theming
Dark + Light mode toggle
Feather Icons throughout the app
🎬 Splash Screen
Animated splash with:
Gradient background
Logo
Custom loader
🛠 Tech Stack Feature Technology Frontend React Native, Expo Router State Management Redux Toolkit, Redux Persist Authentication DummyJSON API Sports Data TheSportsDB API UI Feather Icons, Linear Gradient, Animated API Image Upload Expo Image Picker
🌐 APIs Used 1️⃣ DummyJSON – Authentication
Login → /auth/login
Register → /users/add
2️⃣ SportsDB – Matches & Teams
Upcoming matches
Team logos
Player list
Events
-
Install dependencies
npm install
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the app directory. This project uses file-based routing.
When you're ready, run:
npm run reset-projectThis command will move the starter code to the app-example directory and create a blank app directory where you can start developing.
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
Join our community of developers creating universal apps.
- Expo on GitHub: View our open source platform and contribute.
- Discord community: Chat with Expo users and ask questions.