Pokémon Bank

The problem

The course asked for a believable online banking experience without a real core banking integration: authenticate a user, show balance, move money in and out, pay common services, and leave an audit trail students could demo in class. A plain form exercise would not show layout, feedback, or reporting skills. The brief also invited a creative theme—Pokémon Bank became the wrapper for practicing React state, routing, and UX patterns end to end. This project was completed as a university assignment: scope, features, and presentation were aligned with coursework requirements rather than production banking compliance.

What I built

Pokémon Bank is a single-user banking simulator themed after the Pokémon universe. Users log in with a demo PIN (seeded profile for Ash Ketchum, account number, and starting balance), then use a sidebar dashboard to deposit, withdraw, pay fixed-price utilities (electricity, water, internet, phone), and review movement history. The home screen shows available balance and a pie chart of transaction types built from the same client-side ledger. Each successful deposit, withdrawal, or service payment appends a typed transaction with amount and ISO timestamp to localStorage, updates balance with basic validation (e.g. insufficient funds on withdraw or bill pay), and can trigger a PDF receipt generated in the browser via @react-pdf/renderer. Toast notifications (sonner) confirm success and errors. Route middleware plus cookies gate the main dashboard entry after login.

Source: github.com/Cartagena2001/pokemon-bank Website demo: https://pokemon-bank-woad.vercel.app

Technical choices

• Next.js 13 App Router — landing login, nested dashboard/* routes, shared layout with sidebar navigation, and lightweight middleware for session cookies.
• React client components + localStorage — single JSON user model (saldoInicial, transacciones[]) for a zero-backend demo suitable for classroom deployment.
• Tailwind CSS — custom Pokémon palette (pokeblue, pokeorange) and responsive layouts for amount pickers and service tiles.
• Chart.js / react-chartjs-2 — pie chart aggregating transaction counts by type on the home dashboard.
• @react-pdf/renderer — reusable Receipt document and download link after payments and cash movements.

What I'd do differently

I'd protect all dashboard routes consistently in middleware, not only /dashboard/home, and replace PIN-in-localStorage with a proper auth story if the app ever left the classroom. Persisting data in IndexedDB or a small API would also make multi-device demos and grading easier.

Outcome

Delivered a university project that reads like a mini neobank: themed UI, complete user flows, history, visualization, and PDF proof of payment—while staying intentionally simple on the server. It remains a portfolio piece for front-end structure and product thinking, open on GitHub for anyone exploring a playful banking UI lab.