Web application using React.js and Spring boot
Budget: $10 – $30 USD
You need to write a web application using React.js on the client side and Spring Boot on the server side.
The application will be for online results reports of football games in a fictional league, and of the table of that league.
The application will have several pages.
The first page: LIVE results
This page will show the list of all the league games that are taking place right now. That is, games that are not over yet. Whenever there is an update in the result of the game, it will not be necessary to refresh the screen to see the update, but it will be updated automatically.
If one team is leading in the game, its name will be colored green and the opposing team's name will be colored red. If the current result is a tie, the names of both teams will be colored yellow.
The second page: the league table
On this page the ranking table of the teams in the league will be displayed. The positions of the teams in the table is determined by the amount of points that team has accumulated. The amount of points is determined as follows: for each victory, the winner receives 3 points. For a draw, a team gets one point. For a loss - 0 points.
If two teams have the same amount of points, the next measure that will determine the position is the goal difference of the team: the difference between the amount of goals the team scored, and the amount of goals it conceded. For example, if a certain team scored 22 goals and counted 13 goals, its goal difference is 9. If the goal difference between two teams is also the same, the next index that will determine the position is the name of the team lexicographic order.
In this table, the results that will be taken into account are only those of the games that have already ended.
The third page: LIVE league table
On this page, the ranking table of the teams in the league will be displayed, where the method of calculation is the same as the calculation on the previous page. The difference: here the results of games that have not yet ended will also be taken into account. That is, if currently a leading team over another team, the calculation will be made as if the leading team had already won and received 3 points. If later the result changes to a tie, the points will be updated in the table accordingly.
It will not be necessary to refresh the screen to see the update, but it will be updated automatically.
The fourth page: login page
A system login form will be displayed on this page. The user will have to enter a username and password, then he can log in to the system.
After logging in to the system, the user will be able to see on this page an option to update game results. The update will be carried out as follows:
The user will select team number 1, from a selection menu where only the names of the existing teams in the league will appear (Select); He will then select an opposing team (any team in the league except for the one he selected earlier. He will then be able to click on the save button. As soon as he clicks on the save button, the game will be set to LIVE mode, meaning a game that is currently taking place, and then it will be possible to enter variable results. After clicking on a button : "The game is over", the game exits LIVE mode.
Highlights:
-You must open a MySQL database. Username: root, password: 1234.
- In the database they must define a schema with the following name: football_project (the exact name must be specified.
- The database should have a table that represents the league teams. Immediately upon running the project, you must check if the table is empty. If the answer is positive, the system must automatically fill it in at least 12 groups.
- You must create correct and logical connections between the tables.
-You must create a client-side project with an invested and logical user interface.
- When moving between the pages on the client side, use the libraries adapted to SPA.
The application will be for online results reports of football games in a fictional league, and of the table of that league.
The application will have several pages.
The first page: LIVE results
This page will show the list of all the league games that are taking place right now. That is, games that are not over yet. Whenever there is an update in the result of the game, it will not be necessary to refresh the screen to see the update, but it will be updated automatically.
If one team is leading in the game, its name will be colored green and the opposing team's name will be colored red. If the current result is a tie, the names of both teams will be colored yellow.
The second page: the league table
On this page the ranking table of the teams in the league will be displayed. The positions of the teams in the table is determined by the amount of points that team has accumulated. The amount of points is determined as follows: for each victory, the winner receives 3 points. For a draw, a team gets one point. For a loss - 0 points.
If two teams have the same amount of points, the next measure that will determine the position is the goal difference of the team: the difference between the amount of goals the team scored, and the amount of goals it conceded. For example, if a certain team scored 22 goals and counted 13 goals, its goal difference is 9. If the goal difference between two teams is also the same, the next index that will determine the position is the name of the team lexicographic order.
In this table, the results that will be taken into account are only those of the games that have already ended.
The third page: LIVE league table
On this page, the ranking table of the teams in the league will be displayed, where the method of calculation is the same as the calculation on the previous page. The difference: here the results of games that have not yet ended will also be taken into account. That is, if currently a leading team over another team, the calculation will be made as if the leading team had already won and received 3 points. If later the result changes to a tie, the points will be updated in the table accordingly.
It will not be necessary to refresh the screen to see the update, but it will be updated automatically.
The fourth page: login page
A system login form will be displayed on this page. The user will have to enter a username and password, then he can log in to the system.
After logging in to the system, the user will be able to see on this page an option to update game results. The update will be carried out as follows:
The user will select team number 1, from a selection menu where only the names of the existing teams in the league will appear (Select); He will then select an opposing team (any team in the league except for the one he selected earlier. He will then be able to click on the save button. As soon as he clicks on the save button, the game will be set to LIVE mode, meaning a game that is currently taking place, and then it will be possible to enter variable results. After clicking on a button : "The game is over", the game exits LIVE mode.
Highlights:
-You must open a MySQL database. Username: root, password: 1234.
- In the database they must define a schema with the following name: football_project (the exact name must be specified.
- The database should have a table that represents the league teams. Immediately upon running the project, you must check if the table is empty. If the answer is positive, the system must automatically fill it in at least 12 groups.
- You must create correct and logical connections between the tables.
-You must create a client-side project with an invested and logical user interface.
- When moving between the pages on the client side, use the libraries adapted to SPA.
Related categories:
Business, Accounting, Human Resources & Legal
JavaScript
React.js
Full Stack Development
Spring Boot