maulanasdqnandClaude Opus 4.6
86d9e759a6
The file-based router was converting (group) segments to 'group?'
optional parameters, which broke all SPA routes (404 on every page).
Now (group) segments map to empty path '' which creates pathless
layout wrapper routes in react-router, matching Next.js behavior.
e.g. (public)/auth/login/page.tsx → route path '/auth/login'
(protected)/dashboard/page.tsx → route path '/dashboard'
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.