Reckon

Reckon is a financial app to help business owners manage their income, expenses, bills, and budget information. The app is also able to generate reports that can be exported in pdf and csv format and offers also an API that can be consumed by other aplication or intergrations.

Functional Requirements

• Development focuses on a single page application (SPA) called Reckon, built using React.
• Data is persisted by the API server using a PostgreSQL database.
• The client application communicates with an API server over HTTP, using the JSON format.

Behavioural Requirements

• Users must create their account in order to be able to create an account to keep track of my budget
• A user can create, remove, update, and delete expenses
• A user can create, remove, update, and delete incomes
• A user can create, remove, update, and delete accounts
• A user can create, remove, update, and delete accounts payments
• A user can create, remove, update, and delete accounts deposits
• A user can create graphics by selecting the period and get custom view of expenses, incomes, and accounts
• A user can view a summary of incomes, expenses, balances as well as all incoming expenses on the main dasboard
• A user can create generate reports (All Income, All Expenses, Income Report)
• A user can print and/or create pdf files from the reports
• A user can get a custome view of the budget by period (stretch)
• The application makes API requests to load and persist data. We do not lose data after a browser refreshs.

Technical Specifications

• React
• React-bootstrap
• React-pdf
• @react-pdf/renderer
• React-Router
• React-charts
• Node-saas
• Saas
• Node
• Nodemon
• Cors
• Cookie-parser
• Dot-env
• Morgan
• Express
• PostgresSQL - pg
• pg-native
• debug
• Axios
• Babel
• Webpack
• Websockets
• Weekpack Dev Server
• nvm
• Storybook
• Weekpack Dev Server
• Jest
• Testing Library

The Reckon client application created using Create React App. Express is the basis for the Reckon API server application.

Both servers run concurrently; requests are proxied from the Webpack development server to the API server.

Database

• Database Schema Files
• Database Seed Files
• Database ERD Model

Stretch Specifications

• The client application communicates with a WebSocket server.
• When a user changes any incomes, expenses, bills, budgets, etc, all connected users see the update in their browser.
• WebSockets
• Using bank APIs to feed the application with information from bank statements
• Using creditcars API to feed the application with information from the credit card statements
• Send SMS alerts for upcoming bills due date

Reference

• React Documentation
• Storybook Documentation
• Jest Documentation
• Axios Example

Setup

• Clone the Reckon Application repository
• Make sure you are using node version 8.9.4 on the backend (nvm)
• Make sure you are using node version 10.20.1 on the frontend (nvm)
• Install all modules dependencies separately on client and backend and folders by running ``sh npm install` on each folder.
• After installing all modules dependencies by running sh npm install
• Make sure you perform a db reset before run Reckon App.

Running Webpack Development Server

npm start

Final Product

Dashboard

Incomes Page

Expenses Page

Accounts Page

Account Detail

Reports Page