Mortgage Calculator Application & API

This project is a Next.js application built with TypeScript. It features a web-based mortgage calculator that helps users estimate their mortgage payments based on various inputs. This repository includes both the frontend implementation with React and Material-UI, and an API route for mortgage calculations.

Mortgage Payment Formula

The formula used to calculate the mortgage payment is as follows:

Where:

• M = Payment per payment schedule
• P = Principal amount (the loan amount)
• r = Interest rate per payment schedule, calculated by dividing the annual interest rate by the number of payment periods per year
• n = Total number of payments over the amortization period

This formula helps estimate the amount to be paid periodically, such as monthly, based on the loan amount, interest rate, and number of payments.

Project Tech Stack

The tech stack I have chosen for this project combines modern, efficient technologies for building scalable, maintainable, and high-performing applications. React and Next.js provide a powerful UI and server-side framework, while TypeScript enhances code quality. SCSS and MUI contribute to a polished user experience, and Fetch and Jest support robust client-server communication and testing.

Project Requirements

Ensure you have the following versions of Node.js and npm installed:

• Node.js: v16.20.2
• npm: 8.19.4

You can check your versions with:

node -v
npm -v

If you need to install or update Node.js and npm, consider using nvm to manage your versions.

Frontend

React with Next.js 13

• React: JavaScript library for building user interfaces, supporting reusable components and efficient state management.
• Next.js 13: The most popular React framework providing server-side rendering, static site generation, and API routes for improved performance and SEO.

TypeScript

• Superset of JavaScript that adds static types for better code quality and early error detection.

Scoped SCSS

• SCSS scoped to components for encapsulated styles, preventing conflicts and simplifying management

MUI 6

• Material UI component library for building modern, accessible user interfaces with Google's Material Design.

Fetch API

• Modern JavaScript API for making HTTP requests, offering flexibility and ease of use.

Backend

Next.js API Routes

• Allows building API endpoints within the same codebase as the frontend, ideal for server-side logic and interactions.

TypeScript

• Ensures consistent type-checking on the backend, improving code quality and developer experience.

Jest

• A popular testing framework for JavaScript, suitable for unit testing logic such as mortgage calculations, with features like mocking and code coverage.

npm

• Used for package management, ensuring that all dependencies are managed efficiently and consistently throughout the development process.

Getting Started

First, clone the repository and navigate into the project directory:

git clone https://github.com/your-username/mortgage-calculator-api.git
cd mortgage-calculator-api

Install your packages:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the application running.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Running Automated Unit Tests with Jest

To ensure the accuracy of the 'calculator' API route, which contains the core logic for calculating a mortgage based on user inputs from the UI, you can run my automated unit tests using Jest. This process will help verify that the mortgage calculation logic is functioning correctly. Here’s how to do it:

1. Navigate to the Project Directory:

cd mortgage-calculator-api

2. Install Dependencies (if you haven’t already):

npm install

3. Run the Tests:

npm test

This command will execute the Jest testing framework and run all the unit tests defined in the project. You should see output similar to the following:

PASS  src/app/api/calculate/helpers.test.ts
 validateUserInputFromClient
   ✓ should return an error for invalid property price (3 ms)
   ✓ should return an error for invalid down payment (1 ms)
   ...
 calculateCMHCInsurancePremium
   ✓ should calculate the insurance premium for a given rate and mortgage amount
   ...

Test Suites: 1 passed, 1 total
Tests:       37 passed, 37 total
Snapshots:   0 total
Time:        1.397 s
Ran all test suites.

Screenshots

Here are some screenshots of the application:

Home Page:

The home page of the Mortgage Calculator application.

Mortgage Calculator Page:

The main page of the Mortgage Calculator where users can input their mortgage details.

Mortgage Calculator with all Validation Errors:

The Mortgage Calculator page displaying validation errors for user inputs.

Validation Error for Down Payment:

An example of validation error indicating that the down payment is too low.

Mortgage Calculation Results without Default Insurance:

Results of a mortgage calculation where default insurance is not required.

Mortgage Calculation Results with Default Insurance:

Results of a mortgage calculation including details on default insurance when it is required.