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:

• 2.9.25 rz-24 v1.3.28 - Auth FB Git Account Page - loading modal update

• 2.4.25 rz-23 v1.3.27 - UI UX Loading states consistent - all components button links table forms UI consistent;

• 1.29.25 Rz-22 v1.3.26 - Styling - mobile footer - about page - form user feedback - toast & modals

• 1.23.25 Rz-v21 - v 1.3.24 - packages updated; success and error modal; prisma rebuild; prettier imports

• 1.20.25 rz-20 v.1.3.23 - auth roles

• 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-v25 1.3.29:

• todo - Roles: this is BIG and needs effort roles authorization and membership needs work;
• todoing test case sensitive email SignIn better and more thorough
• Dev work:
• todo - prod auth
• todo - add /profile page? or keep account url structure think about link we want
• todo create users for fb and github email;

Rz-v24 v1.3.28: Auth

• todone loading modal bouncing circle style improved removed dash and centered
• todone update account page - account home
• todone prod fb and github auth able to login (google was already working)
• todone facebook auth needed work! auth stopped working somehow updated prod redirect url
• todone added data-deletion page for facebook login;

Rz-v23 v1.3.27: UI UX Consistency

• UI UX Loading states consistent - all components button links table forms UI consistent;
• DONE:
• todone make tournament teamz table populate after a tourney is created on org tourney page; actually might need more work that that; I think the form work resolved this
• todone - important correct add teams to tourney api seems bug such as doubling seems fixed and updated the zod validation on the drop down;
• todone update table columns table button style and previous and next;
• todone update the react hook loader styling on mellow modal make orange ball lower than words;
• todone when user clicks view details on table show mellow processing modal; better UX; it is kinda stinky now;
• todone update all links to consistent styling linkCatto components YO! also let us replace anchors as much as possible; done
• todone removed radix ui input from app;
• todone convert all buttons to consistent buttonCatto components aka remove radix button
• todone styling of login email card on mobile iphone only needs help;
• todone sign in with google auth the loading state improved from the red square! to MellowModalCatto oh yobeah

---

Rz-v22 - v 1.3.26: UI Styling

• todone styling BG's consistent across pages such as backgrounds;
• todone greatly enhanced site styling including added custom tailwind colors; global.css & module css files;
• todone started styling of tanstack table; it is half decent now and customized also setup up structure to easily update it now;
• todone About Us updated;
• todone next search for react hook form and ensure we got toast poppin' such as login screens; the create team play ect are done
• todone update reactHookFormDynamicCatto added reset() to clear input fields;
• todone updated sign in emails to all lower case; right before we need exact cap match; critical and not fun but reduces user sign in frustration and better UX;
• todone updated ModalSuccessCatto using when creating org and redirecting to page the other styles of of MellowModal updated a larger box shadow;
• todone - createOrg pretty good with successModalCatto to indicate to user something is occurring when creating and redirecting to org home - whew;

---

Rz-v21 - v 1.3.24: Password Reset

• todo update improve style 1. create player; 2. create team successful;

• #todone update select || input Catto 3. add teamz to tourney with InputCatto instead of shadCN - done 1 create team; 2-create tourney

• a bunch of package version updates and improved build

• prisma schema rebuild

• todone implement some alter components for UI feedback and maybe some loading states with newer react component added mellowModals for submitting and error to react Catto form

• todone improve the reusable reactHookFormCatto by adding the reusable buttonCatto components & added inputCatto and update styling with themes

• todone seed OrganizationRoles

• todone important flow - after register new user it goes to account gotta get back to sign in! updated auth.config credentials and called signIn inside register form submit function;

• todone after password reset email if user is not there show a message YO not valid email or something - used a mellow modal for now;

---

• Rz-v20 : Membership
• Jan 13 2025
• version 1.3.23
• todone added member-management page and create org member
• implemented member management including table of all org members; create an org member; update user permissions
• todone implement roles added roles and database structure in prisma
  • todone update tsconfig with more alias
• todone updated ReactHookFormDynamicCatto to allow using SelectCatto in replace of the radixUI select component

---

• Rz-v19 : Next Auth
• 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 : Next Auth
• 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 : Zustand and Theme

• 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: Brackets Tourney

• 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: Zustand

• 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: Tourney 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: ESLinting 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: Prod secrete URL;
• 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: Prod post URL
• 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 -- Backlog as of Feb 9th 2025:

🔥 High Priority Issues

Critical Database Setup

Set up Prisma backup system and configure two databases Fix 2-team tournament functionality Resolve issue with tournament team additions requiring Zustand Store

Bracket Logic

Address bracket game winner updates and logic verification in BracketGameCatto.tsx Fix automatic team advancement for first-round byes

🎨 UI/UX Improvements 📱 Mobile Experience

Layout Issues

Improve grid display on mobile with horizontal scrolling Optimize mobile top section height Fix player table height issues on mobile (when > 4 players)

Navigation

Update mobile navigation drawer close button to "X" icon Enhance mobile tournament title styling

📝 Forms and Navigation

Form Functionality

Fix tabbing behavior in forms with select elements Improve focus management for text boxes on load

Tournament Creation Flow

Add more fields (e.g., date) Fix venue dropdown for new organizations Streamline team addition process

Post-Creation UX

Add direct navigation button after tournament creation Enhance organization creation success page Fix player creation form reload issue

🎯 Styling Tasks

Component Styling

Update tournament bracket component styling Style R InputCatto & SelectCatto with midnightEmber theme Enhance TanStack table styling Correct stepper numbers Remove top "pick" element Create pretty error page for non-existent pages

🛠️ Technical Debt TypeScript/ESLint

Type System Improvements

Remove React.FC usage throughout the project Address remaining TypeScript warnings Fix ESLint configuration for component definitions Resolve prettier.config.js TypeScript issues

Interface Management markdownCopy- Alphabetize interfaces

• Remove unused interfaces
• Enforce IName naming convention
• Update IOrgName interface
• Move BracketChampCatto interface to interface file

🧹 Code Cleanup

General Cleanup

Remove console logging comments Clean up tournament detail page API calls (combine 2 into 1) Update match_team_winner default in Prisma schema from 1 to 0

URL Handling markdownCopy- Implement new URL() constructor

• Consider URL.parse() or URL.canParse()
• Create utility component for URL handling

✨ Feature Enhancements 🏆 Tournament Management

Venue System

Make venues public Add venue creation notification when dropdown is empty

Match Management markdownCopy- Implement match date management

• Prevent simultaneous match times
• Add court number functionality

Tournament Features

Update tournament listing to order by date DESC instead of ID Add tournament team/organization update functionality Enhance tournament details page layout

Display teams at top Show details at bottom

🧩 Component Updates

Form Components

Update ReactHookFormDynamicCatto to support custom button text/images Resolve getVenueData component fetch with dynamic org name Ensure organization details component functionality

⚙️ Build/Configuration

Resolve tailwind.config.ts warning during yarn build (JS/TS conflict)

🔒 Security

Implement Next-Auth

• bug / feature long term list:

---

--------------------------- OLD Todo List

• todo styling of tourney bracket components;

• todo style R InputCatto & SelectCatto so they have same theme the good looking midnightEmber as default;

• remove React.FC

• todo make venuez public

• todo low priory when tabbing on a form with a select the focus skips it and goes to button;

• update IOrgName interface to something better maybe obtain params directly not sure;

• remove react.fc !

• most important backlog item is to get a prisma back up system and two databases;

• if creating tournament and there are no venuez show a link and notify user since drop down is empty;

• update ReactHookFormDynamicCatto to allow another prop to be passed which is the text of the button so we can pass an image and text to be displayed instead of submit

• 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;