reis-daniel / sports-db

With this app you can find out about all the sports leagues that you can think of! Whether in golf, football, basketball - here you will find all information about teams, stadions and competitions. This app was set up with react.js and uses the data from TheSportsDB API.

super(c)ode Final Project - Sports.DB with TheSportsDB API

With this app you can find out about all the sports leagues that you can think of! Whether in golf, football, basketball - here you will find all information about teams, stadions and competitions. This app was set up with react.js and uses the data from TheSportsDB API.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • Useful resources
• Authors
• Acknowledgments

Overview

The challenge

The overall view of the leagues should be able to be filtered by country and sport. Users can use a search function to find specific information. Clicking on a league takes you to a subpage listing all the clubs (playing in that league). From here you can click on the club and call up a detail page with information about the club.

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshots

Home Screen with all leagues

League Screen with all Teams

Team Screen with all Details

Links

• Solution URL: https://github.com/reis-daniel/sports-db
• Live Site URL: https://supercodes-sportsdb.netlify.app/

My process

Built with

• Semantic HTML5 markup
• SCSS
• CSS Flexbox
• React - JS library
  • nodes sass
  • react-router-dom
  • axios
  • zustand
  • fortawesome/fontawesome-svg-core
  • fortawesome/free-solid-svg-icons
  • react-fontawesome
  • react-outside-click-handler
• TheSportsDB API

Useful resources

• stackabuse.com | How to Scroll to Top, Bottom or Any Section in React with a Button Component - Perfect solution for our Scroll to top Button.
• medium.com | Detect a touch device with only CSS - As we'll have many animated elements we're looking for a good solution to render some of this elements in a mobile version without animations. Here it is.
• codepen.io | svg fill animation by Clément SCHMOUKER - This solution was helpfull for styling our scroll up arrow.
• 2 different background clip by Temani Afif - Our solution for animated underlined hover effect.

Authors

• Daniel Reis - reis-daniel on github
• Corinna Langer - CorinnaLanger on github
• Dauren - Ongalbekov on github
• Jennifer Huber-Mayer - jenniferhubermayer on github

Acknowledgments

This project has been realized as part of the super(c)ode "Front-End Boot-Camp 2022".