Giter VIP home page Giter VIP logo

deblick's Introduction


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)

deblick's People

Contributors

eddiesosera avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.