Finora Project Report
1. The Concept
Finora is a lightweight personal finance tracker designed to make everyday money management simple, visual, and private. It allows users to set monthly income and budget goals, record income and expenses, understand spending by category, and monitor savings from a responsive fintech dashboard.
The project focuses on people who want a fast financial overview without creating an account, connecting a bank, or learning complicated budgeting software. Finora runs entirely in the browser and stores all financial data locally on the user’s device.
2. The Stack
The Stack: HTML5, CSS3, Vanilla JavaScript, browser LocalStorage, responsive CSS layouts, and project-provided SVG icons. The application is contained in a single index.html file and does not require a framework, backend, database, package manager, or build process.
The AI Assist: Codex supported the implementation and refinement process by translating product requirements and visual mockups into working UI, reviewing the design system, improving responsive layouts, connecting interactions to application state, debugging browser behavior, and testing important user flows. AI assistance was used as a collaborative development tool while the product direction, visual references, and final decisions remained guided by the project requirements.
3. The 1 Day Sprint
Morning (Hours 1–3): The sprint began by reviewing the handoff document, design mockups, specification sheet, user flow, icons, and technical constraints. The initial structure was established around a mobile-first dashboard with summary cards, monthly budget tracking, spending categories, recent transactions, and a quick transaction form. The LocalStorage data model and the core calculations for income, expenses, remaining budget, and savings were also defined.
Afternoon (Hours 4–6): The core product interactions were completed and refined. Transaction creation, editing, deletion confirmation, searching, filtering, budget setup, dashboard updates, category totals, insights, data export, theme switching, and responsive navigation were connected to the same application state. The desktop experience was then redesigned to follow the latest mockup while preserving the mobile layout and all existing functionality.
The Finish Line (Hours 7–8): The final stage focused on polish and consistency. A first-time onboarding experience and empty-account welcome state were added. The budget setup flow was moved into a reusable popup, transaction actions received an accessible menu, and category donut charts were enhanced with the project’s category icons. Navigation colors, card layouts, responsive widths, mobile controls, spacing, and design-system alignment were reviewed and adjusted. The final flows were tested in the browser, temporary test data was removed, and project documentation was prepared.
4. The Roadblocks
Roadblocks: The main challenge was evolving the visual design several times without breaking the working finance logic. Desktop and mobile layouts needed to share the same data and design language while still adapting appropriately to different screen sizes. Several components—including summary cards, navigation states, budget controls, transaction menus, and category charts—required careful responsive styling to avoid inconsistent behavior.
Another challenge was keeping the project inside a single HTML file. Without a component framework, reusable behavior had to be created through modular JavaScript functions and shared CSS rules. LocalStorage updates also needed to remain synchronized across the dashboard, budget progress, categories, insights, and transaction lists after every add, edit, delete, or settings change.
The donut charts introduced an additional layout problem: category icons had to be positioned within proportional chart segments while staying readable and avoiding collisions on small segments. This was addressed by calculating each icon’s position from the midpoint of its category segment and displaying icons only when sufficient space was available.
5. Key Takeaways
A small application can still feel like a polished commercial product when visual consistency, feedback, accessibility, and user control are treated as core features rather than final decoration.
Building from a clear design system made repeated UI refinements faster and safer. Shared colors, spacing, radii, typography, shadows, icon mappings, and responsive rules helped maintain consistency as the interface evolved.
Keeping calculations and rendering centralized was essential. A single source of application state allowed every dashboard component to update immediately without duplicating transaction or budget logic.
Testing real user flows in the browser revealed issues that were not obvious from code alone, especially around responsive dimensions, modal behavior, focus management, dynamic chart layouts, and navigation styling.
My final thought: Finora demonstrates that a focused one-day sprint can produce a useful, responsive, and professional personal finance experience without frameworks or complex infrastructure. The strongest result is not only the feature set, but the clarity of the experience: users can understand their financial position quickly, make changes safely, and keep their data private on their own device.