🧭 Get Started

• Branching Instruction
• Codespace Instruction
• Commit Message Standard
• Commit Types and Representative Emojis
• Project Structure

🫚 Branching Instruction

Any major working branch should be created with supervision.

Create a branch

1. Above the repository, click # Branches tab next to the branch-name ▼ button.
2. Press New branch at the top-right.
3. Type First-Name-branch, all characters must be lowercase with - for spacing, except name is Pascal case. (e.g. Foo-gift)
4. Click branch-name ▼ and switch to the CORRECT working branch.
5. Press Create new branch to create your working branch.

Switch between branches

1. Click branch-name ▼ under the Demo repository name. (main is default branch)
2. Click the branch name to switch the working branch. (e.g. Foo-gift)

You can also switch branches in your Codespace and VS Code, see the Codespace Instruction.

---
title: Example Branch Diagram
---
%%{init: { 'theme': 'base' } }%%
gitGraph LR:
    commit
    branch shop
    commit tag: "Create by Principal Engineer" type: HIGHLIGHT
    branch gift
    commit tag: "Create by Supervisor" type: HIGHLIGHT
    branch Foo-gift
    commit tag: "Create by Developer Foo"
    checkout gift
    branch Bar-gift
    commit tag: "Create by Developer Bar"
    commit
    checkout gift
    commit
    checkout Foo-gift
    commit
    checkout gift
    merge Foo-gift tag: "Approve by Lead"
    commit
    commit
    merge Bar-gift tag: "Approve by Supervisor"
    checkout shop
    commit
    merge gift tag: "Review by Principal Engineer"
    checkout main
    merge shop tag: "Approve by Principal Engineer"

Loading

🔳 Codespace Instruction

Create a codespace

1. Click <> Code ▼ at the top of the repository.
2. Switch to the Codespaces tab.
3. Click Create codespace on main or +.
4. The container will automatically build for you.

You can rename the Codespace by clicking the three dots next to the Codespace's name on GitHub.

5. Click ... next to current codespace.
6. Select Open in Visual Studio Code to open the codespace directly in VS Code.

Switch branches.

1. At the botton-left of the VS Code, click the branch button. (Next to the blue codespace button, default is main)
2. Select the working branch from the branches section in the middle of the pop-up menu.

Change directory.

1. Press ctrl + ` to open the terminal.
2. Type cd demo to change directory to 📂 demo.

Delete a codespace.

1. Click <> Code ▼ .
2. Click ... next to current codespace.
3. Select Delete .

📤 Commit Message Standard

It is Mandatory to use Conventional Commits when writing the commit message.

All characters in the commit message description must be lowercase and written in primitive form (e.g., create, not creates or created), with the following exceptions:

• Dedicated file name (e.g., README).
• Special naming convention, (e.g., Components).

The commit message description should be concise and end WITHOUT a . (period).

Conventional Commits Format

<emoji> <type>[optional scope]: <description> <pull request id>
        [optional body]
        [optional footer(s)]
        

• General Commit Example:

  ✨ feat: create language dropdown list

• Commit with Pull Request Example:

  ✨ feat(lang): add Spanish to the language dropdown list (#123)

• BREAKING CHANGE (Commit type follow by !) Example:

  ✨ feat!: remove language dropdown list
                  The language dropdown list is replaced by an AI bot. 🤖
                  ----------
                  Co-authored-by: Think Round Admin

If you still uncertain about the instructions, please watch this video.

🌟 Commit Types and Representative Emojis

How to open emoji keyboard?

Window: ⊞ + .
MacOS: Control + ⌘ + Space

Common Commit Types

Types	Description	Emoji Name
✨ feat:	Add or remove feature or functionality	✨ sparkles
🐛 fix:	Bug or error fix	🐛 bug
📚 docs:	Documentation changes or updates	📚 books
🎨 style:	Only code style, formatting, or whitespace changes, no actual code changes	🎨 artist palette
🔨 refactor:	Code changes for structural improvement without fixing a bug or adding a feature	🔨 hammer
🧹 chore:	Routine tasks, maintenance, or other miscellaneous changes that don't modify src or test files	🧹 broom
🚀 pref:	Optimizations made to improve the performance of the code	🚀 rocket
🧪 test:	Additions, modifications, or fixes to tests	🧪 test tube
🛠️ build:	Changes that affect the build system or external dependencies (e.g. scope: npm)	🛠️ hammer and wrench
⚙️ ci:	Changes to CI configuration files and scripts	⚙️ gear
♻️ revert:	Revert a previous commit	♻️ recycling symbol

Special Commit Types

Types	Description	Emoji Name
🎉 initial:	Initial commit	🎉 tada or party popper
🔒 Security:	Changes related to security improvements or fixes	🔒 locked

🗂️ Project Structure

        📂demo
            📂public
                📂assets
                    🖼️banner.png
                    🖼️logo.png
                📂static
                    🖼️gift-1.png
                    🖼️gift-2.png
                    🖼️gift-3.png
                    🖼️merchandise-1.png
                    🖼️merchandise-2.png
                    🖼️merchandise-3.png
            📂src
                📂app
                    📂(client)              //Route Groups
                        📂blog
                            📄page.tsx
                        📂product
                            📄page.tsx
                        📂shop
                            📄page.tsx
                    📂(cms)                 //Route Groups
                        📂admin
                            📂blog
                                📄page.tsx
                            📂product
                                📄page.tsx
                            📂shop
                                📂gift
                                    📄page.tsx
                                📂merchandise
                                    📄page.tsx
                                📄page.tsx
                        📄page.tsx
                    📂api
                        📄route.tsx
                📂components
                    📂buttons
                        📄Cancel.tsx
                        📄Create.tsx
                        📄Delete.tsx
                        📄Edit.tsx
                        📄Submit.tsx
                    📂client
                        📂blog
                            📄Post.tsx
                        📂product
                            📄Merchandise.tsx
                        📂shop
                            📄Cart.tsx
                    📂homepage
                        📄Header.tsx
                    📂navbar
                        📄Navbar.tsx
                📂utils
                    📂hooks
                        📄useCancel.tsx
                        📄useCreate.tsx
                        📄useDelete.tsx
                        📄useEdit.tsx
                        📄useSubmit.tsx