maulanasdqnandClaude Opus 4.6
95bf09c2fa
Replaces the heavy Next.js SSR app with Astro static site: - Zero JS shipped for static pages (hero, community, CTA, footer) - Server-side data fetching in Astro frontmatter (events, hackathon, testimonials) - Only 4 React islands for interactive parts (mobile menu, roadmap voting, testimonials home, feature request) - Google Fonts via <link> instead of next/font - Nix build changed from Node.js systemd service to static nginx (mkStaticAppModule) - npmDepsHash needs update (set to fake hash, CI will provide correct one) Performance gains: - No Node.js server process needed (was using ~10MB RAM) - No Next.js runtime JS (~200KB+ saved) - No framer-motion bundle (~130KB saved) - Static HTML served directly by nginx 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.