patch: Review & Polish Project Code Structure

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Report bug(s) encountered with the gallery website!
 title: "[Bug]"
 labels: bug
 assignees: tjtanjin
-
 ---
 
 **Bug Description:**
 Provide a clear and concise description of the bug.
 
 **Steps To Reproduce:**
 Steps to reproduce the bug behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,13 +24,15 @@ Describe the behavior that is expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
+
+- OS: [e.g. iOS]
+- Browser: [e.g. chrome, safari]
 
 **Mobile (please complete the following information):**
- - Device: [e.g. iPhone12]
- - OS: [e.g. iOS8.1]
- - Browser: [e.g. edge, firefox]
+
+- Device: [e.g. iPhone12]
+- OS: [e.g. iOS8.1]
+- Browser: [e.g. edge, firefox]
 
 **Additional Context:**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea to improve the gallery website!
 title: "[Feat]"
 labels: enhancement
 assignees: tjtanjin
-
 ---
 
 **Is Your Feature Request Related to a Problem? Please describe.**

.github/ISSUE_TEMPLATE/help.md

@@ -4,7 +4,6 @@ about: Seek help with using the gallery website!
 title: "[Help]"
 labels: help wanted
 assignees: tjtanjin
-
 ---
 
 **Help Description**

.github/ISSUE_TEMPLATE/task.md

@@ -2,7 +2,6 @@
 name: Task
 about: Create a task to track work to be done for the gallery website (internal use)!
 title: "[Task]"
-
 ---
 
 **Task Description:**
@@ -15,6 +14,7 @@ State the expected deliverable(s) for this task (e.g. lint.yml file, configured
 Add any other context about the task here.
 
 **Reminders:**
+
 - Assign task to a project (required)
 - Assign task to a sprint (required)
 - Assign task to a developer (optional)

.github/pull_request_template.md

@@ -23,4 +23,4 @@ Please give a short overview/explanation on the approach taken to resolve the is
 
 - [ ] The commit message follows our adopted [guidelines](https://www.conventionalcommits.org/en/v1.0.0/)
 - [ ] Testing has been done for the change(s) added (for bug fixes/features)
-- [ ] Relevant comments/docs have been added/updated (for bug fixes/features)
+- [ ] Relevant comments/docs have been added/updated (for bug fixes/features)

.github/workflows/format.yaml

@@ -0,0 +1,12 @@
+name: Prettier Workflow
+run-name: ${{ github.actor }} running the job
+on: [push]
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install
+        run: npm install
+      - name: Run prettier check
+        run: npm run format:check

.github/workflows/lint.yaml

@@ -9,4 +9,4 @@ jobs:
       - name: Install
         run: npm install
       - name: Run ESLint
-        run: npm run lint
+        run: npm run lint

.husky/pre-commit

@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npm run lint
+npm run format:check

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -8,15 +8,16 @@
 </p>
 
 ## Table of Contents
-* [Introduction](#introduction)
-* [Features](#features)
-* [Technologies](#technologies)
-* [Quickstart](#quickstart)
-* [Documentation](#documentation)
-* [Team](#team)
-* [Contributing](#contributing)
-* [Support](#support)
-* [Attributions](#attributions)
+
+- [Introduction](#introduction)
+- [Features](#features)
+- [Technologies](#technologies)
+- [Quickstart](#quickstart)
+- [Documentation](#documentation)
+- [Team](#team)
+- [Contributing](#contributing)
+- [Support](#support)
+- [Attributions](#attributions)
 
 ### Introduction
 
@@ -38,7 +39,9 @@ The React ChatBotify Gallery Website offers the following core features:
 The above list is not exhaustive, but represents the majority of the key features for the gallery project.
 
 ### Technologies
+
 Technologies used by React ChatBotify Gallery Website are as below:
+
 #### Done with:
 
 <p align="center">
@@ -55,19 +58,23 @@ Typescript
 </p>
 
 #### Project Repository
+
 - https://github.com/tjtanjin/react-chatbotify-gallery-website
 
 ### Team
-* [Tan Jin](https://github.com/tjtanjin)
+
+- [Tan Jin](https://github.com/tjtanjin)
 
 // todo: the team will be expanded once members are confirmed
 
 ### Contributing
+
 If you are looking to contribute to the project, you may find the [**Developer Guide**](https://github.com/tjtanjin/react-chatbotify-gallery-website/blob/main/docs/DeveloperGuide.md) useful.
 
 In general, the forking workflow is encouraged and you may open a pull request with clear descriptions on the changes and what they are intended to do (enhancement, bug fixes etc). Alternatively, you may simply raise bugs or suggestions by opening an [**issue**](https://github.com/tjtanjin/react-chatbotify-gallery-website/issues) or raising it up on [**discord**](https://discord.gg/6R4DK4G5Zh).
 
 Note: Templates have been created for pull requests and issues to guide you in the process.
 
 ### Support
-If there are any questions pertaining to the application itself (usage or implementation wise), you may create an [**issue**](https://github.com/tjtanjin/react-chatbotify-gallery-website/issues), raise it up on [**discord**](https://discord.gg/6R4DK4G5Zh), or drop me an email at: **[email protected].**
+
+If there are any questions pertaining to the application itself (usage or implementation wise), you may create an [**issue**](https://github.com/tjtanjin/react-chatbotify-gallery-website/issues), raise it up on [**discord**](https://discord.gg/6R4DK4G5Zh), or drop me an email at: **[email protected].**

docs/DeveloperGuide.md

@@ -5,56 +5,58 @@
 
 ## Table of Contents
 
-* [Introduction](#introduction)
-* [Navigating this Developer Guide](#navigating-this-developer-guide)
-* [Design](#design)
-* [Implementation](#implementation)
-* [Code Documentation](#code-documentation)
-* [Testing](#testing)
-* [Final Notes](#final-notes)
+- [Introduction](#introduction)
+- [Navigating this Developer Guide](#navigating-this-developer-guide)
+- [Design](#design)
+- [Implementation](#implementation)
+- [Code Documentation](#code-documentation)
+- [Testing](#testing)
+- [Final Notes](#final-notes)
 
 <div  style="page-break-after: always;"></div>
 
 ## Introduction
 
-Welcome to the Developer Guide for the React Chatbotify Gallery Website project. Before diving into this guide, ensure you have gone through the project [*README*](https://github.com/your-repo/react-chatbotify-gallery-website/blob/main/README.md) for an overview. This guide assumes you have a **basic understanding** of [**React**](https://reactjs.org/), [**TypeScript**](https://www.typescriptlang.org/) and [**TailwindCSS**](https://tailwindcss.com/). In addition, you should also be familiar with [**React ChatBotify**](https://react-chatbotify.com), which is the core library that this project complements.
+Welcome to the Developer Guide for the React Chatbotify Gallery Website project. Before diving into this guide, ensure you have gone through the project [_README_](https://github.com/your-repo/react-chatbotify-gallery-website/blob/main/README.md) for an overview. This guide assumes you have a **basic understanding** of [**React**](https://reactjs.org/), [**TypeScript**](https://www.typescriptlang.org/) and [**TailwindCSS**](https://tailwindcss.com/). In addition, you should also be familiar with [**React ChatBotify**](https://react-chatbotify.com), which is the core library that this project complements.
 
 ## Navigating this Developer Guide
 
 To facilitate your reading, take note of the following syntaxes used throughout this guide:
 
-| Syntax       | Description                                                                                   |
-|--------------|-----------------------------------------------------------------------------------------------|
-| `Code`       | Denotes functions, components, or code-related references (e.g., `App`, `useEffect`)          |
-| *Italics*    | Refers to folder or file names (e.g., *App.js*, *components*)                                 |
-| **Bold**     | Highlights important keywords or concepts                                                     |
+| Syntax    | Description                                                                          |
+| --------- | ------------------------------------------------------------------------------------ |
+| `Code`    | Denotes functions, components, or code-related references (e.g., `App`, `useEffect`) |
+| _Italics_ | Refers to folder or file names (e.g., _App.js_, _components_)                        |
+| **Bold**  | Highlights important keywords or concepts                                            |
 
 <div  style="page-break-after: always;"></div>
 
 ## Setup
 
 Setting up the project is relatively simple. Before you begin, ensure that you have **at least NodeJS 16.x** installed (this project was first developed on v20.3.1).
-1) Fork the [project repository](https://github.com/tjtanjin/react-chatbotify-gallery-website).
-2) Clone the **forked project** into your desired directory with:
-    ```
-    git clone {the-forked-project}.git
-    ```
-3) Next, `cd` into the project and install dependencies with:
-    ```
-    npm install
-    ```
-4) Once installations are complete, you may launch the project with:
-    ```
-    npm run start
-    ```
+
+1. Fork the [project repository](https://github.com/tjtanjin/react-chatbotify-gallery-website).
+2. Clone the **forked project** into your desired directory with:
+   ```
+   git clone {the-forked-project}.git
+   ```
+3. Next, `cd` into the project and install dependencies with:
+   ```
+   npm install
+   ```
+4. Once installations are complete, you may launch the project with:
+   ```
+   npm run start
+   ```
 
 **Note:** For internal developers, you will be provided with a `.env.development` file. It contains the variables for you to interact with the development environment APIs and make OAuth logins via the GitHub test application. For public contributors, you will have to setup your own backend API server and create your own GitHub application if necessary. However, for the majority of cases, this will **not be necessary**.
 
 ## Design
 
 ### Overview
 
-The project is neatly structured within the *src* folder, which contains subfolders with their own responsibilities:
+The project is neatly structured within the _src_ folder, which contains subfolders with their own responsibilities:
+
 - assets
 - components
 - constants
@@ -71,13 +73,15 @@ We will not be covering what each folder does - the folders are self-explanatory
 ### Gallery Pages
 
 The gallery website serves up several pages to its users, some of which are only visible if a user is logged in. The following pages are available for public use (i.e. user need not be logged in):
+
 - Home/Landing
 - Themes
 - Plugins
 - Theme Builder
 - Author Profile
 
 The following pages are only available when a user is logged in:
+
 - Personal Profile
 - Theme Upload
 - Plugin Upload
@@ -131,16 +135,19 @@ The progress of the project is tracked using [**GitHub Projects**](https://githu
 If you are looking to contribute to the project as a public contributor, then you may ignore the information above about the sprints. You are strongly encouraged to take up **good-first-issues** if it is your first time working on the project. Do also note that issues prefixed with **[Task]** are internal issues meant for team members only.
 
 ### Forking Workflow
+
 This project adopts the [**Forking Workflow**](https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow). In short, here are the steps required:
-1) Fork the repository
-2) Clone the forked repository to your local device
-3) Make your code changes
-4) Push to your forked remote repository
-5) Open a pull request from your forked repository to the upstream repository (i.e. the main repository)
+
+1. Fork the repository
+2. Clone the forked repository to your local device
+3. Make your code changes
+4. Push to your forked remote repository
+5. Open a pull request from your forked repository to the upstream repository (i.e. the main repository)
 
 In addition, developers should fill up the pull requests template diligently. This ensures that changes are well-documented and reviewed before merging.
 
 ### Commit Messages
+
 This project adopts [**Conventional Commits**](https://www.conventionalcommits.org/en/v1.0.0/), with a minor difference that **the first word after the commit type is always capitalised**. For example, notice how "A" in "Add" is capitalised in this commit message: `feat: Add initial theme builder layout`.
 
 ## Code Documentation
@@ -149,15 +156,16 @@ Adhering to code documentation best practices is crucial for maintainability. Ea
 
 ```javascript
 /**
-* Fetches gallery themes from the backend.
-* @param  {number}  page - The page number to fetch
-* @param  {number}  limit - The number of themes per page
-* @returns {Promise<Array>} An array of gallery themes
-*/
+ * Fetches gallery themes from the backend.
+ * @param  {number}  page - The page number to fetch
+ * @param  {number}  limit - The number of themes per page
+ * @returns {Promise<Array>} An array of gallery themes
+ */
 async function fetchGalleryItems(page, limit) {
   // Implementation...
 }
 ```
+
 The above shows an example code comment for a function that fetches gallery themes from the backend server.
 
 Finally, any leftover tasks or areas in the code to be revisited should be flagged with a comment like the one below:
@@ -174,4 +182,4 @@ To be updated
 
 ## Final Notes
 
-The designs in this project are not perfect. We encourage experienced developers to help seek out areas for **improvements** in the application! We value your input and welcome contributions to enhance the chatbot. Happy coding!
+The designs in this project are not perfect. We encourage experienced developers to help seek out areas for **improvements** in the application! We value your input and welcome contributions to enhance the chatbot. Happy coding!

package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.0",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.3",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.10",
     "vite-plugin-eslint": "^1.8.1",
@@ -58,7 +58,9 @@
     "build": "vite build",
     "start": "vite",
     "preview": "vite preview",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "format:write": "prettier . --write",
+    "format:check": "prettier . --check"
   },
   "eslintConfig": {
     "extends": [

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};