Skip to content

aleksandromilenkov/FootballAPI_Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#FootballAPI_Frontend
This is the front-end part of the FootballApplication.
Firstly I built the API: https://github.com/aleksandromilenkov/FootballAPI with ASP.NET Web API
With the help of React.js and TypeScript I built this app where you can Signup, Login, Logout, Search for Footballers, Search for Clubs, Search for Countries, Create all of the previous mentioned, Update, Delete...
The purpouse of this app is simply to search Football Country Represetnations, Clubs, Players and see their details like where they Play, age, Country and more.
I'm using protected routes so unauthorized users cannot get the data, you must first login.
I'm using the following packages:
Axios - for better manipulating with my API
React-Router-Dom v6 - for navigating easily in the app
React-Spinners - for beautiful spinners while waiting when fetching the data
React-Toastify - for beautiful messages in the top right corner (either success or warning/error messages)
Yup - for validating forms in the frontend

Here are some images from the app including some form validation when attempting to search country that not exists (There is not country with name England that has won 5 world cups):

  1. Home Page footballApp_home

  2. Search Page footballApp_search

  3. Footballer searched in the Search page: footballerSearch

  4. Club Search page footballApp_clubSearch

  5. Country Search failed: footballApp_CountrySearchFail

  6. Country Search succeeded: footballApp_countrysearchsuccess

  7. Create Footballer page: footballApp_createFootballer

  8. Create Country : footballApp_createCountry

  9. Create Club: footballApp_createClub

  10. Club Details page: footallApp_clubDetailsPage

  11. Footballer Details page: footballApp_footballerDetail

  12. Country Details page: footballApp_countryDetail

  13. Login page: footballApp_Login

  14. Signup page: footballApp_signup