Expense Tracker App

Keep track of where your money goes with this expense tracker app.

Try it out here: Expense-Tracker

Summary

Here is an Expense Tracker app I built with Reactjs, Bootstrap4, JSX as well as JS, HTML & CSS. I opted to use the nano-react-app template to keep the file structure lighter than create-react-app. This app lets you keep track of expenses by entering information into the text inputs, and displays the expenses in a table where you can view them, or delete them.

Author
Robin Fussell | LinkedIn

nano-react-app-template

The template project for nano-react-app.

• npm start — This will spawn a development server with a default port of 1234.
• npm run build — This will output a production build in the dist directory.

Custom port

You can use the -p flag to specify a port for development. To do this, you can either run npm start with an additional flag:

npm start -- -p 3000

Or edit the start script directly:

parcel index.html -p 3000

Adding styles

You can use CSS files with simple ES2015 import statements in your Javascript:

import "./index.css";

Babel transforms

The Babel preset babel-preset-nano-react-app and a small amount of configuration is used to support the same transforms that Create React App supports.

The Babel configuration lives inside package.json and will override an external .babelrc file, so if you want to use .babelrc remember to delete the babel property inside package.json.