IMPHNEN Frontend Service

Monorepo for all frontend services of IMPHNEN (Ingin Menjadi Programmer Handal Namun Enggan Ngoding) — Indonesia's largest programmer community.

Apps

App	Framework	URL
Landing	Next.js 16	imphnen.dev
Backoffice	Vite + React	backoffice.imphnen.dev
Hackathon	Vite + React	hackathon.imphnen.dev
Dimentorin	Vite + React	dimentorin.imphnen.dev
Gacha	Vite + React	gacha.imphnen.dev
QR Campaign	Vite + React	qr.imphnen.dev
Infra	Vite + React	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 (optional, for reproducible builds)

Setup

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

Or with Nix:

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

Environment Variables

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

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

Development

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

Build

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

Nix Build

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

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

Storybook

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
3. deploy — updates flake.lock in imphnen-infrastructure and deploys to the server using clan

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.