Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/george-swift/expense-tracker
A single page application for keeping track of expenses. Integrates with a Rails API backend designed to support user authentication and CRUD operations.
https://github.com/george-swift/expense-tracker
es6-javascript hooks react-redux react-router sagas
Last synced: 22 days ago
JSON representation
A single page application for keeping track of expenses. Integrates with a Rails API backend designed to support user authentication and CRUD operations.
- Host: GitHub
- URL: https://github.com/george-swift/expense-tracker
- Owner: george-swift
- Created: 2021-08-02T13:25:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-01T08:19:42.000Z (over 2 years ago)
- Last Synced: 2024-10-18T16:21:03.493Z (2 months ago)
- Topics: es6-javascript, hooks, react-redux, react-router, sagas
- Language: JavaScript
- Homepage: https://redux-expense-tracker.netlify.app/
- Size: 5.42 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Expense Tracker
## Live Link
[Get started with Expense Tracker](https://redux-expense-tracker.netlify.app/)
## Objectives
- Data management in front-end components
- Handling lifecycle methods and reusable logic with React Hooks
- Using client-side routes with React Router
- Interacting with an API Backend
- Using a state management container in a React application
- Modern redux with Redux toolkit
- Managing async workflow with Redux Sagas
- Basic data visualisation
- Functional Programming
- Meeting model client requirements
## Features
A single page application that allows users to keep track of expenses. After `Sign up` or `Log in`, users are authenticated and able to access the app. The home page allows for creating and managing categories of expenses. Clicking on `Track expenses` in any category opens a page with information about expenses in a given list. Expenses can be added, edited and deleted as desired. The `Reports` page shows the total outcome of a user's expenses, _by categories_, in a doughnut chart. Lastly, the `Edit Profile` page allows users to edit their profile. _Expense Tracker_ is deployed on Netlify.
_Sign in to use the app_
## Prerequisites
- Internet Connection
- An Integrated Development Environment
- Chrome, Firefox or Safari across all screen sizes
- Node Package Manager [(NPM)](https://docs.npmjs.com/about-npm)
## Built With
- React
- React Router v6
- Redux Toolkit
- Redux Saga
- Javascript
- Chart.js
- Material UI
- SCSS
- HTML5/CSS3
## Getting Started
- Clone this project by running `git clone https://github.com/george-swift/expense-tracker.git`
- Run `npm install` to install the required dependencies.
- Clone the [back end](https://github.com/george-swift/expense-tracker-api) and go to `config/initializers/cors.rb`.
Change `origins` to `http://localhost:FRONTENDPORT`.
- Within this frontend app, navigate to `src/constants` and set the `API_BASE_URL` to `http://localhost:BACKENDPORT`.
- Start the backend server and run `npm start` to fire up a local server.
- To get a production bundle, run `npm run build`
## Testing
Run `npm test` to get a verbose test report.
## Authors
👤 **Ubong George**
- LinkedIn: [Ubong George](https://www.linkedin.com/in/ubong-itok)
- Twitter: [@\_\_pragmaticdev](https://twitter.com/__pragmaticdev)
- GitHub: [@george-swift](https://github.com/george-swift)
## Acknowledgments
- [React](https://reactjs.org/)
- [Redux](https://redux.js.org/api/api-reference)
- [Chart.js](https://www.chartjs.org/docs/latest/getting-started/)
- [Microverse](https://www.microverse.org/)
## Show your support
Leave a :star:️ if you like this project!
## License
Available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).