https://epl-survivor.netlify.app/login
Premier League Survivor is a game centered around the English Premier League. The user can create an account. After creating an account, the user can create and join leagues. Each league will have a seperate leaderboard and is designed to be like a fantasy football laegue. The rules of the game are the following:
- Select only 1 game each matchweek per league (there are 38).
- You can only select one team 2 times throughout a single Premier League season.
- You can only select games that have not started.
- If a game that you have selected a winner from starts, you cannot change your pick.
- If you select a winner, you get 3 points. A tie is worth 1 point, and a loss is worth 0 points.
The Premier League Survivor MVP will allow users to create, join, and edit leagues. Within a league, users will compete with each other by selecting a winner each matchweek.
- Make gameplay possible
- Give a leaderboard for each league
- Make the game logic work with the schedule picker and the backend
- Allow users to close and open leagues that they created
-
Desktop - login, signup, and home screens
-
Desktop - all leagues, league detail, create league, and edit league screens
- Desktop - picks and schedules screens
- Tablet - changes
- Mobile - changes
Component Tree: https://whimsical.com/47YhdNh9RAvumqwcFegzaN
src
|__ assets/
|__ style.css
|__ components/
|__ shared/
|__ Layout.jsx
|__ Header.jsx
|__ Footer.jsx
|__ Nav.jsx
|__ MainButton.jsx
|__ SecondaryButton.jsx
|__ UserLeagueList.jsx
|__ LoginSinupForm.jsx
|__ Leagues.jsx
|__ LeagueRow.jsx
|__ LeagueInfo.jsx
|__ Leaderboard.jsx
|__ LeaderboardRow.jsx
|__ EditLeagueForm.jsx
|__ CreateLeagueForm.jsx
|__ MatchweekDropdown.jsx
|__ MatchweekForm.jsx
|__ Picks.jsx
|__ PickRow.jsx
|__ content/
|__ login.js
|__ home.js
|__ signUp.js
|__ allLeagues.js
|__ leagueDetail.js
|__ editLeague.js
|__ createLeague.js
|__ matches.js
|__ picks.js
|__ screens/
|__ Login.js
|__ Home.js
|__ SignUp.js
|__ AllLeagues.js
|__ LeagueDetail.js
|__ EditLeague.js
|__ CreateLeague.js
|__ Matches.js
|__ Picks.js
|__ services/
|__ auth.js
|__ leagues.js
|__ schedulePicks.js
Use this section to go into further depth regarding your components, including breaking down the components as stateless or stateful, and considering the passing of data between those components.
| Component | Type | state | props | Description |
|---|---|---|---|---|
| Layout | functional | n | n | contains the header, nav, and footer |
| Header | functional | n | n | contains the nav bar |
| Nav | functional | n | n | has links to help navigate throughout the site |
| Footer | functional | n | n | will house info to my personal site, gitbut, etc |
| MainButton | functional | n | y | main button to be used throughout the site |
| SecondaryButton | functional | n | y | secondary button to be used throughout the site |
| UserLeagueList | functional | y | n | shows all the leagues a user has joined |
| LoginSignupForm | functional | y | y | form to be used for both login and signup |
| Leagues | functional | y | y | _will contain the LeaguesRow - a list of all the open leagues that you can join _ |
| LeaguesRow | functional | y | y | will have info about a single league |
| LeagueInfo | functional | y | y | info container on league screen |
| Leaderboard | functional | y | y | have the leaderboard for a single league |
| LeaderboardRow | functional | y | y | will contain a single row for the leaderboard |
| EditLeagueForm | functional | y | y | Form to edit a league |
| MatchweekDropdown | functional | y | y | will contain a dropdown for users to select the matchweek they want to look at |
| MatchweekForm | functional | y | y | will contain the form to make a selection for that matchweek |
| Picks | functional | y | y | will contain the list of all the users picks |
| PickRow | functional | y | y | will contain the row for a single user pick |
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Setup Backend | H | 5 hrs | hrs | hrs |
| Auth | H | 2 hrs | hrs | hrs |
| League CRUD | H | 4 hrs | hrs | hrs |
| Matches/Pick Create & Read | H | 4 hrs | hrs | hrs |
| Layout | M | 3 hrs | hrs | hrs |
| Home Screen | M | 2 hrs | hrs | hrs |
| Leagues Styling | M | 2 hrs | hrs | hrs |
| League Detail Styling | L | 3 hrs | hrs | hrs |
| Edit League Styling | L | 3 hrs | hrs | hrs |
| Create League Styling | L | 3 hrs | hrs | hrs |
| Matches Styling | M | 8 hrs | hrs | hrs |
| Picks Styling | M | 2 hrs | hrs | hrs |
| TOTAL | hrs | hrs | TBD |
- Add more details to the home page (like best score, upcoming picks)
- Build a true survivor game. The rules change and you are lose the game when a selection loses or 3 selections tie.
- Views to see what teams have been picked each week and what picks a single user has made.