CaféBank: Where Your Money Meets Your Community

CaféBank is a full-stack web application that explores how retail banking interfaces can be redesigned to feel more conversational, community-oriented, and behaviorally engaging. Instead of presenting finance purely as balances and transactions, the platform integrates financial overview, advisory-style chat, community participation, and local business discovery into a unified dashboard. The project is a functional prototype built with a React (Vite) and TypeScript frontend, styled using TailwindCSS, and supported by an Express backend with SQLite for persistent storage. It includes real API endpoints, structured state management, and seeded relational data across multiple feature domains.

The idea emerged from observing that traditional banking applications are optimized for transaction completion rather than engagement. Users typically log in, check a balance, complete a task, and leave. There is minimal continuity, limited context, and no reinforcement of long-term financial behavior. I wanted to explore whether financial guidance could feel conversational rather than purely analytical, whether visible community benchmarks could influence financial decisions, and whether daily financial interaction could feel like a recurring ritual rather than a chore. The “café” framing became a structural metaphor for informal conversation, repeat visits, and shared participation rather than just a visual theme.

On the frontend, the application is built with a modular component architecture and a sidebar navigation system with animated transitions. Modal-based workflows are used for portfolio breakdowns, subscription management, and user profiles to maintain clarity without fragmenting the interface. The application is organized into distinct but cohesive modules: Morning Coffee as the home dashboard, Money Coach as a chat interface, Community Insights and Community Board for social interaction, Coffee Chat for advisor booking, and Find Local for business discovery. All modules share a consistent layout wrapper to preserve design cohesion.

The backend is implemented using Node.js with Express and SQLite. It exposes REST-style endpoints for account balances, chat messages, community posts and likes, follow relationships, booking sessions, community savings pots, and local business listings. SQLite was chosen for its simplicity, portability, and ease of setup, enabling persistent data without additional infrastructure.

The AI portion, as currently implemented, centers on the Money Coach feature. It provides a conversational advisory interface with threaded messaging, message persistence, optimistic UI updates, and Markdown-rendered responses. While responses are simulated rather than generated by a live large language model, the architecture is structured to support future AI integration by injecting conversation history and structured financial data into a model endpoint. The current implementation focuses on building the conversational UX layer and the backend data plumbing necessary for real AI integration.

The primary challenges involved maintaining cohesion across multiple feature domains, managing client-side state for likes, follows, bookings, and chat messages without introducing inconsistencies, and preventing the application from feeling like a collection of disconnected mini-apps. Careful use of shared layout patterns, consistent navigation, and disciplined state updates addressed these issues. Balancing frontend polish with backend completeness within limited development time also required prioritization.

Through this project, I learned that conversational interfaces require structured persistence from the outset, optimistic UI significantly improves perceived responsiveness, and even small relational systems quickly introduce non-trivial state complexity. Most importantly, financial software design is largely a behavioral design problem rather than simply a data presentation problem.

CaféBank is a working prototype that demonstrates how financial dashboards can integrate conversational interaction, community visibility, and local economic discovery within a single cohesive system. It establishes a clear architectural foundation for integrating real AI-driven financial reasoning in the future while remaining fully functional in its current form.