Developer Onboarding

This document will guide you through setting up your environment and understanding the developer workflow.

Tech Stack

• React → Building UI components

• TypeScript → Strong type-checking

• Tailwind CSS → Utility-first styling

• NPM → Dependency manager

• Jest & Playwright → Testing framework

• ESLint & Prettier → Linting & formatting

• Mapbox GL → Maps

• Storybook → Component documentation

• Three.js & React Three Fiber → 3D graphics

• ViteJS → Fast development & build tool

---

Getting Started

1. Clone & navigate

git clone [email protected]:Authentify-it/aa-design-system.git
cd aa-design-system

2. Configure environment

cp .npmrc.example .npmrc

3. Create and export GitHub token

We use a private package for our design system. Generate a Personal Access Token (classic) here and export it.

4. Install dependencies

npm install

---

Development Workflow

Start development (storybook)

npm run storybook

Build

npm run build

Build Storybook

npm run build-storybook

Publish new version

Based on package.json version

npm publish

Branching Rules

• Features → feature/[ticket_id]_[short_description]

• Fixes → fix/[ticket_id]_[short_description]

• Main branch → reserved for development

Git process

We recommend using gitmoji for commits:

gitmoji -c

---

Deployment (Vercel)

• Preview deployment

npm run deploy:preview

• Production deployment

npm run deploy:prod

---

Useful Links

• AuthentifyIT Homepage

• Creator Application Repository

• AA Design System Repository

• AA Design System Storybook

---

Licensing

This code is proprietary and confidential. No part of this software may be copied, modified, or distributed without prior written permission from AuthentifyIT.