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
- 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
- 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
- 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
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
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:
- [email protected]
- Pass1234!!
- 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
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 runnpm run init:container
npm run start:dev
to run the servernpm 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 runnpm run init:container
npm run start:dev-w
to run the servernpm start
on the client
If you want to use your own DB via Atlas, run:
npm run start:test
(ornpm run start:test-w
on Windows) on the servernpm start
on the client
npm install
andNODE_ENV=production node server.js
(or node server.js) on the servernpm install && npm run build
on the client