FinTrack Pro — Full project architecture, tech stack, folder
structure, and GitHub setup guide
Folder structure Tech stack Architecture GitHub setup Env keys
FRONTEND
CORE STYLING ROUTING
React 18 + Vite Tailwind CSS v3 React Router v6
Fast dev server, HMR, TypeScript Utility-first, dark mode, custom tokens Nested routes, auth guards, lazy load
TypeScript SWC shadcn/ui clsx createBrowserRouter
STATE CHARTS FORMS
Zustand + React Query Recharts React Hook Form + Zod
Zustand for UI/auth, RQ for server Bar, Pie, Line — responsive SVG Validation, type-safe schemas
state charts
RHF v7 Zod
TanStack v5 Recharts 2
BACKEND
RUNTIME AUTH ORM
[Link] + Express JWT + bcrypt Prisma ORM
REST API, TypeScript, fast & minimal Access token + refresh token, secure Type-safe queries, auto migrations
hashing
Node 20 LTS Prisma 5
jsonwebtoken
VALIDATION UPLOAD SECURITY
Zod (shared) Cloudinary Helmet + CORS + Rate limit
Same schemas on FE + BE Profile photo upload + transform HTTP headers, origin control, brute-
force
Shared pkg Multer
express-rate-limit
DATABASE
PRIMARY DB CACHE / SESSIONS
PostgreSQL (Neon) Redis (Upstash)
Serverless Postgres — free tier, user data per account, Rate limit counters, refresh token blacklist
scales easily Upstash Free tier
[Link] Free tier
DEVOPS & GITHUB
FRONTEND DEPLOY BACKEND DEPLOY CI/CD
Vercel Railway GitHub Actions
Auto deploy on push to main [Link] containers, env vars, logs Lint + test + deploy on push
Free tier Free tier Free
KEY FRONTEND PACKAGES ([Link])
react@18 react-router-dom@6 @tanstack/react-query@5 zustand axios recharts react-hook-form zod
@hookform/resolvers jspdf xlsx react-big-calendar date-fns clsx tailwind-merge lucide-react
@radix-ui/react-dialog react-hot-toast
KEY BACKEND PACKAGES
express @prisma/client prisma jsonwebtoken bcrypt zod helmet cors express-rate-limit multer
cloudinary dotenv ts-node nodemon