Take Home is a comprehensive web application designed to help Canadians manage their personal finances. Built with React and TypeScript, it provides essential financial planning tools tailored to the Canadian tax system and financial landscape.
The interface is fully responsive, ensuring a smooth experience across desktops, tablets, and mobile devices. Calculations update in real time as inputs change, making it easy to explore scenarios and forecast outcomes.
I created this application because I often wondered how much I would actually take home after deductions, and I wanted a simple way to visualize the impact of small budget adjustments. Building this tool gave me the opportunity to solve a personal need while also creating something useful for others facing similar questions.
The tax calculator determines your obligations based on your individual circumstances and province of residence. It accounts for the complexities of both federal and provincial tax systems, ensuring accurate and region-specific results.
The budget planner allows you to allocate expenses across categories you define such as housing, food, transportation, entertainment, savings, and other personal costs. Once entered, your data is transformed into clear visualizations of financial allocations, making it easier to identify opportunities to cut back or optimize.
Budget data can also be exported as a CSV file for further analysis in other applications or record-keeping.
The application is built with Next.js, leveraging its structure and server-side rendering features, while also giving me the chance to deepen my experience with the framework. I used Shadcn UI to quickly design a clean, minimal interface, and GitHub Actions to automate building, linting, testing, and deploying to Vercel.
Git/GitHub
Github Actions
Next.js
React.js
Shadcn UI
Tailwind CSS
TypeScript
Vercel
Front-end Development
Responsive Design
State Management
UI/UX Design
Version Control