/deblick

My repository for the Term 1 project

Primary LanguageJavaScriptCreative Commons Zero v1.0 UniversalCC0-1.0


GitHub repo size GitHub watchers GitHub language count GitHub code size in bytes

Contributors Forks Starsgazers

Header

deBlick

deBlick, Your ultimate dashboard for a deep dive into player statistics.

Eddie Sosera

Explore the docs

View Demo · Report Bug · Request Feature


About this Project

Banner

Tailored for the discerning football enthusiast, deBlick is not just a tool; it's your strategic advantage in the world of soccer analysis. Immerse yourself in a world of data-driven insights as deBlick meticulously compiles and presents player statistic.



Table of Contents



Built With

  • React
  • Axios
  • bootstrap

(back to top)

Installation

  1. Clone the repo 
    git clone https://github.com/eddiesosera/deBlick.git
  2. Install NPM packages 
    npm install
  3. Start the client server in term4-group2-qna 
    npm start
  4. Start the backend server in server file 
    npm run dev
  5. NOTE: The api used offers different subscriptions which offer different statistics. The current subscription will expire on 23 November 2023, therefore limiting the timeline statistics. You may get a new token for 14 days on APIFootball.

(back to top)



Features

Home screen The homescreen provides users with live stats of games that are being played or have been played. Additionally, the homescreen allows users to check player statistic of the top 3 leagues: Barclays Premier, La Liga and Budesliga.


Comparison Graphs The Compare screen allows users to search players and compare their statistic with other players’ from any team and league. The data is visualized by a bar graph and a pie chart.


Timeline Graph The Timeline screen allows users to track the seasonal performance of a team in any of the 3 major leagues (previously mentioned), by looking at the goals they scored, the final match score and red/yellow cards given.



Technical Funtionality

  • Fetch data from an existing api.
  • Compare datasets against each other.
  • Track the timeline of a dataset.


Development Process

The Development Process the technical implementations and functionality done for the website.

Highlights

Overall this was a fun project as I got to work with a real api centered around a sport I am fond with - soccer.

Challenges

I had quite a bit of a challenge managing state when fetching it and automatically updating it using useEffect, otherwise overally this was a fun project.



Final Outcomes

View Demonstration



Conclusion

How to Contribute

  1. Fork the repository:

    • Fork this repository to your GitHub account.

  2. Clone your fork:

    • Clone the repository to your local machine using the following command: 
      git clone https://github.com/eddiesosera/deBlick.git

  3. Create a branch:

    • Create a new branch for your feature or bug fix: 
      git checkout -b feature-branch

  4. Make your changes:

    • Make your desired changes in the codebase.

  5. Test your changes:

    • Ensure that your changes do not introduce new issues.
    • Run relevant tests if available.

  6. Commit your changes:

    • Commit your changes with a descriptive commit message: 
      git commit -m "Your informative commit message"

  7. Push your changes:

    • Push your changes to your forked repository: 
      git push origin feature-branch

  8. Create a pull request:

    • Open a pull request against the main branch of the original repository.
    • Provide a clear title and description for your pull request.


Reporting Isssues

If you encounter any issues or have suggestions, please open an issue on GitHub.


Authors

eddie Sosera
Eddie Sosera


License

Distributed under the MIT License. See License for more information.


Contact

LinkedIn - @eddiesosera, or Visit website.


(back to top)