hookloop-client

HOOKLOOP Side Project / Front-End : This is a project tracking application by using Next.js and Typescript.

Project Status: Developing.

Prerequisites

• Node.js : >=16.14.0
• Yarn

Installation

1. Clone this repository to your local machine.
2. Run yarn install in the project directory to install all required dependencies.
3. Create a .env file at the root directory of the project and add the necessary environment variables. See the .env.example file for reference.
4. Run yarn start or yarn dev to start the application.

Core Skills

• Next.js : React framework for building server-side rendered (SSR) and statically generated (SSG) web applications.
• Ant Design : React UI library.
• react-beautiful-dnd : Drag and drop lists for React library.
• MongoDB : NoSQL document-oriented database.
• Filestack : File Uploader
• WebSocket : Real-time communication between the client and the server.

Tools

• TypeScript : Strongly typed programming language builds on JavaScript.
• husky : Unify git commit tools.
• commitlint : Lint git commit message.
• commitizen : Auto generate commit followed by commitlint convention.
• conventional-changelog-cli : Generate a CHANGELOG from git metadata.
• eslint-config-airbnb: Follow Airbnb JavaScript Style Guide.
• lint-staged : Only Lint staged files in Git.

Coding Style

• Naming Convention

  • Variable: 小駝峰命名
  • Constant: 使用全大寫，中間用底線分開
  • State: usestate 前綴 s* ，useContext 前綴 c*
  • Function: 小駝峰命名(不用底線隔開)
  • Type: 大駝峰
  • Interface: 開頭要用大寫 I

• Folder Structure

  • 每個資料夾都用 index export

• Others

  • import module 放置順序(eslint-plugin-simple-import-sort)
  • import 路徑（用小老鼠幫路徑取暱稱 🐭)(path alias)
  • 放置順序: uesState > Variable > pure function > API function > useEffect > render
  • 統一使用箭頭函示

• Commit Message Guidelines

  • 參考 Angular Commit Message Header

Contributors

• Ariean
• Emi
• Jason
• Joanna
• Yuna
• Yun