maulanasdqnandClaude Opus 4.6
6b3faf2a21
The <link rel="stylesheet" href="/src/..."> tags reference source paths that only exist in dev mode. In production builds, Vite injects CSS through the JS bundle. These broken links caused 404 errors and unstyled pages in production. Affected: backoffice, dimentorin, gacha, hackathon, infra Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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):
- detect — uses
nx affectedto find changed apps - build — matrix strategy builds only affected apps with Nix, pushes to Cachix
- deploy — updates
flake.lockin 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
- Fork and clone the repository
- Create a branch:
git checkout -b feat/feature-name - Make changes, commit, and push
- Open a pull request to the
developbranch
Issues and feedback welcome via GitHub Issues.