Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 3.48 KB

README.md

File metadata and controls

56 lines (41 loc) · 3.48 KB

#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