LifePass App

This repository contains the frontend codebase for the AuthentifyIT Life Pass Application.

🚀 Tech Stack

This project leverages the following technologies and tools:

• Next.js – Server-side rendering & routing

• React – User interface building

• TypeScript – Type checking

• Tailwind CSS – Styling

• Yarn – Package manager

• Jest & Playwright – Testing framework

• AA Design System – UI components

• ESLint & Prettier – Linting and formatting

• Mapbox GL – Maps integration

• Stripe – Payment processing

• Storybook – UI documentation

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

• React Query – Data fetching & caching

• And additional supporting libraries

---

📦 Prerequisites

Make sure you are using the recommended versions:

• Node.js: 21.7.1

• Yarn: 1.22.17

---

🛠️ Installation

1. Clone and navigate to the project:

   git clone [email protected]:Authentify-it/Authentify-Users.git
   cd Authentify-Users/apps/user-app

2. Create your environment file:

   cp .env.example .env

3. Set up GitHub token for private packages:

   We use a custom private package for our AA Design System. You will need a classic GitHub personal access token.

   • Generate one here → Generate new token (classic)

   • Export the token:

     export GITHUB_TOKEN="{your_classic_access_token}"

   If you encounter permission issues, contact the lead developer with your GitHub account ID/email.

4. Install dependencies:

   yarn install

---

⚙️ Initial Configuration

• Start Storybook for UI documentation:

  yarn storybook

• Run linting:

  yarn lint
  yarn lint:fix

---

👨‍💻 Development Workflow

Branch Naming Rules

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

• Fixes/Hotfixes: fix/[ticket_id]_[short_description]

Branch Structure

• main → Development

• develop → Internal testing (Preview link)

• staging → Client demos (Demo link)

• production → Live environment (Live app)

Development & Push Process

1. Start the app:

   yarn dev

2. Run tests:

   yarn test && yarn e2e:headless

3. Build project:

   yarn build

4. Commit with gitmoji (recommended):

   gitmoji -c

---

📂 Project Structure

All filenames are lowercase and use - as a separator.

/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 Explained

/src/components

• UI-specific components (no business logic)

• Each component has its own folder

/src/components/aa-design-system

• Wrappers for the design system components

• Mirrors the components folder structure

/src/modules

• Page and business logic

• Contains application and domain layers

/src/modules/[module]/application

• *.container.tsx → Data management

• *.view.tsx → Presentation logic

/src/modules/[module]/domain

• *.mapper.ts → API ↔ Frontend mapping

• *.api.ts → API calls

• *.mutation.ts → React Query mutations

---

🔗 Useful Links

• AuthentifyIT Homepage

• Creator App Repository

• AA Design System Repository

• AA Design System Storybook

---

📜 License

This project is proprietary and confidential. Unauthorized copying, modification, or distribution of any part of this software is strictly prohibited without prior written permission from AuthentifyIT.