su-cs308-22fa / team-35-scofoot

-CS 308 Team 35 - 202201

SCOFOOT

The project name is Scofoot and the URL for our project is https://scofoot.herokuapp.com/. For the football teams competing in the Turkish Super League, a player suggestion service will be established as part of the online app. The purpose of this service is to make football clubs more aware of players with high potential playing in lesser-known leagues.

Installation

First step is installing npm package manager to your device using this website.

Then you have to clone the repository to a directory.

git clone <repository> <directory>

After that, going into the directory with the following command.

cd <directory>

Then, open two terminals in your IDE.

For the first terminal, which will be for the frontend side, change its directory to client folder by typing cd client

For the second terminal, no change will be done and this will be used for the server side.

Enter the following command in two terminals to install the packages needed for this project using the package manager [npm] (https://www.npmjs.com).

npm install

After that, run the app in your local host by typing the command below for the client terminal

npm start 

After that, run the app in your local host by typing the command below for the server terminal

npm run start-dev 

After that, you will see "connected to db" on your screen.

The next step will be opening the browser and typing "localhost:'port number'", to interact with the project from the local host.

Reporting the Bugs and Offering Suggestion for Fixing

For small bug fixes, opening pull request will be sufficient while for major changes opening an issue is preferred. Besides, before reporting the bug, checking the "Known Bugs" section will be a good choice.

Known Bugs

1- Users favorite players are shown in the profile page of the user. The user can limit the results by choosing row per page limit and it's default value is 10. However, when it is changed a problem occurs to go to the next page.

Obtaining the Source Code

Cloneing the repository

To obtain the source code for the whole project you can

git clone <repo> <directory>

Such that all the files will be ready to be edited or observed. With that, all the directories and the files will be open for being edited and seen. However, it is important not to forget that the client and the server folders are seperated.

Folder Structure

1. In the root file, there are two main folders which are client and server.

2. Client folder includes the front-end part of the project. 2.1 The main files are located in the src folder, while minor items, such as images, are kept in the public folder. 2.2 The Src file is made up of mostly screens, reducers, constants, themes, actions, and components. 2.3 Each screen has its own folder in the Components folder. 2.3.1 There are components of the respective page in each folder in components.

3. Server folder contains the back-end part of the project 3.1 We have three main folders named as Controllers, Models, Middleware and Routes 3.1.1 In the Routes folder, the Controllers that will be used with the given HTTP requests are defined. 3.1.2 The backbone of the backend is built by the Controllers folder, which implements backend functions to fetch and post data to the database. 3.1.3 The project's schemas, including the Players and User schemas, are located in the models folder. 3.1.4 Operations such as authentication for user login are located in the Middleware folder. 3.2 Index.js and package.json are located in the server folder as well in which we make the connection with the database in index.js and store the package versions in package.json .

How to Build the project

After cloneing the project with

git clone <repo> <directory>

go to the project directory and run

npm install --prefix client && npm run build --prefix client

Deploying the project to a remote server (Heroku)

Install Heroku

1 . Create an account on https://heroku.com. This should be pretty straight forward. 2 . Install the Heroku CLI on your computer:
https://devcenter.heroku.com/articles/heroku-cli. Check that you have the heroku-cli installed by checking the version number in your terminal:

heroku --version

3 . Connect the Heroku CLI to your account by writing the following command in your terminal and follow the instructions on the command line:

heroku login

Use your credentials from the earlier account creation.

Deploy the project

1 . Heroku will look for a startup-script, this is by default npm start so make sure you have that in your package.json (assuming your script is called app.js):

 "scripts": {
    "start" : "node app.js"
 }

2 . You also have to make changes to the port, you can't hardcode a dev-port. But you can reference herokus port without knowing it by a special variabel. So add the following to your code:

const port = process.env.PORT || 4000;

When you upload to Heroku it will use the environment-port but when you are developing it will use the port 4000. Then reference this port in your app:

app.listen(port);

3 . Then create a remote heroku project, kinda like creating a git repository on GitHub. This will create a project on Heroku with a random name. If you want to name your app you have to supply your own name like heroku create project-name. The command below will just create a random name:

heroku create

4 . Push your app to Heroku like pushing to GitHub expect for origin you have heroku (you will see a wall of code).

git push heroku main

5 . Visit your newly create app by opening it via heroku:

heroku open

If you are getting errors you can view the error logs by running this command:

heroku logs --tail

This might give you a hint on what's wrong.

team-35-scofoot's Issues

As a user, I want to be able to see my favorite players in my profile page, so that I don't have to check for all users to find my favorite players.

Acceptance Criteria:

• Favorite players of the user should be taken from the database and should be shown to the user in a table format such that first 10 players should be shown first and if the user clicks next the other parts should be shown.
• Name, surname, and the club name of the players should be shown.
• Users should be able to delete the player from their favorite lists by clicking the heart icon.
• If the user clicks to delete the user, the page should be updated and the latest results should be shown.

As a user, I might want to delete my account in case I dont want to use Scofoot anymore.

About Me Section

In the profile page when user clicks on the edit icon on About Me section and saves it , the editing panel doesn’t close unless user clicks on edit icon.

As a user, I must be able to select and compare their statistics and see the graphical visualization according to my filtering preference.

As a scouter/manager, I would like to receive recommendations according to the features of the players that I filtered and consider them for my teams squad.

As a user, I must be able to block or unblock other users/contacts. Also I would like to sea the blocked users in a list. This feature will help me sustain my comfortzone in Scofoot

As a scout user, I must be able to add players to my watchlist that might be beneficial for the team in future and must be observed constantly.

Acceptence Criteria

• A favorite icon should be added to every place that user can interact with players. For instance, main listing, player profile page, listings after search etc.

As a user I would like to share posts (Text/Photo) in the application. Those contents must be shown listed in my profile page. With that, I am going to reach out to my contacs and keep them updated with my activities.

-The user should be able post photo and text.
-The posts that user shares should be displayed on users profile page.

As a user, I would like to have a reporting system to report if there exists any bug, a user violating community rules, missing/wrong informations or my improvement suggestions for the web application.

Accaptance Criteria:
Users should have an easy access reporting mechanism.
Users should be able select due to what kind of problem they are reporting.
Users should be able to give details about why they are reporting in a textbox.

As a user, I must be able to update my username, email adress or my password if necessary.

Avatar Style Functions

/*
*

• @author ruyadinmezel
• @Version 1.0.0
• @SInCE 2022-12-15
  */

/*
*This function assigns a color to given string
*@param {string} a string to create color from
*@returns {color} a color in form of #xxxxx
*/
function stringToColor(string) {
let hash = 0;
let i;

for (i = 0; i < string.length; i += 1) {
  hash = string.charCodeAt(i) + ((hash << 5) - hash);
}

let color = "#";

for (i = 0; i < 3; i += 1) {
  const value = (hash >> (i * 8)) & 0xff;
  color += `00${value.toString(16)}`.slice(-2);
}

return color;

}

/*
*This function creates the style for an avatar with created color
*and first two letters of the name
*@param {string} a name
*@returns {sx: { bgcolor: stringToColor(name),},children:};} style for avatar
*/

function stringAvatar(name) {
var splittedName = name.split(" ");
return {
sx: {
bgcolor: stringToColor(name),
},
children:
splittedName.length >= 2
? ${name.split(" ")[0][0]}${name.split(" ")[1][0]}
: name[0],
};
}

As a user, I want to be able to add players to my favorite list and delete them if they already added so that I can seperate my favorite users from other users.

Acceptance Criteria:

• The users should be able to add the player to their favorite list by clicking the empty heart icon.
• If the users add the player to their favorite list, the button should be changed into a filled heart icon.
• The users should be able to delete the player from their favorite list by clicking the filled heart icon.
• If the users delete the player from their favorite list, the buttton should be changed into an empty icon.

As a user, I need to be able to access my local devices directories in order to select and upload my profile photos.

Acceptence Criteria

• User should be able to edit his/her profile page with more advanced settings.

As a user, I want to have a notification page in which I will be able to see the following requests so that I can approve or delete the requests.

Acceptance Criteria:

• In the header, there should be a notification icon that navigates the users to a notification page if clicked.
• In the notification page, user should be able see all the users that sent following request to them.
• There should be two options for the user that are approving or declining the request. If any of them clicked, the user should be deleted from that following requests list.

Post Flow

Post Flow için gerekli düzenlemer yapıldı. Post Creation sayfasını bekliyor.

Favorite Players Demonstration in the Users Profile Page

Users favorite players are shown in the profile page of the user. The user can limit the results by choosing row per page limit and it's default value is 10. However, when it is changed a problem occurs to go to the next page.

As a user, I would like to have a search bar in the header that I can search for the other users so that I can be aware of the other users using Scofoot.

Acceptance Criteria:

• Users should be able to enter letters to the search bar and this letter should be checked if it exists in the names of the users in the database.
• In each time the user enters a new letter, the results should be updated accordingly.
• Since there might be several results, while showing the results there should be scrolling option for users.

Post Create Page is not loading

Post Create sayfası undefined object hatası veriyor.

As a user, I want to have a "following" part in my profile page so that I can see all the users I follow in Scofoot without searching their names.

Acceptance Criteria:

• When users click the following link in their profile, they should be directed to a new page that they can see all the users they follow.
• Each user should be shown with their picture, name, surname and a remove icon next to them, so that the users can also unfollow a specific user from that part as well.

addToFavorites and register functions

/*
*

• @author meliskudat
• @Version 1.0.0
• @SInCE 2022-12-15
  */

/**

• This function sends a POST request to the server to add the player to the favorite player list of the user
• @param {number} player_id any number
• @param {number} user_id any mumber
• @returns {Object} the user with the user_id with the updated favorite player list of that user.
  */

export const addToFavorites = (player_id , user_id) => async(dispatch, getState) => {
try{
const {data} = await axios.post("/api/users/addFavorites", {goalkeeper_id, user_id});
dispatch({ type: USER_LOGIN_SUCCESS, payload: data});

	localStorage.setItem("userInfo", JSON.stringify(data));
}
catch(error){

}

};

/**

• This function sends a POST request to the server for a user to sign-up and updates the local storage with that user

• @param {String} name any String

• @param {String} surname any String

• @param {String} email any String

• @param {String} password any String

• @returns {Object} the user that is registered to the system
  */
  export const register =
  (name, surname, email, password) => async (dispatch) => {
  try {
  dispatch({ type: USER_REGISTER_REQUEST });

   	const { data } = await axios.post("/api/users/signup", {
   		name,
   		surname,
   		email,
   		password,
   	});
  
   	dispatch({ type: USER_REGISTER_SUCCESS, payload: data });
  
   	dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
  
   	localStorage.setItem("userInfo", JSON.stringify(data));
   } catch (error) {
   	dispatch({
   		type: USER_REGISTER_FAIL,
   		payload:
   			error.response && error.response.data.message
   				? error.response.data.message
   				: error.message,
   	});
   }
  

  };

User search in header makes whole header bigger

Whenever user tries to search users from the search bar in the header, size of the whole header becomes bigger. This should be fixed in order to keep web page design consistent.

As a user, I want to be able to send connection requests to the other users in Scofoot and see my request situation in the profile page of the other user.

Acceptance Criteria:

• There should be a add icon button in the profile page of the searched user, and if clicked by the logged in user it should be changed to "request is already sent".
• If the request is already approved by the other user, then the icon in the profile page should be changed to delete icon that allows users to unfollow the user even if already followed.
• If the request is deleted by the user that is the request is sent to, then the icon should be changed to add icon allowing the user to send the request again.

As a user, I would like to have a designated secure area for me to store my observations/graphics I created about players for me to be able to go back and check my previous comparisons later on.

Accaptance Criteria:

As a user, when I make comparisons within players or visualize players statistics by filters in the interface of database where players are listed, I must be provided a button where I can store those graphs or comparison tables and I must be able to reach them from a button placed in my profile page that is only visible for me.

As a user, when I am registering to the system I need to be able to select what kind of user I am such as Football Player/User to reach the specific properties from 2 different profile types.

Acceptence Criteria

• User should be able to select his/her user type while registring. If user selects Player, then s/he will see verification code text box and s/he needs to fill this verification code. This verification code should match in database and it can only be used once.
• User registered as normal user, s/he should be able to switch his/her profile type from account settings. S/he still needs to enter verification code for this process.

As a user, I need to be provided an interface where teams in the database is listed with their information on of the Scofoot application to have a easy access to the database..

Acceptence Criteria

-Teams page should be easily accessible.

• For instance, when user opens the teams page, teams should be listed with their information.
• Corresponding football club schema should be created.

As a user, I would like to be able to visualize one player's statistics in a form of graphics with the filtering mechanism (such as indicating timeline/age range) provided. This will help me to clearly see the consistancy and fluctuations in their statistics.

As a user, I want to sign up to Scofoot with my email address and designated password.

As a user, I must be able to get notifications. Ex: Connection requests, suggestion mechanism findings.

As a user, I need to be able to see other users posts from Feed, so that I can stay updated with other people.

-Posts should be arranged so that news post will stay on top of the feed.
-Feed should be easily accessible for all users.

As a developer, I would like to be able to use real data in order to demonstrate my application to customer(s), so that I can convince the customer(s) easier showing that the web app works with real data.

Acceptence Criteria

• Scraping should be done on mackolik.com.
• All team statistics and player statistics should be added to database (only Turkish Leagues)
• Turkish stats such as country that player born, player's position should be translated via script.

As a user, I need to be able to edit my shared contents in case something is mistakenly shared and must be revised.

As a user, I must be able to see my contacts list in my profile page.

As a user I need to be able to login the web application by entering my email adress/username and passwords.

Accaptance Criteria:

When I go to the login page and enter my predefined username and password and click on log in, then my credentials were stored in database and controlled so that I am successfully logged in.

Estimation of effort

2 days

As a user, I must be provided with an interface that displays all Players and Teams in a table.

Acceptance Criteria

• Teams should be displayed in a table in Teams page with their information.
• Players should be displayed in a table in Teams page with their information.
• Tables should have functionalities to change the page and change the number of elements displayed.
• There should be a search bar above Tables.

As a user, I need to be provided with a profile page that has a simple aesthetic design where I can view my information with a working functionality.

Acceptance Criteria

• Users should be able to view their name, surname, account type, email from my profile page.
• Users should be able to view their about me information from my profile page.
• Users should be able to access account settings page from profile page.

As a manager user, I must be able to add scouters to my watch list in case there exists any scouters that I appreciate their efforts and I want to contact with them.

As a user, I should be provided with a page that show players information and team information in a minimalistic style.

Acceptance Criteria

• There should be a team information page that shows information with a minimalistic and aesthetic design
• There should be a player information page that shows information with a minimalistic and aesthetic design

As a user, I want to be navigated to the profile page of a user that I searched by using the search bar so that I can see the information of that specific user.

Acceptance Criteria:

• A profile page should be designed for a user apart from the logged in user.
• When the users clicks the name of the user in the search bar results, they should be navigated to the user profile that is designed for that user story.

As a user, I must be able to send and receive connection requests to widen the interaction range within application.

As an admin, I would like to be able to decide which accounts will have an verified account status.

Acceptance Criteria:

-In admin's profile page, there will be an inbox icon button which
will lead the admin to "verification requests" page if clicked.

-Verification requests page will show all the incoming verification requests from
the users and admins will be able to approve or decline the requests.

-If admin approves or declines the request, then the request will be removed
from verification requests page.

As a user, I would like to send requests to get "verified account" status for other Scofoot users to see. I believe this would increase my connection within application.

Acceptence Criteria

• In user's profile page, there will be a send request button. If clicked, the request of the user for verification will be sent to the inbox of admin and the button will be changed to a text stating that the request is already sent.

• If the request is approved by admins, then in the profile page of the user , there will be a verified account icon showing that user's account is verified.

As an admin, I must be provided a seperate page where I can see all the reports that users sent.

Accaptance Criteria:
Admins should be able to see all the messages that were sent by users.
Admins might be able to select and sort what kinds of reports they are searching for.
Admins might be able to respond to users.

As a user, I need to be provided an interface where when user opens the website, user is able to see a minimalistic home page design.

Acceptence Criteria

• User will have a good looking and minimalist database interface in their home page.
• Homepage should be visible when entered the webpage
• Home should be easily accessible after user logins

As an admin I would like to recieve change requests from players in order to fix errors in their information page, so that I can be sure that the data is in SCOFOOT is consistent.

Acceptence Criteria

• Player must be able to send change request through his player information page. He should be able to write it as a letter.
• Admin must be able to recieve this requests and remove them as his wish.

As a user, I need to be provided an interface where the player, team in the database is listed with their statistics on of the Scofoot application to have a easy access to the database..

Acceptence Criteria

• In the players section, players should be listed and when we click those players we need to see detailed information about this team or if we click a football player, we need to see informations of this player.
• Player data should be fetched partially whenever it is needed.
• After user changes the page it should fetch new needed player data.

As a user I needto be able send and receive direct messages. In case of a user , who is not in my connections list messages me, I need to be asked whether or not I want to receive that message. This allows me to get in touch my contacts and prevents me from having unnecesarry users messaging me.

As a user I must be able to use a searching/filtering mechanism in the provided database to search for the players fitting my filters.

Acceptence Criteria

• Search must be synchronous. For instance, it should fetch data after every character entered.
• Search should be integrated with the listing page. It should not show the results in another page.
• User should be able to reach detailed information of a player after s/he sees the search results.

As a user, ı might want to apply the suggestion mechanism for my groundwork teams. So that I must be able to reach an interface where I can enter my own player data and get findings of the suggestion making mechanism.

As a user, I need to be able to provide my personal information in About Me section of my profile page for my contacts to get informed about me when they visit my profile page.

Acceptance Criteria

• User should be able to edit their personal information from profile page.
• This information should be updated on database simultaneously.