isd-sgcu/johnjud-frontend

Frontend service for Johnjud project

JohnJohn

Web Application for JohnJud's website. This project is a part of johnjud_care.

Prerequisites

Please install the following.

• Node.js
• pnpm
• Git

This project use React as UI Library with Vite as development environment, and TailwindCSS as CSS Framework.

For front-end design you can see in JohnJud's Figma. You can download all resources in figma too.

For requirement Johnjud's Doc is here.

Getting Started

1. Clone this repository

# Using SSH (recommended)
git clone git@github.com:isd-sgcu/johnjud-frontend.git

# Using Https (not recommended)
https://github.com/isd-sgcu/johnjud-frontend.git

2. Go to project folder

cd johnjud-frontend

3. Install all dependencies

pnpm install

4. Run

pnpm dev

5. Go to http://localhost:5173 in your fav browser.

Contributing

We will seperate a branch for each features and each person then, create pull request for combine code together.

1. Go to dev branch and pull updated code

git checkout dev

git pull

2. Create branch and go to your branch

git branch {your_branch_name}

git checkout {your_branch_name}

Note : exmaple of {your_branch_name} is boom/feat/pet-card, aungpao/refactor/main-page

3. Push your branch upstream

git push --set-upstream origin {your_branch_name}

4. Working with your code

5. Stage and commit your changes

git add .

git commit -m {commit_message}

6. Push your code in to your branch

git push

7. Create pull request to dev branch in github
8. Wait for the code to be reviewed and merged

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)

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

Implement API

This project use @tanstack/react-query with axios for fetching data and We will use custom queries hooks for query.

Please see in Discord for .env file

Structure

• src/api : Store api fetching function using axios
• src/types : Store type of fetched data
• src/hook/queries : Store query function from @tanstack/react-query
• src/hook/mutation : Store mutation function

Instruction Step :

1. Create type from data in src/types if have pagination use Meta from src/types/common.ts
2. Create fetching function in src/api and passing type to axios function
3. Create query function in src/hook/quries or mutation function in src/hook/mutation
4. Implement Query or Mutation function in Page and pass data to components

** Do not query data in any Component !!