Trip Tracker App

Receive a summary of your trip's expenses, broken down by multiple metrics, in your preferred currency
The trips dashboard page
Add a new trip. Give it a title, a preferred currency for summaries, and choose categories for your expenses (can be edited at any time)
The expenses page for each trip
The data to track for each expense
Date selection done via a Material UI widget
Fill in location data with a Google Places business or city search
Sort your expenses (and trips) on a variety of metrics
Receive a summary of your trip's expenses, broken down by multiple metrics, in your preferred currency
The trips dashboard page

Background

Trip Tracker arose out of a desire to organize and summarize all of our expense information from a recent trip abroad. While there are countless expense-tracking apps out there, I chose the much less efficient - but ultimately more rewarding - route of creating my own.

Features

Trip Tracker acts as a summarizer for each of your trips expenses. For each trip, a preferred (eg. home) currency can be set, with which all of the expenses entered therein will converted to.

For each expense, a user may enter a number of metrics, a few of which are required for summarizing actions.

Expense Title (Optional) - a quick descriptor of the expense.
Cost (Required) - the value of the expense.
Category (Required) - a general category for the expense. Required for summaries about the types of expenses you generally incurred on your trip (ie. Food, Transport, Hotels, etc.).
Currency (Required) - the original currency the expense was paid in. Defaults to the trip's preferred currency.
Payment Method (Optional) - the means of transaction (ie. cash, debit, credit, etc.).
Description (Optional) - An optional expansion upon the brief detail of the title.
Date & Time (Required) - The date and time of the expense. Defaults to the current date and time.
Location - Where the expense occurred. Use Google Places search input to autocomplete the fields.
- Business (Optional) - The business the transaction occurred with.
- City (Required) - The city the transaction occurred in.
- Country (Required) - The country the transaction occurred in.

The list of expenses can be sorted by Date, Cost, Country, and Category.

Expenses Summary

Each trip has a summary of the Expenses page.
The total spent is summarized in the trips preferred currency. This currency can be changed at any time from the summary so that the metrics can be viewed however makes sense to you, whether it be CAD, USD, EUR, or 30 other currencies!
The summary also contains other interesting metrics, such as:

total number of expenses,
the average expense value,
the number of expenses per day,
and the expenses subdivided by Category, Date, City, and Country.

Development

React

Material UI

Express

MongoDB

Node JS

Trip Tracker was developed as a full stack MERN (MongoDB, Express, React, Node.js) app.

Front-End

The React front-end primarily utilized components from Material UI, a component library implementing Google’s Material Design visual language. Where components need more custom styling, Material UI’s supported JSS styling solutions are used. The front-end makes liberal use of React Hooks and React’s Context API to allow most components written by myself to remain as decoupled, light-weight functional components.Trip Tracker is a single-page application, as it uses React Router as its routing solution, only fetching the index HTML page on initial loading.

The app makes use of Google Maps Javascript API Autocomplete library to search for the location of the user’s expense, and autofills the locations section of the form after a Place Details request. The app also uses the Exchangeratesapi.io API to fetch conversion rates between two currencies for the particular date specified for the expense, as well as for the Expenses Summary.

Back-End

The back-end is a Node.js server using MongoDB for its NoSQL database and Express for routing. The Mongoose library is used as the interface to MongoDB, as well as for schema construction and validation. The production build of the app uses MongoDB Atlas as its hosted database. As Trip Tracker is a single-page application, the Express routing is used primarily for API endpoints for the front-end.