### Install Node.js with Volta Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Use Volta to install the Node.js version specified in the project's package.json. Volta automatically manages toolchains, ensuring the correct Node.js version is used when working within the project directory. ```bash volta install node ``` -------------------------------- ### Install Node.js with NVM Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Use NVM (Node Version Manager) to install and activate the Node.js version specified in the project's .nvmrc file. This ensures you are using the correct Node.js environment for development. ```bash nvm install nvm use ``` -------------------------------- ### Run All Development Servers Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Start the development servers for both the frontend and backend applications simultaneously. Ensure all necessary environment secrets are configured before executing this command. ```bash pnpm dev ``` -------------------------------- ### Run Frontend Development Server Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Start only the frontend development server. This is useful when you want to focus solely on frontend development or when the backend is hosted separately. ```bash pnpm dev --filter=frontend ``` -------------------------------- ### Run Backend Development Server Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Start only the backend development server. This command is useful for working on API logic or when the frontend is being developed independently. ```bash pnpm dev --filter=backend ``` -------------------------------- ### Check Git Version Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Verify if Git is installed on your system by running this command in your terminal. A version number should be displayed if Git is correctly set up. ```bash git --version ``` -------------------------------- ### Enable Corepack for PNPM Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Enable Corepack, a tool that helps manage package manager binaries like PNPM. This command ensures that the correct version of PNPM is used for installing project dependencies. ```bash corepack enable ``` -------------------------------- ### Clone Repository via HTTP Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Clone the uabc-web project repository using the HTTP protocol. This command downloads all project files to your local machine, creating a new directory named 'uabc-web'. ```bash git clone https://github.com/UoaWDCC/uabc-web.git ``` -------------------------------- ### Clone Repository via SSH Source: https://github.com/uoawdcc/uabc-web/wiki/Onboarding Clone the uabc-web project repository using the SSH protocol. This method requires SSH keys to be properly configured on your system and GitHub account for authentication. ```bash git clone git@github.com:UoaWDCC/uabc-web.git ``` -------------------------------- ### Install and Use Node.js with nvm Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md These commands are used to install the correct Node.js version specified in the project's configuration and then switch to use that version. This ensures that all developers are working with the same Node.js environment, preventing compatibility issues. ```bash nvm install nvm use ``` -------------------------------- ### Start All Applications in Development Mode with pnpm Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This command initiates all applications within the monorepo in development mode. It typically starts both the frontend and backend servers concurrently, allowing for integrated local development and testing of the entire system. ```bash pnpm dev ``` -------------------------------- ### Examples of Semantic Commit Messages Source: https://github.com/uoawdcc/uabc-web/wiki/Contributing-Guidelines This provides concrete examples of how to format semantic commit messages using the approved types. Each example demonstrates the `type: subject` format, illustrating common use cases for different commit categories. ```text chore: add Oyster build script docs: explain hat wobble feat: add beta sequence fix: remove broken confirmation message refactor: share logic between 4d3d3d3 and flarhgunnstow style: convert tabs to spaces test: ensure Tayne retains clothing ``` -------------------------------- ### Enable Corepack and Install Project Dependencies with pnpm Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This sequence of commands first enables Corepack, a tool that helps manage package managers like pnpm, ensuring it's available. Subsequently, it installs all project dependencies using pnpm, preparing the monorepo for development by fetching all required packages. ```bash corepack enable pnpm install ``` -------------------------------- ### Yamada-UI Basic Component Styling Example Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI Demonstrates fundamental usage of Yamada-UI's `Center` and `Box` components, showcasing how to apply common styling props like `w`, `bg`, `p`, `rounded`, `color`, `h`, and `bgGradient` for layout and visual presentation. ```tsx
Calc
``` -------------------------------- ### Turborepo Monorepo Management Commands Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Provides essential `pnpm` commands for managing the UABC Web monorepo, including dependency installation, running development servers, building projects, and executing tests, with options to filter operations by specific workspaces. ```bash # Install dependencies pnpm install # Development pnpm dev # Run all apps in development mode pnpm dev --filter frontend # Run only frontend pnpm dev --filter backend # Run only backend # Building pnpm build # Build all packages and apps pnpm build --filter frontend # Build frontend only pnpm build --filter backend # Build backend only # Testing pnpm test # Run all tests pnpm test --filter frontend # Test frontend only pnpm test --filter backend # Test backend only # Other useful filter commands pnpm lint --filter frontend # Lint frontend only pnpm check-types --filter backend # Check types backend only ``` -------------------------------- ### Run Specific Applications in Development Mode with pnpm Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md These commands allow developers to start only a specific application (either the frontend or the backend) within the monorepo in development mode. This is particularly useful for focused development, debugging, or when only one part of the system needs to be active. ```bash # Run only the frontend pnpm dev --filter=frontend # Run only the backend pnpm dev --filter=backend ``` -------------------------------- ### Using Layout Primitives for Structured UI in Yamada-UI Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI This example illustrates the best practice of using Yamada-UI's layout primitives like HStack for arranging components. It contrasts avoiding inline styles and manual margins with the preferred method of using HStack and its "gap" prop for consistent spacing and improved readability. ```tsx
Item 1 Item 2
``` ```tsx Item 1 Item 2 ``` -------------------------------- ### Using Semantic Tokens for Styling in Yamada-UI Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI This example demonstrates the recommended approach for styling components in Yamada-UI using semantic tokens instead of hardcoded pixel values. It shows how "md" and "lg" tokens provide consistency, theme adaptability, and maintainability for padding and font sizes. ```tsx Hello ``` ```tsx Hello ``` -------------------------------- ### Google OAuth Authorized JavaScript Origins Configuration Source: https://github.com/uoawdcc/uabc-web/wiki/Backend-Architecture This snippet provides the authorized JavaScript origins required for Google OAuth setup. These URLs specify the domains from which your application can request authentication. ```Text http://localhost:3000 https://your-website.fly.dev ``` -------------------------------- ### Using CSS Value Functions in Yamada-UI Style Props Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI This section provides examples of how Yamada-UI's CSS Value Functions can be used directly within style props for dynamic calculations, comparisons, and color manipulations. These functions allow for responsive and theme-consistent styles without leaving component code. ```tsx w="calc(lg / 2)" ``` ```tsx bg="mix(red.500, blue.500)" ``` ```tsx bg="tint(purple.500, 50%)" ``` ```tsx bgGradient="linear(to-r, purple.500, blue.400)" ``` -------------------------------- ### Setting Up Environment Variables Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This bash script outlines the process for initializing environment variable files across a monorepo structure. It instructs users to copy `.env.example` templates to `.env` files in the root, frontend, and backend directories, which is crucial for configuring application settings securely. ```bash # Root directory cp .env.example .env # Frontend cp apps/frontend/.env.example apps/frontend/.env # Backend cp apps/backend/.env.example apps/backend/.env ``` -------------------------------- ### Biome CLI Commands for Formatting and Linting Source: https://github.com/uoawdcc/uabc-web/wiki/Styling-and-Convention Demonstrates common Biome CLI commands for checking code formatting, linting, and performing both checks simultaneously across the project. These commands are typically run via pnpm. ```bash pnpm biome format . pnpm biome lint . pnpm biome check . ``` -------------------------------- ### Git Branching Workflow for uabc-web Source: https://github.com/uoawdcc/uabc-web/wiki/Contributing-Guidelines This snippet provides the command-line interface (CLI) steps to create a new feature branch from the `master` branch. It ensures the local `master` is up-to-date before creating the new branch, following the project's branch naming convention. ```bash git checkout master git pull git checkout -b ``` -------------------------------- ### Running a Specific Test File with Vitest Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This command allows developers to execute a single test file or a set of tests matching a specific pattern using Vitest. It's useful for focused development and debugging, enabling quick iteration on individual components without running the entire test suite. ```bash # src/app/example-double-admin-count/route.ts can be any file path that points to a test. # Or you can replace the file path with a pattern (like a file name) pnpm test src/app/example-double-admin-count/route.test.ts ``` -------------------------------- ### Git Workflow for Creating a New Feature Branch Source: https://github.com/uoawdcc/uabc-web/blob/master/CONTRIBUTING.md This snippet demonstrates the standard Git workflow for initiating work on a new feature or bug fix. It ensures the local master branch is up-to-date before creating a new branch, which should be named using the associated issue number for clarity and tracking. ```bash git checkout master git pull # You need to replace with the issue number you are working on git checkout -b - ``` -------------------------------- ### Running All Project Tests with Vitest Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This command executes all automated tests configured within the project using Vitest as the test runner. It's a quick way to verify the overall health and functionality of the codebase, ensuring that recent changes haven't introduced regressions. ```bash pnpm test ``` -------------------------------- ### Defining Internal Workspace Dependencies Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Illustrates the `package.json` syntax for declaring dependencies on other packages within the same monorepo workspace, using the `workspace:*` protocol to ensure consistent versioning and linking. ```json { "dependencies": { "@repo/ui": "workspace:*", "@repo/theme": "workspace:*" } } ``` -------------------------------- ### Documenting TypeScript Functions with JSDoc Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This snippet demonstrates the recommended JSDoc syntax for documenting TypeScript functions. It shows how to describe the function's purpose, parameters, and return value, enhancing code readability and maintainability for other developers. ```typescript /** * Adds two numbers together * * @param a The first number * @param b The second number * @returns The sum of the two numbers */ export const add = (a: number, b: number): number => a + b ``` -------------------------------- ### Applying Style Props for Direct Component Styling in Yamada-UI Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI This snippet demonstrates how Yamada-UI's style props enable direct, theme-aware styling on components. It shows how shorthand props like "w", "p", "bg", and "color" can be used with theme tokens to efficiently apply width, padding, background, and text color. ```tsx This is Box ``` -------------------------------- ### Manually Run Biome Checks for Code Quality Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md These commands allow developers to manually run Biome for checking code formatting, linting, or both. This ensures code consistency and adherence to project standards before committing, helping to maintain a clean and high-quality codebase. ```bash pnpm biome format . pnpm biome lint . pnpm biome check . ``` -------------------------------- ### Prefer HStack/VStack for Layout in Yamada-UI Source: https://github.com/uoawdcc/uabc-web/wiki/Yamada-UI Illustrates the recommended practice of using `HStack` or `VStack` for horizontal and vertical layouts in Yamada-UI, respectively, instead of the more generic `Flex` component. This approach improves code clarity and maintainability by expressing layout intent more explicitly. ```tsx Item 1 Item 2 ``` ```tsx Item 1 Item 2 ``` -------------------------------- ### Turborepo Task Pipeline Configuration Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Defines the task pipeline, global dependencies, and output caching for a Turborepo monorepo. It specifies build, lint, and dev tasks with their respective configurations, including dependencies and cache settings. ```JSON { "$schema": "https://turbo.build/schema.json", "globalDependencies": ["**/.env.*local"], "pipeline": { "build": { "dependsOn": ["^build"], "outputs": [".next/**", "!.next/cache/**"] }, "lint": {}, "dev": { "cache": false, "persistent": true } } } ``` -------------------------------- ### PNPM Workspace Structure Definition Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Configures the PNPM workspace, specifying the directories where packages are located within the monorepo. This allows PNPM to manage dependencies and link packages across the workspace. ```YAML packages: - 'apps/*' - 'packages/*' ``` -------------------------------- ### Resolve PNPM Dependency Issues Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Provides a command-line solution to clean and reinstall dependencies in a PNPM workspace. This is useful for resolving corrupted node_modules or dependency conflicts. ```Bash # Clean install pnpm clean pnpm install ``` -------------------------------- ### UABC Web Monorepo Directory Structure Source: https://github.com/uoawdcc/uabc-web/wiki/Turborepo-Architecture Defines the hierarchical organization of the UABC Web monorepo, distinguishing between application directories ('apps') and shared utility packages ('packages'). ```text uabc-web/ ├── apps/ # Application code │ ├── backend/ # Payload CMS │ └── frontend/ # Next.js frontend ├── packages/ # Shared packages │ ├── tailwind-config/ # Shared Tailwind configuration │ ├── test-config/ # Testing utilities and setup │ ├── theme/ # Shared theme configuration │ ├── typescript-config/ # Shared TypeScript configs │ └── ui/ # Shared UI components ``` -------------------------------- ### Updating Yamada UI Theme Type Definitions Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This command utilizes the Yamada CLI to update type definitions for Yamada UI theme tokens, ensuring proper TypeScript completions for custom theme properties. It processes theme tokens from `./src/theme` to generate necessary theme files, improving developer experience with accurate type hints. ```bash pnpm theme ``` -------------------------------- ### Generating PayloadCMS Types Source: https://github.com/uoawdcc/uabc-web/blob/master/README.md This command triggers Payload's built-in code generation feature to create TypeScript type definitions for the project's data structures. Running this ensures that the application has accurate type completions and strong typing for content managed by PayloadCMS. ```bash pnpm generate:types ``` -------------------------------- ### APIDOC: GameSessionSchedule Collection Schema Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture Defines the schema for the 'GameSessionSchedule' collection, which serves as a template for individual game sessions. It includes fields for session times, capacities, and a reference to the related 'Semester' document. ```APIDOC Collection: GameSessionSchedule Description: Acts as a template for gameSession, with fields deriving data for gameSession. Notes: - startTime, endTime: Represent full timestamps, but only hours and minutes are extracted (e.g., 12:00). - bookingStart, bookingEnd: Not recorded here as they depend on the related Semester; default close time is a day before the session starts. Fields: id: Type: string Description: The document ID Example: "" startTime: Type: timestamp Description: Time when the game session actually is Example: 01 January 1970 at 12:00:00 endTime: Type: timestamp Description: Time when the game session actually ends Example: 01 January 1970 at 12:00:00 capacity: Type: number Description: Maximum capacity of members. Example: 10 casualCapacity: Type: number Description: Maximum capacity of casuals. Example: 5 semester: Type: string Description: The document ID of the session's related Semester Example: "" ``` -------------------------------- ### Payload CMS `User` Collection Schema Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture The `User` collection manages core user data. Some fields are optional and are intended for additional information collected during post-signup onboarding processes. ```APIDOC User: id: string (The document ID) firstName: string (First name of the user) [John] lastName: string (Last name of the user) [Doe] gender?: string (Gender of the user) [Non Binary] phoneNumber?: string (Phone number of the user) [021 2345 6789] playLevel?: PlayLevel (The play level of the user) [beginner] gender?: Gender (The gender of the user) dietaryRequirements?: string (Dietary requirements of the user) [Vegan] studentId?: string (The student ID of the user) [1234565677] studentUpi?: string (The student UPI of the user) [abc123] university?: string (The university of the user) [UoA] role: member|casual|admin (Internal system role of the user) [member] remainingSessions: number (Remaining court booking sessions) [12] email: string (The email of the user) [johndoe@gmail.com] image?: string (An optional profile image) [https://image.com] ``` -------------------------------- ### Event Collection API Documentation Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture This collection is used by club administrators to display and manage events on the website, providing details such as title, descriptions, and associated images or links. ```APIDOC Event: id: string (The document ID) title: string (The name of the event, e.g., UABC Welcome Party) longDescription: richText (The long description of the event) shortDescription: text (The short description of the event, e.g., A cool event) eventImage: Media (The image preview of the event) button1: Link (The 1st button link of the event) button2: Link (The 2nd button link of the event) ``` -------------------------------- ### Valid Semantic Commit Message Types Source: https://github.com/uoawdcc/uabc-web/wiki/Contributing-Guidelines This lists the predefined commit types that must be used when writing semantic commit messages for the uabc-web project. These types are enforced by commit lints to maintain a consistent commit history. ```text [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] ``` -------------------------------- ### APIDOC: Semester Collection Schema Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture Defines the schema for the 'Semester' collection, which manages semester-specific data for game sessions. It includes fields for semester duration, break periods, and booking open times, with specific notes on timestamp interpretation. ```APIDOC Collection: Semester Description: Manages semester data for game sessions. Notes: - bookingOpenTime: Only hours and minutes are extracted (e.g., 12:00). - startDate, endDate, breakStart, breakEnd: Only dates are considered, time is assumed to be 00:00. - weekday: Will have an enum (tech debt). Fields: id: Type: string Description: The document ID Example: "" name: Type: string Description: The semester's name Example: Semester 2 2024 startDate: Type: timestamp Description: The start date of the semester Example: 06 September 2025 at 00:00:00 endDate: Type: timestamp Description: The end date of the semester Example: 06 September 2025 at 00:00:00 breakStart: Type: timestamp Description: The start date of semester break Example: 06 September 2025 at 00:00:00 breakEnd: Type: timestamp Description: The end date of semester break Example: 06 September 2025 at 00:00:00 bookingOpenDay: Type: weekday Description: When the bookings open Example: Wednesday bookingOpenTime: Type: timestamp Description: What time the booking open on open day Example: 01 January 1970 at 12:00:00 ``` -------------------------------- ### GameSession Collection API Documentation Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture The `GameSession` collection stores copies of data from `GameSessionSchedule`, acting as a child with relevant booking information. Most fields are derived from `gameSessionSchedule`, though some can be edited. `startTime` and `endTime` represent the actual session times. ```APIDOC GameSession: id: string (The document ID) gameSessionSchedule?: GameSessionSchedule (Document ID) semester: Semester (The Semester document) startTime: timestamp (Game session start time, e.g., 06 September 2024 at 00:00:00) endTime: timestamp (Game session end time, e.g., 06 September 2024 at 00:00:00) capacity: number (Max capacity of members, e.g., 60) casualCapacity: number (Max capacity of casuals, e.g., 5) ``` -------------------------------- ### Booking Collection API Documentation Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture The `Booking` collection links `user` and `gameSession` collections, indicating a user's reservation for a specific session. The number of bookings for a `gameSession` should limit available slots. ```APIDOC Booking: id: string (The document ID) user: User (The User document ID associated to this booking) gameSession: GameSession (The document of the game session) playLevel: PlayLevel (The player's skill level, e.g., PlayLevel.beginner) ``` -------------------------------- ### Google OAuth Authorized Redirect URIs Configuration Source: https://github.com/uoawdcc/uabc-web/wiki/Backend-Architecture This snippet provides the authorized redirect URIs for Google OAuth. After successful authentication, Google will redirect users back to one of these specified URLs. ```Text http://localhost:3000/api/auth/google/callback https://your-website.fly.dev/api/auth/google/callback/ ``` -------------------------------- ### Generate JWT Secret using Node.js Crypto Source: https://github.com/uoawdcc/uabc-web/wiki/Backend-Architecture This Node.js command generates a cryptographically secure random hexadecimal string suitable for use as a JWT secret. This secret is essential for signing and verifying JSON Web Tokens. ```Node.js node -e "console.log(crypto.randomBytes(64).toString('hex'))" ``` -------------------------------- ### Payload CMS `Authentication` Collection Schema Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture The `Authentication` collection is designed to manage user authentication information securely, preventing exposure of sensitive data. It stores details related to user authentication sessions. ```APIDOC Authentication: id: string (The document ID) user: User (The user that's related to this auth) email: string (The user email that's related to this auth) password?: string (The hashed password) provider: 'google' (The provider of the authentication used) [google] providerAccountId?: string (The google account id) refreshToken?: string (The refresh token of the user authentication) accessToken: string (The access token of the user authentication) expiresAt: number (The expiration time of the access token) tokenType?: string (The type of token) scope?: string (The scope of the token) idToken?: string (The id token of the user authentication) ``` -------------------------------- ### Payload CMS `Admin` Collection Schema Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture This section describes the default auto-generated collection data for the `Admin` collection in Payload CMS. Note that several other auto-generated fields like `resetPasswordToken`, `resetPasswordExpiration`, `salt`, `hash`, `loginAttempts`, `lockUntil`, and `password` are not explicitly listed here. ```APIDOC Admin: id: string (The document ID) email: string (The email of the admin) [johndoe@gmail.com] password?: string (The hashed password of the admin) ``` -------------------------------- ### JavaScript Convert Date to Milliseconds in Day Source: https://github.com/uoawdcc/uabc-web/wiki/MongoDB-Architecture This JavaScript snippet calculates the total milliseconds from the beginning of the day (00:00:00) up to the current hour and minute of a `Date` object. It's useful for extracting the time-of-day component from a timestamp. ```javascript const date = new Date(); const totalMiliseconds = date.getHours() * 60 * 60 * 1000 + date.getMinutes() * 60 * 1000; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.