Expense Tracking
Allows users to create, manage, and review daily expense records.
// Front-End / Mock API Project
Pennywise
A front-end expense management demo app built with React, TypeScript, Vite, Tailwind CSS, Redux Toolkit, React Query, Axios, and a GitHub-hosted mock REST API.
2025
Front-End
01 / Overview
Pennywise is a front-end expense management demo application that lets users explore expense tracking, record management, and spending visualization through a mock API. The project uses React, TypeScript, Vite, Tailwind CSS, Redux Toolkit, React Query, Axios, React Router, and a GitHub-hosted JSON Server mock API to simulate REST-style data flows. It focuses on practical front-end architecture, state management, data fetching, CRUD UI workflows, session persistence with localStorage, and responsive dashboard design.
Spending Visualization
Displays category-based charts to help users understand spending patterns.
Demo API Integration
Connects the deployed app to a GitHub-hosted mock API for portfolio testing and sample data display.
02 / Key Features
01
Expense CRUD Operations
Users can explore create, read, update, and delete expense workflows through a responsive dashboard interface using mock API responses.
02
Mock REST API
Uses a db.json-based mock API for development and a GitHub-hosted My JSON Server endpoint for the deployed demo.
03
React Query Data Flow
Handles expense data fetching, caching, and synchronization using React Query.
04
Redux Toolkit State Management
Manages global application state using Redux Toolkit and React Redux.
05
Axios API Layer
Uses Axios to organize API requests and communicate with the mock backend.
06
Responsive Routing & Dashboard
Uses React Router for page navigation and provides a responsive dashboard experience across screen sizes.
03 / Process
01
May 2025
Planning
Defined the app structure, dashboard flow, expense data model, and required CRUD features.
02
May - June 2025
Architecture
Set up React, TypeScript, Redux Toolkit, React Query, Tailwind CSS, and routing structure.
03
June - July 2025
Development
Built expense forms, history views, category selection, dashboard summaries, and chart components.
04
July - August 2025
Data Integration
Connected the app to a mock REST API using React Query and handled expense data operations.
05
August 2025
Deployment
Deployed the application to Vercel and prepared the project for live testing.
04 / Tech Stack
React
TypeScript
Vite
Tailwind CSS
Redux Toolkit
React Query
Axios
React Router
json-server
React Icons
Vercel
Git
05 / Results
📝
CRUD
Expense Management
📊
Charts
Spending Insights
⚙️
RTK
State Management
🚀
Live
Vercel Deploy
© 2026 Hyosang Han's Portfolio. All rights reserved.