Skip to content

Commit 8998828

Browse files
tomy0000000tomy0000000
authored
❇️ [refactor][frontend] Migrate to React/Vite/TS (#166)
## Goal Migrate from Next.js + Pages Router to Vite + React + TypeScript with TanStack Router. ## Architecture changes | Concern | Before | After | | -------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Build tool | Next.js | Vite (with React Compiler via babel preset) | | Routing | Next.js App Router (file-based) | TanStack Router (file-based, with typed context) | | Styling | Tailwind v3 + PostCSS + custom config | Tailwind v4 (CSS-first, `@tailwindcss/vite` plugin) | | UI primitives | shadcn (old conventions, Radix individual packages) | shadcn 2025 Nova preset (radix-ui umbrella, neutral oklch palette, Geist font) | | Data fetching | TanStack Query + hey-api SDK (manually composed) | Same pattern, ported as-is | | HTTP client | `@hey-api/client-axios` (separate package) | Generator-bundled runtime + plain `axios` | | Auth | React Context, password stored in localStorage | React Context + bridge into router context. **No password stored.** Pathless `_authenticated` layout route with `beforeLoad` gate | | Toast | Custom Radix Toast + `use-toast` hook | sonner | | Forms | shadcn `Form` + react-hook-form | New `Field` / `InputGroup` primitives + raw react-hook-form | | Icons | mixed (lucide + iconify) | lucide only | | Tree component | `@primer/react TreeView` | Custom recursive component built on shadcn Collapsible | | Sidebar | Custom Aceternity (framer-motion + iconify) | shadcn sidebar with collapsible-to-icon mode | ## What got built **Routes** (file-based, type-safe): - `/login` — public, with redirect-back search param - `/logout` — public action route, no UI, clears auth + redirects - `/_authenticated` — pathless layout, runs `beforeLoad` auth gate, mounts sidebar + Toaster's parent - `/` — home (calendar + payments) - `/account` — accounts list + transactions (resizable panels) - `/category` — category tree + transactions **Custom components** (your code, on top of shadcn primitives): - `<AppSidebar>` — branded nav + user dropdown with logout - `<DateRangePicker>` — popover + range Calendar - `<Tree>` — recursive, with chevron-or-row click to expand + select highlighting - `<AuthProvider>` / `useAuth()` — React Context, hydrates from localStorage synchronously **Tooling:** - ESLint flat config with prettier integration + scoped overrides for shadcn-generated paths - Prettier with sort-imports plugin + tailwindcss plugin - OpenAPI client regeneration via `pnpm generate-client` + `postinstall.sh` (auto-runs on Vercel) - Strict TypeScript, path alias `@/*` via manual `resolve.alias` ## Deliberate departures from the old project 1. **Dropped password storage in localStorage.** Old code stored `{ host, username, password }` and re-called the login API on mount. New code stores `{ host, username, accessToken }` only. Logout-then-login is required to switch accounts; no pre-fill from saved password. 2. **Auth-gating moved from `useEffect` redirects in pages to route-level `beforeLoad`.** No flash of unauthorized content. Single declaration applies to all protected children. 3. **`/setting` route deleted.** It was a relabeled login/logout form; functionality moved to `/login` and `/logout`. 4. **`@primer/react`, `framer-motion`, `@iconify-icon/react`, `styled-components` not ported.** Either replaced (Tree → Collapsible, sidebar → shadcn) or were unused leftovers. 5. **`shadcn` form component is gone (deprecated in 2025).** Replaced by `Field` + `InputGroup` primitives + raw react-hook-form usage when needed. ## Known unfinished work - **Hardcoded `transactions` arrays** in `/account` and `/category` — port-faithful placeholder, real backend wiring deferred. - **`/` payment badge styling** — Income/Expense/Transfer all on red background (ported as-is from old buggy code).
2 parents 2f77ee3 + 725df11 commit 8998828

89 files changed

Lines changed: 8348 additions & 6009 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vscode/settings.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
{
22
"workbench.editor.customLabels.patterns": {
33
"**/app/**/page.tsx": "${dirname}"
4+
},
5+
"files.readonlyInclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.watcherExclude": {
9+
"**/routeTree.gen.ts": true
10+
},
11+
"search.exclude": {
12+
"**/routeTree.gen.ts": true
413
}
514
}

‎frontend/.dockerignore‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎frontend/.gitignore‎

Lines changed: 151 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,163 @@
1-
# Created by https://www.toptal.com/developers/gitignore/api/nextjs
2-
# Edit at https://www.toptal.com/developers/gitignore?templates=nextjs
1+
# Created by https://www.toptal.com/developers/gitignore/api/node,react
2+
# Edit at https://www.toptal.com/developers/gitignore?templates=node,react
33

4-
### NextJS ###
5-
# dependencies
6-
/node_modules
7-
/.pnp
8-
.pnp.js
4+
### Node ###
5+
# Logs
6+
logs
7+
*.log
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
lerna-debug.log*
12+
.pnpm-debug.log*
913

10-
# testing
11-
/coverage
14+
# Diagnostic reports (https://nodejs.org/api/report.html)
15+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
1216

13-
# next.js
14-
/.next/
15-
/out/
17+
# Runtime data
18+
pids
19+
*.pid
20+
*.seed
21+
*.pid.lock
1622

17-
# production
18-
/build
23+
# Directory for instrumented libs generated by jscoverage/JSCover
24+
lib-cov
1925

20-
# misc
21-
.DS_Store
22-
*.pem
26+
# Coverage directory used by tools like istanbul
27+
coverage
28+
*.lcov
2329

24-
# debug
25-
npm-debug.log*
26-
yarn-debug.log*
27-
yarn-error.log*
28-
.pnpm-debug.log*
30+
# nyc test coverage
31+
.nyc_output
32+
33+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
34+
.grunt
35+
36+
# Bower dependency directory (https://bower.io/)
37+
bower_components
38+
39+
# node-waf configuration
40+
.lock-wscript
2941

30-
# local env files
31-
.env*.local
42+
# Compiled binary addons (https://nodejs.org/api/addons.html)
43+
build/Release
3244

33-
# vercel
34-
.vercel
45+
# Dependency directories
46+
node_modules/
47+
jspm_packages/
3548

36-
# typescript
49+
# Snowpack dependency directory (https://snowpack.dev/)
50+
web_modules/
51+
52+
# TypeScript cache
3753
*.tsbuildinfo
38-
next-env.d.ts
3954

40-
# End of https://www.toptal.com/developers/gitignore/api/nextjs
55+
# Optional npm cache directory
56+
.npm
57+
58+
# Optional eslint cache
59+
.eslintcache
60+
61+
# Optional stylelint cache
62+
.stylelintcache
63+
64+
# Microbundle cache
65+
.rpt2_cache/
66+
.rts2_cache_cjs/
67+
.rts2_cache_es/
68+
.rts2_cache_umd/
69+
70+
# Optional REPL history
71+
.node_repl_history
72+
73+
# Output of 'npm pack'
74+
*.tgz
75+
76+
# Yarn Integrity file
77+
.yarn-integrity
78+
79+
# dotenv environment variable files
80+
.env
81+
.env.development.local
82+
.env.test.local
83+
.env.production.local
84+
.env.local
85+
86+
# parcel-bundler cache (https://parceljs.org/)
87+
.cache
88+
.parcel-cache
89+
90+
# Next.js build output
91+
.next
92+
out
93+
94+
# Nuxt.js build / generate output
95+
.nuxt
96+
dist
97+
98+
# Gatsby files
99+
.cache/
100+
# Comment in the public line in if your project uses Gatsby and not Next.js
101+
# https://nextjs.org/blog/next-9-1#public-directory-support
102+
# public
103+
104+
# vuepress build output
105+
.vuepress/dist
106+
107+
# vuepress v2.x temp and cache directory
108+
.temp
109+
110+
# Docusaurus cache and generated files
111+
.docusaurus
112+
113+
# Serverless directories
114+
.serverless/
115+
116+
# FuseBox cache
117+
.fusebox/
118+
119+
# DynamoDB Local files
120+
.dynamodb/
121+
122+
# TernJS port file
123+
.tern-port
124+
125+
# Stores VSCode versions used for testing VSCode extensions
126+
.vscode-test
127+
128+
# yarn v2
129+
.yarn/cache
130+
.yarn/unplugged
131+
.yarn/build-state.yml
132+
.yarn/install-state.gz
133+
.pnp.*
134+
135+
### Node Patch ###
136+
# Serverless Webpack directories
137+
.webpack/
138+
139+
# Optional stylelint cache
140+
141+
# SvelteKit build / generate output
142+
.svelte-kit
143+
144+
### react ###
145+
.DS_*
146+
**/*.backup.*
147+
**/*.back.*
148+
149+
node_modules
150+
151+
*.sublime*
152+
153+
psd
154+
thumb
155+
sketch
156+
157+
# End of https://www.toptal.com/developers/gitignore/api/node,react
158+
159+
# TanStack Router generated route tree
160+
src/routeTree.gen.ts
41161

42-
lib/client
162+
# OpenAPI generated client
163+
src/lib/client

‎frontend/.prettierignore‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
**/.git
22
**/.hg
3-
**/.next
43
**/.svn
54
**/node_modules
6-
lib/client
5+
dist
6+
src/lib/client
7+
src/routeTree.gen.ts
78
pnpm-lock.yaml

‎frontend/Dockerfile‎

Lines changed: 0 additions & 96 deletions
This file was deleted.

0 commit comments

Comments
 (0)