imphnen-frontend-service/README.md

# IMPHNEN Frontend Service

<p align="center">
  <img src="docs/logo.svg" alt="IMPHNEN">
</p>

Monorepo for all frontend services of [IMPHNEN](https://imphnen.dev) (Ingin Menjadi Programmer Handal Namun Enggan Ngoding) — Indonesia's largest programmer community.

## Apps

| App | Framework | URL |
|-----|-----------|-----|
| **Landing** | Next.js 16 | [imphnen.dev](https://imphnen.dev) |
| **Backoffice** | Vite + React | [backoffice.imphnen.dev](https://backoffice.imphnen.dev) |
| **Hackathon** | Vite + React | [hackathon.imphnen.dev](https://dimentorin.imphnen.dev) |
| **Dimentorin** | Vite + React | [dimentorin.imphnen.dev](https://dimentorin.imphnen.dev) |
| **Gacha** | Vite + React | [gacha.imphnen.dev](https://gacha.imphnen.dev) |
| **QR Campaign** | Vite + React | [qr.imphnen.dev](https://qr.imphnen.dev) |
| **Infra** | Vite + React | [infra.imphnen.dev](https://infra.imphnen.dev) |

## Shared Libraries

| Lib | Purpose |
|-----|---------|
| `utils` | Pure utilities — `cn()`, `For`, `Show`, `useQueryState`, `useModalLogin` |
| `service` | Business logic — API clients, auth hooks, storage, constants |
| `ui` | UI components — atoms, molecules, organisms (atomic design) |

## Getting Started

### Prerequisites

- Node.js 22
- [Nix](https://nixos.org/download/) (optional, for reproducible builds)

### Setup

```sh
git clone https://github.com/IMPHNEN/imphnen-frontend-service.git
cd imphnen-frontend-service
npm install
```

Or with Nix:

```sh
nix develop  # enters dev shell with node 22, bun, git, jq
```

### Environment Variables

Copy `.env.example` to `.env` in the app directory:

```sh
cp apps/<app>/.env.example apps/<app>/.env
```

### Development

```sh
nx dev <app>        # e.g. nx dev landing, nx dev backoffice
```

### Build

```sh
nx build <app>            # build single app
nx run-many -t build --all # build everything
nx affected -t build       # build only what changed
```

### Nix Build

```sh
nix build .#<app>    # e.g. nix build .#landing, .#dimentorin
```

All Nix config lives in `flake.nix`. When `package-lock.json` changes, update `npmDepsHash` using `lib.fakeHash`.

### Testing

```sh
nx test <project>    # unit tests (vitest)
nx e2e <app>-e2e     # e2e tests (playwright)
nx lint <project>    # eslint
```

### Storybook

```sh
nx storybook ui      # run storybook for ui lib
nx build-storybook ui # build static storybook
```

## CI/CD

GitHub Actions pipeline (`.github/workflows/nix-build.yml`):

1. **detect** — uses `nx affected` to find changed apps
2. **build** — matrix strategy builds only affected apps with Nix, pushes to [Cachix](https://app.cachix.org/cache/msdqn)
3. **deploy** — updates `flake.lock` in [imphnen-infrastructure](https://github.com/IMPHNEN/imphnen-infrastructure) and deploys to the server using [clan](https://clan.lol)

## Tech Stack

- **Monorepo**: Nx 22.6
- **Frontend**: React 19, TypeScript
- **Styling**: Tailwind CSS v4, CVA
- **State**: Zustand, TanStack React Query
- **Forms**: react-hook-form + zod
- **Build**: Nix flakes, Cachix
- **CI**: GitHub Actions

## Contributing

1. Fork and clone the repository
2. Create a branch: `git checkout -b feat/feature-name`
3. Make changes, commit, and push
4. Open a pull request to the `develop` branch

Issues and feedback welcome via [GitHub Issues](https://github.com/IMPHNEN/imphnen-frontend-service/issues).