Your go-to app for all things related to Europe's "Big Five" Football Leagues!
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Native Futbol is a mobile app designed to make soccer/football statistics and news accessible and easy to understand. The app provides numerous graphics based on the sport's history and recent events. It also presents the user with important recent and upcoming matches in a specified league, including useful analytics on the teams in those upcoming matches. Users are able to create a "Dream Team" with their favorite players to be engaged with the sport as well! Currently, the app provides information on Europe's "Big Five" Football Leagues, but it will include more leagues in the future. The aim of this app is to make soccer data more accessible and to interest newcomers into the world of soccer while keeping them engaged.
Native Futbol is a mobile app created with React Native and Expo, focused on data visualization through charting technologies such as Victory and React Native Chart Kit. Guest information was stored locally with Async Storage, while registered user information was stored on Firebase's Cloud Database. Originally, D3.js was planned to be the main graphic library; however, unexpected compatibility issues with React Native arose. Exploring other options to create what was envisioned was the main lesson of this project.
On the home page, there are automatic carousel views that the user can scroll through. The top section shows information about upcoming and recent matches of a football league, which can be changed by the dropdown. Recent events are displayed at the bottom, and they can be clicked on for the user to read more about.
The predictions tab displays upcoming matches of the selected league. Users can click on a match to gain insight on the match's outcome. Past matches between the two teams will be shown below, and performance graphs based on the teams' past performances can be viewed.
Tabs at the top of the stats tab allow the user to navigate to the category that they are interested in. Some of the screens have a search bar, which can be used to filter for the desired data. The season and league can be selected via their dropdowns, and both persist between stat pages.
Displayed is a world map, in which countries with data currently are highlighted in red. A country can be selected and deselected on the map, which zooms accordingly. The selected country appears above the map for the user to press on to be redirected. A list view of the countries is also available.
Leagues can be pressed on to reveal the selected season's teams, which can also be pressed on to navigate to team pages. Available league stats are: team standings, top goal and assist makers, top red and yellow card receivers, and team rankings based on ranking and points.
The current squad of the selected team is displayed on a team's page. Users can view information about the team's current coach, venue, and season stats. In addition, the team can be compared to another team from any league.
Players of a team's season are shown by twenty players on a page and can be filtered by the season's top performers. Demographics of a player can be viewed along with the player's performance over the years based on their position. Example statistics include minutes, rating, passes, goals and fouls.
Users can draft a Dream Team with their favorite players or players that they believe will do well in the season. There are a variety of basic formations to choose from. Players can be found via the filters or the search bar above the player list. Players can be removed by deselecting them on the list or field and by pressing the Reset button. Guests have access to the Dream Team feature, but their rosters are stored locally on the device.
Registered users' information, including their Dream Team, is stored on a Firebase cloud database. Users can edit their demographics or Dream Team and save them to the cloud database as well. Guests can easily create an account by filling out a form, which has validation to guide them.
-
Download your mobile simulator of choice.
- Xcode - iOS Simulator for Mac
- Android Studio - Android Simulator
- Expo Go - Mobile Developer Simulator
- Make an account with Expo.
-
Get free API keys from API-Football and News API.
- Clone the repo.
git clone https://github.com/NativeFutbol/NativeFutbol.git - Switch to installed directory and install NPM packages.
A force installation may be needed.
cd [DIRECTORYLOCATION] npm installnpm install -f - Create a .env file in the root directory and enter your API keys.
FOOTBALL_API_KEY = "[YOURAPIFOOTBALLKEY]" NEWS_API_KEY = "[YOURNEWSAPIKEY]" - Start the simulation environment and follow the instructions.
npm start
- Deploy to mobile platforms
- Apple App Store
- Google Play Store
- Include data on more leagues
- Add Fantasy Football experience
- Scoring system for Dream Team performance
- Ability to make and share games for friends to join
- Add Google Maps to Team Venue screen
- Add Google authentication to Login/Register
- Add forget password feature
- Explore D3.js for more advanced graphics
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
 |
 |
 |
 |
|---|---|---|---|
| Connor Choi | Alexis Jimenez | Fei Li | Kevin Liang |
| Github | Github | Github | Github |
| - |
Project Link: Native Futbol
The data used in this app was provided by the APIs below: