UWC Frontend

Prerequisites

• Node v16; it is recommended to install Node with nvm

• Git

Bootstrap

• Clone this project

• Run the following commands inside the project folder:

  nvm install && nvm use
  npm install
  npm run dev

Workflow

• To work on a new feature, checkout a new branch from the main branch on your local machine:

  git checkout -b <branch-name>

  • The branch name should be in the form of ft/<functionality>, for example ft/#

• To push changes from that new branch to the repo for the first time:

  git push -u origin <branch-name>

  • <branch-name> here is the name of the respective branch on the Github repo, and it should be similar to the local branch name.

• After that you can just push changes simply with git push.

• When a feature is ready for merging, create a pull request.

• NEVER PUSH TO THE MAIN BRANCH

Tech

Tech stacks

• Node 16 & npm: Runtime & package manager
• Vite: Module bundler
• React: Core UI library
• Bootstrap & Reactstrap : styling and components library
• SASS: CSS preprocessor
• Redux: State management
• React Router: Routing library
• Vitest: Testing library

Project Structure

uwc-frontent/
|__ src/
|   |__ assets/.................... - dynamic assets
|   |__ components/................ - shared components
|   |   |__ componentsA/
|   |   |   |__ ComponentA.jsx
|   |   |   |__ SubComponentB.jsx
|   |   |   |__ ComponentA.scss
|   |   |   |__ ...
|   |   |   |__ index.js........... - exporting modules
|   |   |__ ...
|   |__ views/..................... - page-level components
|   |   |__ ViewA/
|   |   |   |__ ViewA.jsx
|   |   |   |__ SubComponentB.jsx
|   |   |   |__ ViewA.scss
|   |   |   |__ ...
|   |   |   |__ index.js........... - exporting modules
|   |   |__ ...
|   |__ scss/styles.scss........... - global styling
|   |__ main.jsx................... - main js entry
|__ mocks/......................... - mock data
|__ |__ entityX/
|__ |   |__ entityXdata.js
|__ |__ ...
|__ tests/......................... - testing setup
|__ public/........................ - public assets
|__ index.html..................... - HTML entry
|__ vite.config.js................. - Vite config
|__ ... (other config files)

Conventions

Commits

• Commit messages should be in the form <action> + <target>, eg. updated configs
  • <action>: in past tense, eg. added, updated
  • <target>: files, packages, or features, eg. side bar component, Bootstrap, assign task module

Naming

• Variables and functions should be named in camel case, eg. selectedStaffs, customHook

• Constants should be named in snake case with all caps, eg. API_KEY

• Components and their respective files should be named with Pascal case, eg. AddStaffModal, AddStaffModal.jsx.

• To be added.