"Expense-Manager" allows an individual user or company to track personal or business expenses. Expense-Manager is built in React with SCSS styling which permits each individual element to occupy separate files making the product easily scalable and customizable by swapping components in and out as required for a wide variety of end users. The app is fully responsive for a seamless mobile user experience. This version of the Expense-Manager has been customized for use in food service and restaurant environments. As an added feature, if a restaurant manager finds themselves in the back office entering invoices when a call for a reservation comes in, they can click the "Reservation" link and be taken to our Reservationist-2 product, saving them a trip to the host desk to enter the reservation.
Login with your Google account. Click Add Expense to Enter expenses. Review, Sort, Filter, and Tally expense records in the Dashboard. Click any record in the Dashboard to read Notes, Modify and/or Delete it on the Edit's Page.
The expense-manager has been deployed to a Heroku Dyno and can be used by following the link. (Note: Resting Dyno's can often take 10 to 15 seconds to spin up on initial load and are not indicative of a sites true load speed.)
| Core | Styling/Authentication | Dependencies | Dev Environment/Testing |
|---|---|---|---|
| React | SCSS | AirBnB/React-Dates | Babelrc Compiler |
| Express | Google Fonts | Moment.js | WebPack |
| NodeJS | normalize.css | Numeral.js | Jest Testing Framework |
| Redux | Google Login | Yarn | Redux-Devtools-Extension |
| Firebase DB | Firebase AuthO | UUID | extract-text-webpack-plugin |
| JSX | Validator | Redux-Thunk | Babel Poly-Fill |
| JavaScript | CSS3 | RegEx | LiveServer |
| HTML5 | dotenv | CSS Loader | History |
{
"rules": {
".read": false,
".write": false,
"users": {
"$user_id": {
".read": "$user_id === auth.uid",
".write": "$user_id === auth.uid",
"expenses": {
"$expense_id": {
".validate": "newData.hasChildren(['description', 'note', 'createdAt', 'amount'])",
"description": {
".validate": "newData.isString() && newData.val().length > 0"
},
"note": {
".validate": "newData.isString()"
},
"createdAt": {
".validate": "newData.isNumber()"
},
"amount": {
".validate": "newData.isNumber()"
},
"$other": {
".validate": false
}
}
},
"$other": {
".validate": false
}
}
}
}
}- Clone down this repo
- Restore dependencies by running
yarn installin the root of your local repo - Restore production files by running
yarn run build:prod - Start local server by running
yarn run dev-server - You are now in development mode on localhost:8080
- Deploy to host of your choice: ex.; Heroku
- Connect to a database and setup authentication of your choice: ex.; Firebase
- Create Firebase DB and authentication per Firebase documentation
- Add your API keys to your local project
- Set Firebase API keys in Heroku from command line:
heroku config:set <list all 6 keys copied from your .env file and separated by a space> - You should now be able to login to your deployed site
Note: If you encounter a FIREBASE FATAL ERROR when you attempt to launch your app, please refer to the repo Firebase-Fatal-Error-Heroku-Deploy-Solved for a possible solution.
This app was built in React to be easily scalable. Other versions of this app can be found on the following repo's.