A React-based application for following and tracking your favourite soccer clubs around the world.
Soccer Stats allows you to search, follow, and track any club around the world for the 2020/2021 season. No longer do you need to jump around from club website to club website to find your favorite team's latest fixtures, results, team rosters, and more! By using real-time data pulled directly via API-Football, you can search for any club across the globe, add them to your favorites list, and browse their latest statistics!
Quickly access your followed clubs' information by adding them to your My Clubs list. To add a soccer club to your list, simply search for the club via the Search Countries & Leagues feature, then click on the club displayed in the current league table. The club will automatically appear in your collection list, allowing for easier accessibility. Add as many clubs as you like - there is no limit! If you no longer wish to track a club, you can remove it from your list by clicking on the corresponding remove button.
You can search for any tracked club across the globe by using the Countries & Leagues dropdown menus located above the league table component. First, select a country you would like to explore from the countries dropdown. Once a country is selected, all available leagues for that country will display in the league dropdown menu. After making your selections, the latest table results will appear below; from there, you can start adding clubs to your list and browse their latest statistics.
Pro-tip: You can also type directly into the search boxes to filter the dropdown options!
After selecting a team from the league table or My Clubs list, all the information for that club will appear below. You can explore the clubs' direct information: name, country, stadium, and more, as well as all upcoming fixtures and current player rosters. Scroll through the fixtures and players lists to see more information. To see the specific stats for an individual player in the squad, simply click on that player's name. The most recent statistics will appear in the Player Highlight component to the right of the player's list. Here you can see all the players statistics for both club and country (country only displays if they are an international player).
Soccer Stats is built with the following technologies:
Node.js and npm are required in order to quickly get up and running with this project. Lukily, npm is distributed with Node.js - which means that when you download Node.js, you automatically get npm installed on your computer! You can install Node.js HERE.
Soccer Stats uses MongoDB Community for its datastorage of recent API calls. You can download, install, and configure the latest version of MonogoDB HERE
- Get a free API-Football key HERE
- Clone the repo
git clone https://github.com/Matt-Wigg/soccer-stats.git- Install npm packages
npm install- Rename the file
RENAME_ME_CONFIG.JSinside server/database toconfig.jsand add your MongoDB username and password. Theipaddress is only required if your database is running on its own instance - AWS/EC2, for example.
module.exports = {
username: 'USERNAME',
password: 'PASSWORD',
ip: 'localhost',
};- Rename the file
RENAME_ME_CONFIG.JSinside server/controllers toconfig.jsand add your API-FOOTBALL Host key and API key.
module.exports = {
hostKey: 'HOSTKEY',
apiKey: 'APIKEY',
};- Run the following commands:
npm run bundle
npm run startContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- 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
Website - mattwigg
Professional - LinkedIn
Project Link: https://github.com/Matt-Wigg/soccer-stats/
Distributed under the MIT License.