LifePass Studio

This repository contains the frontend code for the AuthentifyIT Life Pass Studio Application.

🚀 Tech Stack

The project uses the following technologies:

1. Next.js – server-side rendering & routing

2. React – building user interfaces

3. TypeScript – type checking

4. Tailwind CSS – styling

5. Yarn – package manager

6. Jest & Playwright – testing

7. AA Design System

8. ESLint & Prettier – linting & formatting

9. Mapbox GL – maps

10. Storybook – documentation

11. Three.js & React Three Fiber – 3D graphics

12. React Query – data fetching & caching

---

📦 Prerequisites

Make sure you have the following versions installed:

• Node.js: 21.7.1

• Yarn: 1.22.17

---

🛠 Installation

Follow these steps to set up the project:

1. Clone the repository

   git clone [email protected]:Authentify-it/Authentify-Brands.git
   cd Authentify-Brands/apps/creator-app

2. Set up environment variables

   cp .env.example .env

3. Generate and export GitHub token We use a private package for our design system. Create a classic GitHub token and export it:

   export GITHUB_TOKEN="{your_classic_access_token}"

4. Install dependencies

   yarn install

---

⚙️ Initial Configuration

Start Storybook to explore components and documentation:

yarn storybook

Linting & formatting:

yarn lint
yarn lint:fix

---

💻 Development Workflow

Branch Naming Rules

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

• Fixes / Bugs / Hotfixes → fix/[ticket_identifier]_[short_description]

Branch Structure

• main → active development

• develop → test environment (preview link)

• staging → client demos (demo link)

• production → live environment (production app)

Development Process

1. Start the app

   yarn dev

2. Run tests

   yarn test && yarn e2e:headless

3. Build locally

   yarn build:local

4. Commit & push We encourage using gitmoji:

   gitmoji -c

---

📂 Project Structure

File names are lowercase and separated with “-”.

/src
├── components
│   ├── [component-name]
│   │   ├── [component-name].tsx
│   │   └── [...other component-specific files]
│   └── aa-design-system
│       └── [wrapper-component-name]
│           ├── [wrapper-component-name].tsx
│           └── [...other wrapper-specific files]
└── modules
    └── [module-name]
        ├── application
        │   ├── [module-name].container.tsx
        │   └── [module-name].view.tsx
        └── domain
            ├── [module-name].mapper.ts
            ├── [module-name].api.ts
            └── [module-name].mutation.ts

Folders Overview

/src/components

• Application-specific UI components (no business logic)

• Each component has its own folder

/src/components/aa-design-system

• Wrappers around the AA Design System

• Same structure as components

/src/modules

• Contains page logic and business logic

• Each module includes:

  • application → containers & views

  • domain → API calls, mappers, mutations

---

🔗 Useful Links

• AuthentifyIT Homepage

• Creator Application Repository

• AA Design System Repository

• AA Design System Storybook

---

📜 License

This code is proprietary and confidential.

All rights reserved. No part of this software may be copied, reproduced, modified, distributed, or translated without prior written permission from AuthentifyIT.