maulanasdqnandClaude Opus 4.6
7268403ca4
- useUploadFile: add 5MB limit + image type validation for team logo/banner uploads (was unrestricted) - useUploadAvatar: tighten limit from 5MB to 2MB per issue request - Submit page: switch from useUploadFile to useUploadSubmission which has proper 50MB limit + broader file type support Size limits: - Profile avatar: 2MB (JPEG, PNG, WebP, GIF) - Team logo/banner: 5MB (JPEG, PNG, WebP, GIF) - Team files: 20MB (images + PDF) - Submissions: 50MB (images, PDF, ZIP, video) Closes #63 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.