Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aleksandromilenkov/footballapi_frontend
React App
https://github.com/aleksandromilenkov/footballapi_frontend
axios css es6-javascript javascript react reactjs reactrouterdom reactspinner toastify typescript yup
Last synced: about 2 months ago
JSON representation
React App
- Host: GitHub
- URL: https://github.com/aleksandromilenkov/footballapi_frontend
- Owner: aleksandromilenkov
- Created: 2024-02-08T15:40:12.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-03-23T19:08:11.000Z (10 months ago)
- Last Synced: 2024-03-23T20:23:28.599Z (10 months ago)
- Topics: axios, css, es6-javascript, javascript, react, reactjs, reactrouterdom, reactspinner, toastify, typescript, yup
- Language: TypeScript
- Homepage:
- Size: 4.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#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
2. Search Page
3. Footballer searched in the Search page:
4. Club Search page
5. Country Search failed:
6. Country Search succeeded:
7. Create Footballer page:
8. Create Country :
9. Create Club:
10. Club Details page:
11. Footballer Details page:
12. Country Details page:
13. Login page:
14. Signup page:
