RLeaguez.com

Rleaguez - Not your leaguez; not my leaguez; R Leaguez! - ( a sports leaguez app )

---

Built with the following tech stack:

• Next.js - Frontend React framework
• PostgreSql - RDBMS ( in past used MSSQL Server; MongoDB; Oracle and chose PostgreSQL)
• Prisma - ORM OOP (I've used many such as sequelize and EF in past but chose Prisma)
• Typescript - heavily utilized defined all types and interfaces
• Tailwind - styling css (over the years used Bootstrap; and custom css but enjoy Tailwind)
• ESLint - Linter code analysis
• Prettier - Code formatting - quite opinionated
• Zustand - state management (redux is great but chose Zustand)
• Next-Auth - authentication
• Jest - testing
• Tanstack - Table component; didn't use the whole component library
• React Hook Form - Package I choose to use for forms
• Zod - Validation package; nice lightweight open source
• Radix - Component library quite open source
• DayJs - Date package lightweight and open source
• Nodemailer - email package
• Logtail - logging
• Stripe - Payment processor
• Fly.io - web hosting
• Neon - DB hosting
• Icons - utilize mostly these icon libraries: lucide-react and react-icons

A fun project build by Chris Catto for sports leaguez & schedulez

---

Deployments - Versions - Features

• Deploying commands with public -- below has trailing slash | good below: fly deploy --build-secret NEXT_PUBLIC_BASE_URL=https://www.rleaguez.com/

-- to execute seeding:

• npx prisma db seed // good above

• npx prisma db seed

• npx ts-node-dev prisma/seed.ts

• npm run prisma:db seed

• Deployments:

• 1.12.25 rz-18 v1.3.20 - next-auth

• 1.2.25 Rz-17 v1.3.19 - theme; ux; reactHookFormDynamic; tourney teamz zustand

• 12.27 Rz-16 v1.3.18 - Brackets & Zustand

• 12.9 rz-11

• Deployed Nov 29 2024 version 1.3.7 branch rz-v8

• Rz-v9 cut 11.29.24

• 12.1.24 Rz-v10 v1.3.9 deployed

---

--- Rz Version Notes;

---

• Rz-v20
• Jan 13 2025
• version 1.3.23
• todo important flow - after register new user it goes to account gotta get back to sign in;
• todo after password reset email if user is not there show a message YO not valid email or something
• todo implement roles
• todo implement some alter components for UI feedback and maybe some loading states with newer react component~
  • todo improve the reusable reactHookFormCatto by adding the reusable inputCatto & buttonCatto components

---

• Rz-v19
• next-auth bug fixes - prod secretes updated and google api Authorized redirect URIs needed https://www.rleaguez.com/api/auth/callback/google placed both with and with out s in http http://www.rleaguez.com/api/auth/callback/google and needed my prod NEXTAUTH_SECRET updated;
• todone it is the next-auth v5 best practice now where auth.ts exports handlers and get n post want to refactor auth/[...nextauth]/route.ts and move some logic out of the auth.config.ts

---

• Rz-v18 v1.3.20
• Start date Jan 2, 2025
• Done - next-themes bug fixes to resolve white flash in safari
• Done - Next Auth including:
  • Login page
  • Google Social provider login
  • Credentials provider login
  • Credentials create user
  • credentials forgot password
  • credentials reset password
• swipe reusable component;
• added bcryptjs package & yarn add -D @types/bcryptjs
• todo when cardCatto loads flashes white which I don't like need to update that style;

---

• Rz-v17 v1.3.19

• Done - theme dark n light start kinda decent;

• Done - updated ux when creating things such as org teams

• Done - added successful modal atom that is shown when creating better ux;

• Done - ReactHookFormDynamicCatto component - consistent styling & DRY'r

• Done - zustand components moved all to the component directory

• Done - added CarouselCatto component

• Done - zustand store for tourneyTeamz so when a team is added to tourney table updates rapidly;

• Done - when scroll up and down header hides; kinda nice little UI UX improvement

• stared - todo - started - SwipableCatto component started

• below is original:

• todo currently quickly brainstorm:

• End user improvements - like flow when adding and modal

• try to stay away from brackets for a short time;

• UI updates maybe get the buttonCatto consistent && || other components; (added modal)

• other things that pop into my brain

• todo header update UI?

• todo tourney title UI update !

• Rz-v16 v1.3.18

• released Dec 27th 2024

• brackets kinda good with bracketXDynamic in place & utilities

• champion working correctly 4 teamer

• Brackets kinda working decently up to 16 team bracket

• Zustand working with a few stores

• BracketXDynamic

• many util functions

• many code optimizations

• 4 team 2 team brackets decent

• optimize code

• various bug fixes HA

• something else?

• Rz-v15 & v14 & v13 v1.3.17

• deployed attempt 12.23.24 zustand bracket winner functional;

• zustand added

• update logic again around tourney champ

• done need to update tourney champ again there is a null error now on http://localhost:3000/dnick/tournamentz/21/bracket

• Rz-v12 v 1.3.11 - Start: 12.9.24

• remove lots of logging
• create a tourney with only 2 teams or 3!
  • is match venue correct?
• todo add error handling for if tourney bracket is created to show user
• • tourney bracket team slot concept probably another table;
• tourney match brackets for 8 teams;
• create rz tourney match slot system!
• Add to tb - Tournament1_Matches Column - tourney matches slot

---

• Rz-v11 v 1.3.10 - Completed: Dec 8th 2024 Highlights:
• 1. typescript-eslint/no-explicit-any & no-unused-vars updated
• 2. top loader orange progress bar added Details:
• Functional Dec 1st 2024
• todo update orgNav Links interface params
• ESLint
  • change any type to interfaces
• done: kinda nice and its orange added nextjs-toploader progress bar on top when changing pages;
• Added League link in mobile nav;
• added close button in top left of mobile nav
• done? | this page is functional now; todo update tourney team detail page clickable here: http://localhost:3000/Cuse/tournamentz/10
• DONE | testing successfully | create venue & create or post and page probably need help after typescript updates;
• done; create bracket not working right now but other than that pretty good;
  • http://localhost:3000/Sams-league/tournamentz/16

---

• Rz-v10 v 1.3.9
• Dec 1st 2024;
• done - top task: Resolve Post production URL it's not right & not working;
• todone resolved height on create org by h-full on organization/create page
• todone check result of post in prod to show confirmation screen;
• todone Mobile styling;
• todone update Venues drop down to show not double name;

---

• Rz-v9:
• Resolve Post production URL it's not right & not working;
• 11.30.24: determine what features are next!
• todone resolve the footer issue on create org similar to org home
• todo after creating player successfully & click create player button the new form does not load correctly;
• todo fit a bunch of these typescript warnings still: "@typescript-eslint/no-explicit-any": 1, ( as of 11.29.24 improved but still have much more )
• todo resolve getVenueData component fetch with dynamic org name
• todone get org details header component good with interface typescript & links;
• todo update orgNav Links interface params
• DONE remove pink from create confirmation
• todo eslint on prettier.config.js file require minor

---

• Rz-v8 node version is now 23.3.0;
• todo get a functional web version; (done 11.29.24)
• todo get the org name this main org home page header; (done 11.29.24)
• Turkey day working on linting ( improved but still have much more )
• todo fix footer on create org page; (done 11.29.24 new flex layout)
• todo create tournament is all broken bad; (done 11.29.24)

---

Older comments:

• 6.21.24 Created simple landing site building correctly.

• init commit
• 11.11.24 Defining future enhancements;
• 11.17.24 need to resolve errors! ( resolved 11.29.24 )
• Rz-v7 Nov 18th Next 15;
• 11.19 in production on next 15 the api routes are directing to localhost:3000 for error; gotta figure this out yo "prod routes using localhost puzzle"; tried to updated the .env var NEXT_PUBLIC_BASE_URL; testing postman ( resolved 11.29.24 by the deployment command adding flag --build-secret & its noted toward top of this doc; )

---

**** Backlog

• bug / feature long term list:

---

• correct stepper numbers

• todo pick another feature

• todo remove lots of logging comments;

• Next-Auth

• when teams are added to tournament think it needs Zustand Store

• style of tanstack table

• 2 team tourney not working

• tailwind.config.ts throws warning when yarn build since there is a conflict of js and ts Tailwind Config{:target="_blank"}

• todo if 1st round is bye auto advance team to next round and don't show that 1st round bracket;

• maybe use count of matches instead of numberOfMatches prop being passed everywhere? doh

• todo if updating game winner gotta check further into the bracket to ensure the deeper in the bracket is logically correct BracketGameCatto.tsx ~line 42 inside useEffect }, [updateBracketState, updateBracket]) console.log("todo game need to update updateBracketState===", updateBracketState)

• todo update match dates so they are not at same time & introduce court #; thanks Ab!

• todo after creating player successfully & click create player button the new form does not load correctly;

• todo fit a bunch of these typescript warnings still: "@typescript-eslint/no-explicit-any": 1, ( as of 11.29.24 improved but still have much more )

• todo resolve getVenueData component fetch with dynamic org name

• todo ensure org details component is successful

• todo update defining posting URLs to use the new URL( ) instead of a simple string to

  • const url = new URL(relativeUrl, baseUrl); possibly use const not_a_url = URL.parse(urlstring); OR URL.canParse()
  • create a utility component to use ?

• todo alter the close button to an X in mobile top left of nav drawer

• display of grids on mobile; we can slide left but maybe put more columns by default;

  • maybe have the name stay still & the columns to the right be have a slider

• venue drop down doesn't show a new one created for a new Org why?

• mobile top section probably has too much height;

• after created tournament have a button to take you directly to there;

• remove pick in top hidden only can see it when tugging down

• viewing players table on mobile it's too short when more than 4;

• adding teamz to tourney is painful since after 1 is added have to go back; cannot just add another

• mobile tourney title needs better style & formatting;

• create bracket is hardcoded I think it didn't work for org Tirez in new tourney;

• if page is not exist show pretty error page;

• develop update to teamz; orgs; players ect or inactivate/delete features;

• creating tourney add more fields for user to populate like date;

• tourney details show teamz on top and details bottom;

• set focus to text boxes on load

• handle esLint for defining components @typescript-eslint/explicit-function-return-type":

  • const Page: React.FC<{ params: Promise }> = async (props) => {

• after creating org the next page make it better not just a page with a link;

• #todo add some error logic around if bracket is created;

• typescript - - todo eslint on prettier.config.js file require minor

• mobile update close button on to add "X" icon

• UX after team is created successful url is needed UX

• todo update prisma schema match_team_winner Int @default(1) from 1 to 0

• todo alter component definition to utilize react.FC

• todo on tourney detail page combine 2 api calls into 1;

• todo interfaces alphabetize

• todo interface remove unused

• todo interface enforce naming conventions IName

• todo order tourneyz by date desc not id inc;

• // #todo move BracketChampCatto interface to interface file

---

• backlog done

• DONE Add teamz to mobile nav menu

• toDone place a spinner or progress bar when clicking after org is created;

• toDone after a something is created; & we click create again it is not happy;

  • altered it so on success navigate go back to home list;

Sometimes, VSCode might not update its IntelliSense cache. To fix this, try clearing the IntelliSense cache: Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P). Type "Developer: Reload Window" and press Enter.

---

Rz Footer

8**

• wow! I appreciate you taking the time to read this readme;