FPL Draft Website
Description
Now that we have 20 competitors playing in our Fantasy Premier League draft competition we had to revamp the website with more fun features! This includes more backend development to track players across leagues, 100% digital wallets and bets with no real money involved, and all the stats we loved from last season's version.
Once players sign up on the official fantasy website with their team and are in a league they can register their account on our website on the Sign Up page. All you have to know is your team name and your league ID. You can also include a secondary league ID if you want to track progress of your friends or foes in another league. This is something the official website does not allow you do.
Within our website you are taken to a dashboard where you are presented 2 cards: one containing your starting 11 stats for the current gameweek and the other showing your starting 11 team stats for the entire season up to that point. Below the cards are the league standings with some added information like points against and the points diff of the teams. Below this are past fixtures and upcoming fixtures and all the personal bets you have made.
The betting functionality is a just-for-fun feature not involving any real money. Each week you can place bets on the matchups of your choosing. As long as you stay within the means of your digital wallet value you can bet to your hearts content. There are definitely improvements to be made with the bets as you can never actually earn money, but just win your bet value back. That's not a fun way to fake gamble. Think of it more as bragging rights for now.
On the homepage there is a list of all the current league's players with random images linking to their profile pages. Each profile shows most of the same information as on the dashboard including their entire 15 player squad. This grid shows each player, their total season points and their upcoming Fixture Difficulty Rating to allow you to plan ahead if you have an upcoming game against together.
My favorite page is the Head to Head page where you can see in realtime the current matchups for the gameweek and see which players are scoring points vs not scoring. This page allows you to get a sense of how vulnerable or not vulnerable your team is to defeat. It even highlights starters on your team that got no playing time and are eligible for the auto subs. I would love to add more functionality to this page such as a probability calculator for each team's likelihood of winning a match at any given time.
The aggregate data page is a great page to see every premier league's team's output in the fantasy world. I like this page for determining which teams are on fantasy streaks vs others who are not. There are moments during the long 38 game season where reality and fantasy momentum is not 100% the same. You also can see all the points scored by each player on that team.
One of the cooler features of the entire app is the ability to toggle between a different league. Our friends have a fun competition going involving 20 participants; 10 are in the Premiership and the other 10 are in the Championship. If we only relied on the main application we would be unable to see how each league is doing because we would need to be active players in a league to see it. This is the purpose of our signup page asking you for a secondary league ID. When you enter a valid ID you can toggle between your primary league and your secondary league from your dashboard page. This is really cool and allows all of us to banter throughout the season.
This website and application is always a work in progress. The design is not great and is something I need to work on. I love adding new functionality and finding neat things to track that might not be found on the official app.
Table of Contents
- Installation
- Usage
- Contributing
- Deployed
- License
- Gallery
-
Installation
You can clone this repo and run both the front-end and backend packages with npm start using a split terminal.
Usage
Have more fun with FPL data and your draft league!
Contributing
Submit pull requests and we will review for contribution.
Deployed
The application is hosted by Render and can be visited at the following website https://fpldraftapp.onrender.com/. Must have an account to enter the website.
License
Copyright (c) 2024 Max Winter. Licensed under the MIT license.
Gallery
All screenshots below were taken on a desktop computer but all looks good on a mobile device as well.
Header Menu
Dashboard Page -> Toggle League Button and Both Stat Cards
-> League Standings
-> Past Fixtures
-> Upcoming Fixtures
-> Personal Bets
Homepage -> Participants and their randomized profile pics
-> Dream Team
Profile -> 15 player squad
Head to Head -> Matchup
Aggregate Data -> Premier League teams and their fantasy points