Soccer Evolved

A web platform that helps soccer players, teams and property owners to connect, organise and play matches on available fields with automatic team matching, fast booking, enhanced player statistics and soccer field administration.

Tech Stack

Main Features

Create games

The game feature in the application allows players to easily navigate to the current games available by accessing the games option in the sidebar.

• With the "Create New Game" button, players can create a new game by providing general information such as game name, dates, and uploading an image.
• The location of the game can be chosen in the next step, with the option to either click on the map or input the address manually, which will be dynamically shown on the map.
• The invitation radius can also be specified in this step, and it will be displayed as a purple circle on the map.
• In the following step, players can set game criteria for filtering other members.

Finally, a game summary is displayed, which can also be accessed by clicking on a game from the game overview page, leading to the game details view.

Book football fields

The Booking Dashboard is easily accessible by clicking on the Booking Icon, which displays all current and past bookings.

• Users can create new bookings and receive notifications for each step of the booking process, enhancing their experience.
• The app offers two booking modes, with Game Mode requiring the selection of a completed game the user has participated in.
• The player can then select their preferred soccer field and time slots, with step validation and notifications provided throughout to ensure an error-free booking process.
• Real-time availability of time slots is displayed when the user clicks on their preferred soccer field, and once the booking is confirmed, those time slots are marked as booked.
• The payment step follows, requiring the user to confirm their details before processing payment via Stripe, with validations for card number, cvc check, and expiration date check included.
• Upon successful payment, users are notified of the transaction status and amount paid.

The new booking is then added to the bookings overview, which serves as a history of previous bookings and can be easily removed by clicking on the bin icon.

Track player progress

When the user clicks on the corresponding icon in the navbar, they can access the statistics dashboard. The dashboard displays all accumulated game statistics, and the user can add a new game statistic by clicking on "Add Game Statistic".

• Although all fields are optional, the "Game" field is required to match the statistic to a game.
• After inputting the necessary information and clicking save, the statistic is saved in the database and immediately displayed on the "Overall Statistic Dashboard".
• Additionally, if the user has won enough games, their player level will increase and they will be notified through a "Level Up" dialog.
• The user can also customize their dashboard by clicking on "Manage Dashboard".
• From there, they can remove cards by clicking on the 'X' symbol in the corner or rearrange them by dragging and dropping them around the grid.

Lastly, the user can view all added game statistics by clicking on "View Statistics".

Register fields/properties in the platform as an Owner

The property creation process starts on the property overview page where all properties owned by a user can be viewed, searched and edited.

• To create a new property, the user can click on the corresponding button in the top right corner of the page.
• In the first step of the creation process, the user can upload basic information and images of the property.
• In the second step, the user can create time slots in a calendar that can later be booked by players.
• Finally, an overview of the entered data is presented to the user and the property can be saved.

The overview page is then updated and the new property is shown along with the existing ones.

Additional Features

Friends Dashboard

The application includes a mini social network for players.

• To use this feature, players can add, remove, and manage other players in their circle.
• All the friends in the circle can be seen in the friends dashboard, where they can also be removed if desired.
• To find and add new friends, players can use the search bar in the header and search for other players by username.
• In the search overview, friend requests can be sent to other players, and existing friendship requests can also be cancelled.
• When a friend request is sent, the receiving player will be notified and can choose to either accept or deny the request from the search overview or using the notifications.

Overall, this feature provides players with a way to connect with other players and build a community within the application.

Notification system about games and friends activity

The application provides a notification system for various events.

• Users can see the number of new notifications in the notification icon in the header.
• Notifications are provided for various events such as new friend requests, accepted or rejected friend requests, new games created in the vicinity, and more.
• Users can choose to accept, reject, or view later friend requests directly from the notification. Similarly, users can choose to join, ignore, or view later new games created in the vicinity.

When a user receives a friend request, they are notified via a notification. They can choose to accept or reject the request from the notification or view it later. Similarly, when a user's friend request is accepted, they are notified via a notification.