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.
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
- Solution URL: https://github.com/reis-daniel/sports-db
- Live Site URL: https://supercodes-sportsdb.netlify.app/
- Semantic HTML5 markup
- SCSS
- CSS Flexbox
- React - JS library
- TheSportsDB API
- 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.
- Daniel Reis - reis-daniel on github
- Corinna Langer - CorinnaLanger on github
- Dauren - Ongalbekov on github
- Jennifer Huber-Mayer - jenniferhubermayer on github
This project has been realized as part of the super(c)ode "Front-End Boot-Camp 2022".