GearFestival Frontend

Frontend interface for the GearFestival website.

⚠️ Warning: This document might not be zero-error. If you encounter any problems, please contact Leon on Discord.

Prerequisites

Please install the following.

• Node.js: v20 or above is required. v20.8.1 is recommended.
• pnpm: v8 or above is required. latest version is recommended.
• Git: latest version is recommended.

Setting Up the Development Environment

1. VSCode is recommended for development.

2. Install the following extensions (Optional but highly recommended):

   • Astro
   • ESLint
   • Prettier
   • Tailwind CSS IntelliSense

3. Setting the VSCode workspace settings (Optional but highly recommended):

   1. Open the command palette (Ctrl + Shift + P)

   2. Type "Preferences: Open Settings (JSON)" and press Enter

   3. Insert the following code into the settings.json file

      {
        "tailwindCSS.experimental.classRegex": [
          ["clsx\\(([^)]_)\\)", "(?:'|\"|`)([^']_)(?:'|\"|`)"]
        ],
        "prettier.documentSelectors": ["**/*.astro"],
        "[astro]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "eslint.validate": [
          "javascript",
          "javascriptreact",
          "astro",
          "typescript",
          "typescriptreact"
        ],
        "files.insertFinalNewline": true
      }

      Note: Please make sure you understand what you are doing before changing the settings.

      Here is a brief explanation of the settings.

      tailwindCSS.experimental.classRegex is for the Tailwind CSS and clsx() support.

      prettier.documentSelectors (astro) and [astro]: { "editor.defaultFormatter": "esbenp.prettier-vscode" } are for the Prettier support for Astro files.

      eslint.validate is for the ESLint support.

      files.insertFinalNewline is for the final newline at the end of the file which if set to false, you may encounter some problems with Prettier.

4. Save the file and you are done!

Getting Started

1. Clone this repository

   git clone https://github.com/esc-chula/gearfest-frontend.git

   or download the zip file and extract it.

   Note: Make sure you go into the directory after cloning or extracting the zip file.

   cd gearfest-frontend

   📣 For Windows users, please run the following command to prevent line ending issues.

   git config --global core.autocrlf false

2. Install dependencies

   pnpm install

   Make sure that all dependencies are installed successfully.

3. Run the development server

   pnpm dev

4. Open localhost:4321 in your browser. Done!

Contributing

1. Create a new branch

   git checkout -b <branch-name> origin/dev

   Note: In case you don't confident about how to name your branch, the branch name from Linear is a good choice.

2. Make your changes

3. Stage and commit your changes

   git add .
   
   git commit -m "<commit-message>"

   Note: Don't forget to use the conventional commit format for your commit message.

4. Push your changes

   git push origin <branch-name>

5. Create a pull request to the dev branch in GitHub

6. Wait for the code to be reviewed and merged

7. Repeat

   Note: Don't forget to always pull the latest changes from the dev branch before creating a new branch.

   git pull origin dev

If you have any questions, please contact Leon on Discord.

Enjoy! 😋

Conventional Commit Format

In short, the commit message should look like this:

git commit -m "feat: <what-you-did>"

# or

git commit -m "fix: <what-you-fixed>"

# or

git commit -m "refactor: <what-you-refactored>"

The commit message should start with one of the following types:

• feat: A new feature
• fix: A bug fix
• refactor: A code change that neither fixes a bug nor adds a feature
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• docs: Documentation only changes
• chore: Changes to the build process or auxiliary tools and libraries

For more information, please read the conventional commit format documentation.