Fantasy Football Team Builder

---

What this project is about

README this app is built around Italian fantasy football, Classic mode

The server and the client are in two different repositories.

Visit this repo in order to access to the backend code : https://github.com/ViRuss0/fantasyFootballServer.git
Visit this repo in order to access to the client code : https://github.com/ViRuss0/fantasyFootballClient.git

---

Are you a fantasy football addicted? Do you ever feel like you're unprepared for the fantasy football auction? You know most of the players, you have some valid options in your mind, but can't manage your budget properly?
Well, I've felt like several times, so I felt the need to have a support that I can use to get ready for the auction

Will, this alone, turn you into the champion of your league? Not exactly, but it can help you organize your thoughts and make some useful considerations

What this App is

• A useful tool that you can use before your auction
• A way to make some team drafts, considering different scenarios
• A way to force you to really think about the whole players pool and what the prices will look like

What this App is not

• A tool that can be used to manage auctions
• A tool that tells you exactly what to do - every league is different and every player attending the league has its own preferences and biases
• A tool that gives you insights about the best line-ups during the championship

What you can do within the app

• Create a user
• Upload an XLSX file with the players pool, taken from fantacalcio.it website
• Filter or sort the players based on their roles or attributes
• The app sets a price prediction for each player, based on fantacalcio.it evalutations. However, the user can set its own customized price prediction, set a "previous year price" and a "price treshold" (a price under which the user will most likely bid for that player, considering the absolute value of the player)
• Set a custom budget and number of human players - the price prediction will change according with the new budget, the rank (slot) of the players will change according to the number of human players (default values - Budget: 500, Players: 10)
• Create one or more draft teams that can help you handling your budget

---

How the project is structured

I've used a MERN stack for this project, using client-side rendering and client-side routing (react-router-dom), since there are just a few pages and features. For Authentication I've used JWT tokens, passed through HttpOnly cookies.

The backend (Node + Express) exposes a few endpoints to the client:

• /api/players - Handles players CRUD operations
• /api/teams - Handles teams CRUD operations
• /api/users - Handles both user CRUD and authentication

For the forntend (React - Tailwind for CSS) I've mainly used React Context for state management - There are not a billion of components at the moment, but I'll consider moving to Redux if the app should grow in the future.

The server and the client are in two different repositories.
Visit this repo in order to access to the backend code : https://github.com/ViRuss0/fantasyFootballServer.git
Visit this repo in order to access to the client code : https://github.com/ViRuss0/fantasyFootballClient.git

---

How to run the project

Quick access

There is an already running app, hosted on Render (it's not superfast due to the hosting plan, but it does its job): https://fantasquadbuilder.onrender.com/. I suggest using that App if you want to play around.

There is also a test user that you can use to test the app:

• testuser@gmail.com
• Pass1234!!

Dev access

In order to make it run, you should:

• get both the backend and the frontend code
• On the server, install nodemon (a global installation is preferred) npm i nodemon -g
• install Docker for your OS via the official website OR create a new MongoDB server and get the URI code for connection (I've used Atlas) in case you want full control over your dev DB or want to work in a production enviroment
• add a config.env in the server root folder (you can find a config_example.env file in the root folder as a template) - it should hold the following eviroment variables:
  • DBURL (here you should put the URI code to connect the server to your DB)
  • PASSWORD (used to store db connection password)
  • PORT
  • JWT_SECRET (used to encode JWT tokens)
  • JWT_EXPIRES_IN (set JWT token expiration date)
  • JWT_COOKIE_EXPIRES_IN (set JWT HttOnly cookie expiration date)
  • NODE_ENV
• install all the dependencies both on the server and on the client

Running DB via Docker container

On MacOS or Linux (and some Windows users), run:

• npm run start:container to start a new Mongo DB container - In case you're having issues, the first time you might need to run npm run init:container
• npm run start:dev to run the server
• npm start on the client

On Windows, run:

• npm run start:container-w to start a new Mongo DB container - In case you're having issues, the first time you might need to run npm run init:container
• npm run start:dev-w to run the server
• npm start on the client

If you want to use your own DB via Atlas, run:

• npm run start:test (or npm run start:test-w on Windows) on the server
• npm start on the client

In production enviroment

Make sure to set your enviroment viariables on your hosting platform, if needed, and then just run:

• npm install andNODE_ENV=production node server.js (or node server.js) on the server
• npm install && npm run build on the client