📖 docs (readme): add code conventions and important note

README.md

@@ -2,6 +2,10 @@
 
 RSSA - Front End
 
+
+> [!IMPORTANT]
+> Read this following instructions before doing your job
+
 ## Framework Guide
 
 - [Vue Style Guide](https://vuejs.org/style-guide)
@@ -58,6 +62,26 @@ The basic development workflow follows these steps:
 - Pages load the appropriate flow from `components/flow/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 
+## Code Conventions
+
+- Under the script setup block, putting things in group with the following order:
+   - Imports → all dependencies, sorted by external, alias (~), and relative imports.
+   - Props & Emits → clearly define component inputs & outputs.
+   - State & Computed → all ref, reactive, and computed variables grouped together.
+   - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
+   - Functions → async first (fetching, API calls), then utility & event handlers.
+   - Watchers → if needed, put them at the bottom.
+   - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
+- Declaration Naming
+   - Uses PascalCase for `type` naming
+   - Uses camelCase for `variable` and `const` naming
+   - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
+      for example: `person_name` indicates it is an attribute `name` from object `person`
+- Looping
+   - Uses `i`, `j`, `k` as variable for `for` looping index
+   - Uses `item` as object instantition for `forEach` loop callback
+   - Uses `item` as object instantition for `v-for` loop callback in the template
+
 ## Git Workflows
 
 The basic git workflow follows these steps: