Code Monkey home page Code Monkey logo

expensify-app3's Introduction

Expensify-App

One stop app for all your expenses!
An expense manager with filters, grouping and sorting for all your expenses.
Login with your Google account to get started.

Technology Stack

  • ReactJS
  • Sass
  • Redux
  • Redux-Thunk
  • React-Router
  • NodeJS
  • Firebase
  • Webpack
  • Babel

How To Use

Authentication and general use

  • Click on Login with Google button to authenticate using a Google Account
  • From the pop-up select the google account you want to use
  • Your dashboard screen should open with your name on the top-right
  • App Navigation :
    1. Dashboard: Clicking the Expensify text on the header from any page will redirect you to the expenses dashboard.
    2. Logout: The Logout button on the top right of the header will log you out from the current session. All your expenses will be saved for further use.

Creating an expense

  • Click on Add Expense button below your expense summary for adding an expense.
  • Add all the details of your expense
    1. Description: Add title/description of your expense (compulsory)
    2. Amount: Add the amount you spent format : [...xx.yy] (compulsory)
    3. Date: Add the date of the expenditure (defaults to current date)
    4. Note: Add some additional information about your expense.
  • Click on Add Expense to save the expense
  • View it on your dashboard

Filtering/Sorting expenses

  • Visit your dashboard page and the expense summary will show you the total number of expenses on screen and the amount they total.
  • Use the filters to filter your expenses
    1. Search By Title: Search for your expense by it's title and recieve per-keystroke feedback of the value typed.
    2. Search By Date: Search for a group of expenditures between two particular dates i.e the start date and the end date.
  • Sort your expenses using the sort dropdown/select box
    1. Amount: Displays all the expenses on screen in the order of costliest expense first and the cheapest last.
    2. Date: Displays all the expenses on screen in the order such that the expense with the latest date of expenditure comes first.
  • The Unfiltered Expenses component will continue to show how many expenses have been hidden due to the filters applied.

Editing an expense

  • Clicking on any displayed expense will allow you to edit it.
  • Follow the same rules as that of adding expense
  • Click on Add Expense button to save and update the expense

Removing an expense

  • Clicking on any displayed expense will allow you to remove it
  • The Remove button beneath the Add Expense button will delete your expense
  • Clicking on that button will ask for your confirmation for removal
  • Click on Remove on the pop-up to confirm the removal
  • You will be redirected to the dashboard upon removal.

Project Setup And Use

// installs dependencies and runs live-server

yarn install
yarn run dev-server

expensify-app3's People

Contributors

elit-altum avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.