2024.03.11

Objective A

Develop a robust and foundational design system

• Key result 1: Consolidate all UI elements from three chosen projects into a centralized Figma file
• Key result 2: Develop and rigorously test five core UI components (e.g., buttons, inputs, checkboxes) that can be flexibly integrated across all three chosen projects
• Key result 3: Establish clear design guidelines (including usage examples) for the five core UI components, ensuring consistency and brand alignment across all projects

Objective B

Create an Admin Portal template

• Key result 1: Develop at least five reusable layout components that can be assembled to create various Admin Portal functionalities
• Key result 2: Leverage the five design system components (developed in Objective A) to build the Admin Portal template
• Key result 3: Implement a user role-based access control system, establish at least 3 distinct user roles (e.g., Admin, Editor, Viewer) with well-defined access permissions tailored to their responsibilities

Objective C

Set up application performance monitoring & error tracking software

• Key result 1: Integrate Sentry in five chosen projects
• Key result 2: Reduce the number of unresolved high-priority errors reported in Sentry by 20%
• Key result 3: Train 50% of developers on using Sentry for error tracking and debugging

Team VS Objective

Each team will be responsible for one objective.

• Scalability
• Maintainability
• Authentication strategies
• Animation
• Mobile development
• Game development
• Backend development

1. .husky
2. .vscode
3. node_modules
4. apps
5. docs
6. packages
7. scripts
8. other...

(5.1) .husky

Automatically lint your commit messages, code, and run tests upon committing or pushing.

• commit-msg
  • Ensure commit message adheres to rules
• pre-commit
  • Run ESLint & Prettier

(5.2) .vscode

Store workspace-specific thing. Can override user settings for that specific workspace.

• extensions.json
  • Recommended or blacklisted extensions
• settings.json
  • Configure workspace settings

(5.3) node_modules

Store project's dependencies. Usually not included in Git.

• dependencies
• devDependencies
• peerDependencies

(5.4) apps

Serve as a central folder for all applications related to the project.

• Storybook

(5.5) docs

The home for all documentation related to this project.

• Frontend documentation site
• Design documents
• User guides
• Development instructions
• Deployment guide
• Resources for both new & existing team members to understand the project's architecture, setup, and usage

(5.6) packages

Store frontend internal published/unpublished packages

• base
• config
• hooks
• utils
• Hosted on Nexus Registry

(5.7) scripts

Contain various scripts that automate common development tasks

• Build scripts
• Test scripts
• Deployment scripts

(5.8) others...

Configuration and Metadata files

• commitlintrc.js
• .eslintrc.js
• tsconfig.json
• README.md

Popular Design Sytem

• Google - Material Design
• Microsoft - Fluent Design
• Shopify - Polaris

🛠️ We want to build ⚒️

" Atoz Design System "

Benefits of a design system

• UI consistency
• Faster production
• Higher quality
• Shared vocabulary
• Easier to test
• Useful reference
• Future-friendly

Atomic Design

Introducing frontend sub-teams

1. Team Facebook
2. Team Amazon
3. Team Apple
4. Team Netflix
5. Team Google

Team Facebook

1. Chong Chen (Leader)
2. Pei Ling (Assistant leader)
3. Han Wei
4. Wen Ni
5. Chian Lei
6. Qian Wei

Team Amazon

1. Yi Chien (Leader)
2. Yu Qi (Assistant leader)
3. You Sheng
4. Haw Chien
5. Hui Shi

Team Apple

1. Chloe (Leader)
2. Anael (Assistant leader)