Collaboration

This page will go through some of the basics of how to collaborate on this project.

Project Structure

.
├── public/
│   └── assets # For storing images, icons or other media used in the frontend.
└── src/
    ├── actions # Contains server actions used for interacting with Payload CMS
    ├── app/
    │   ├── (frontend) # The router. Contains pages. 
    │   └── (payload) # Contains Payload specific routes
    ├── collections # Contains Payload CMS collection definitions
    ├── components # Houses global reuseable React components
    ├── styles/
    │   └── global.css # The global CSS file. Contains Tailwind configs as well
    ├── types # Contains TypeScript types and interfaces.
    ├── payload-types.ts # Auto-generated TypeScript types from defined Payload CMS schema. DO NOT CHANGE THIS FILE
    └── payload.config.ts # The main Payload CMS config file

Collaborative Development Workflow

• Git Branching:

  • Branches: Please create a branch for every ticket you are assigned (One branch per ticket)
  • Branch Naming: Use clear and descriptive branch names.
  • Regular Commits: Commit frequently with meaningful commit messages.
  • Pull Requests (PRs): Submit PRs for code reviews before merging into main.

• Creating Pull Requests (PRs):

  • Description: When creating PRs, please follow the format below:

    # Description
    
    *What the PR is about*
    
    # How To Review
    
    *How someone reviewing your PR has to review it*
    

  • Reviewers: Please assign Owen or Charles as the reviewer for your PRs
  • Merging: Before merging into main, please have your PR approved by either Owen or Charles

• Naming:

  • Components: For naming components, please follow PascalCase.
  • Payload Collection: Please follow PascalCase when creating new Payload Collections.
  • Everything else: Please follow camelCase.

• Creating new pages:

  • Router: Next.js utilises app routing, meaning all routes are stored inside ./src/app/. Frontend routes are stored inside ./src/app/(frontend).
  • Structure: Please follow the structure below when creating new pages:

    (frontend)
        └── routeName # Name of the route
            ├── _components # Any components that the page needs. Please note these components SHOULD NOT be imported to other pages.
            └── page.tsx # The page itself. Please name it only as page.tsx
    

• Components:

  • TypeScript: Use TypeScript for components (.tsx files). Define clear types and interfaces.
  • Tailwind CSS: Utilise Tailwind CSS utility classes for styling. Please DO NOT use pure CSS.
  • Component Creation:
    • Create a .tsx file (PascalCase) in ./components.
    • Use component-specific props and interfaces.
  • Global Components: When creating a global component, it is expected that the component will be used over and over again in many different pages. In this case, please put the global component ./src/components/ folder.
  • Page-Specific Components: When creating a page specific components, it is expected that the component will only be used for one specific page. In this case, please put the component inside ./src/app/(frontend)/routeName/_components folder.

• Code Reviews & Collaboration:

  • PR Reviews: We will provide constructive feedback on PRs. Focusing on code quality, functionality, TypeScript types, and Tailwind usage.
  • Communication: Use the WDCC Discord for questions and updates (don't be afraid to spam us with a billion questions, we're all here to learn!).
  • Pair Programming (Optional): Consider pair programming for complex features or bug fixes.
  • Regular Meetings: Attend scheduled meetings and contribute actively.

• Environment Variables & Security:

  • .env: Use .env for local development environment variables.
  • Security: DO NOT commit sensitive information to the repository. NEVER EVER COMMIT YOUR .env FILE TO THE REPOSITORY, IF I CATCH YOU DOING SO YOU ARE GONE.
  • API Keys: Store API keys and secrets securely.