Econary: Penjelasan Tech Stack

1. Gambaran singkat

Econary itu monolit full-stack: frontend dan backend hidup dalam satu codebase Next.js yang sama. Tidak ada server backend terpisah (misalnya Express/FastAPI) dan tidak ada frontend yang di-build terpisah lalu dipanggil via REST ke server lain.

Autentikasi dijaga di tengah-tengah alur itu oleh NextAuth (sesi JWT), dan halaman /dashboard/* diproteksi oleh middleware.js sebelum halaman sempat dirender.

2. Tech stack lengkap

Catatan build: next.config.js mengaktifkan eslint.ignoreDuringBuilds dan typescript.ignoreBuildErrors. Artinya error lint tidak akan menggagalkan build — praktis untuk demo, tapi bukan standar yang bagus untuk produksi.

3. Frontend-nya gimana?

Pola utamanya: Server Component mengambil data, Client Component mengurus interaksi. Contohnya app/dashboard/page.js (async, mengambil data lewat Prisma) merender components/dashboard/DashboardClient.js yang berisi grafik, tombol, dan modal. Pola *Client.js ini dipakai konsisten di semua fitur.

Halaman yang ada

• / (landing) — saat ini langsung redirect ke /login lewat useEffect + router.
• /login dan /register — form autentikasi dengan ikon Lucide, toggle lihat password.
• /dashboard — ringkasan keuangan + grafik.
• /dashboard/transactions, /categories, /wallets — CRUD utama.
• /dashboard/budget (plus detail /budget/[id]), /saving-goals, /reports, /settings.
• /dashboard/alternate-universe — fitur simulasi: proyeksi 24 bulan dari data transaksi nyata, dengan parameter gaya hidup / investasi / skenario.

Komponen

19 file di components/, dikelompokkan per fitur: dashboard/, transactions/, wallets/, categories/, budget/, saving-goals/, reports/, settings/, alternate-universe/, plus providers/ (AuthProvider untuk sesi NextAuth dan PreferencesProvider untuk preferensi). Modal-modal form (tambah transaksi, dompet, kategori, anggaran, target tabungan) masing-masing file sendiri, jadi mudah dilacak.

Styling & bahasa

• Tailwind utility-first, gaya kartu (card-based), warna hijau #4d8061 dan emas #80672d di README, latar krem hangat #f8f5ef, tipografi Inter (sans) + Georgia serif untuk heading menurut README.
• Dark mode tersedia (Tailwind darkMode: 'class') dan tema tersimpan per user (theme di model User).
• Responsif mobile–tablet–desktop; animasi landing/login di app/landing-animations.css dan app/login-animations.css.
• Multi-bahasa Indonesia & Inggris lewat lib/translations.js (diganti dari Settings).

4. Backend-nya gimana?

Backend = 21 file route di app/api/, semuanya route handler Next.js. Tidak ada folder server/ terpisah. Setiap route yang menyentuh data user wajib memeriksa sesi dulu, lalu memfilter berdasarkan userId dari sesi — jadi user A tidak bisa sekadar menebak ID untuk melihat data user B lewat API normalnya.

Endpoint utama (CRUD per resource)

Alur satu request (contoh: ambil transaksi)

Browser (sudah login, cookie sesi JWT)
  → GET /api/transactions
  → getServerSession(authOptions) — tanpa sesi → 401 Unauthorized
  → prisma.transaction.findMany({ where: { userId: session.user.id } })
  → amount Decimal diubah ke Number, lalu dikirim sebagai JSON

Autentikasi, detailnya

• Credentials: email + password dicek ke database, password dibandingkan dengan hash bcrypt (lib/auth.js). Password tidak pernah disimpan polos.
• Google OAuth: kalau email belum ada, user baru dibuat otomatis beserta dompet default “Dompet Utama” (saldo 0, tipe cash) — sama seperti registrasi manual di createUser().
• Sesi JWT 30 hari; middleware.js memproteksi semua /dashboard/:path* via next-auth/middleware.
• Kebutuhan environment (hanya nama, tanpa nilai): DATABASE_URL, DIRECT_URL, NEXTAUTH_URL, NEXTAUTH_SECRET, opsional GOOGLE_CLIENT_ID dan GOOGLE_CLIENT_SECRET.

Database: 7 model Prisma

Relasi memakai onDelete: Cascade di sebagian besar tempat (hapus user → dompet, kategori, transaksi, anggaran, dan target ikut terhapus), kecuali wallet pada SavingGoal yang SetNull. Index sudah dipasang di kolom yang sering difilter: userId, date, type, dan month/year untuk budget.

Menjalankan secara lokal

npm install
npx prisma generate
npx prisma migrate dev --name init
npx prisma db seed
npm run dev   # http://localhost:3000

Script build produksi: prisma generate && next build, lalu next start.

5. Jadi, halaman penjelasan ini aman di Cloudflare?

• Tidak ada secret di sini: zip yang diperiksa tidak berisi file .env (dan .gitignore-nya memang mengecualikan .env*). Halaman ini hanya menyebut nama variabel environment, bukan nilainya.
• Tidak ada data keuangan asli: tidak ada data user, transaksi, saldo, atau akun demo yang bisa dipakai login yang ditampilkan di halaman ini.
• Tidak ada backend yang bisa dibobol: Cloudflare Pages untuk halaman ini hanya menyajikan file statis. Tidak ada API, tidak ada koneksi database yang bisa dieksploitasi dari halaman ini.

Yang TIDAK aman (dan tidak dilakukan di sini): men-deploy aplikasi Econary-nya sendiri ke Cloudflare Pages sebagai situs statis — itu tidak akan jalan, karena Econary butuh server Node.js untuk API Routes + NextAuth dan koneksi PostgreSQL. Jalur aslinya adalah Vercel (lihat vercel.json), atau platform lain yang mendukung Next.js server-side. Dan kalau Econary di-deploy ke mana pun, hapus dulu route debug di atas.

6. Ringkasan satu paragraf

Econary adalah aplikasi keuangan pribadi full-stack JavaScript berbasis Next.js 14 App Router + React 18, dengan UI Tailwind CSS + Lucide + Recharts, backend berupa Next.js API Routes yang diamankan NextAuth (JWT) dan password bcrypt, serta data yang disimpan di PostgreSQL (Neon) lewat Prisma dengan 7 model utama. Frontend memakai pola Server Component + *Client.js per fitur; backend memakai pola cek sesi lalu filter userId di setiap request. Cocok sebagai proyek pembelajaran/portfolio — dengan catatan route debug harus dihapus sebelum produksi.

Sumber: isi Econary-main.zip — package.json, README.md, prisma/schema.prisma, app/, components/, lib/, middleware.js, vercel.json, dan next.config.js. Versi dependensi dicantumkan sesuai package.json di zip tersebut.