/expenseeve-app

A expense management application

Primary LanguageJavaScriptMIT LicenseMIT

expenseeve-app

An expense management react application to compliment with the expenseeve-api backend.

All the information related to app is provided in this file, and information related to APIs is provided in expenseeve-api

Features Completed

  • Sign up
  • Login
  • Logout
  • Update Total Budget
  • Create Category
  • List Category
  • Delete Category
  • Restore Category
  • Create Expense
  • Edit Expense
  • List Expense (With pagination 10 entry per page)
  • Delete Expense
  • Restore Expense
  • Update Name
  • Update Username
  • Change Password

Sign up, Login and Logout

Image of Signup

  1. Signup application is provided for new user on login page above is the image of signup page
  2. there are four fields name, username, password and confirm password (total budget will be provided by user on first login
  3. Every field in signup form has field validation
    • all fields must me filled
    • username ,password should be atleast 6 charactor long
    • confirm password should match password
  4. After successful Signup a succes screen will be shown and a option for go to login is provided for easy navigation screenshot provided below

Image for Signup Successful

  1. After Clicking on go to login user is redireted to login

Image For login

  1. There are three field in Login form Username, password, rememberme
  2. If user selects remember me option his session will be available for all the tabs in current browser utill the token is expired if user does not come back to the application for three consecutive days user's session token will be expired and user will be logged out
  3. if user does not select remember me user session will be valid for that tab only after user closes tab or browser user will be looged out
  4. after validating the username & password user is logged in and depending on the total budget key he will be reditrected to home (If total budget is set) or settings(If total budget is not set).
  5. Logout option is provided in sidebar

Settings (Total budget update & Category Create,Read,Delete)

Image for Settings

  1. User can update his total budget and create categories on this page
  2. User can deete perticular category by clicking delete button provided in actions column
  3. User can find thea activation status of category in ststus column , background color of row and red color of row text
  4. user can restore the caegory by clicking restore button

Home (Expense CRUD, Budget overview, Category wise split)

Image For home

  1. In first row I added two charts one is doughnut chart and other is pie chart which givers the info about how much money is spent how much percent is spent and category wise spending
  2. if there are more than five categories table will be shown instead as shown in below screenshot

Image For home 2

  1. Add expenses button is provided in second row a modal with form will be shown
  2. expense has four fields category dropdow, Item name, Amount, Data
  3. after creating the expense it will be updated in the expense table below the button
  4. In exoense table Edit option is provided for every entry when edit button is pressed update expense form on modal will be shown with prepulated values this form is the same as add expense from both forms are shown below

Add Expence Modal

Add expenses

Update Expense Modal

Update Expense

  1. Delete option is provided in action column for every entry if delete is pressed a action confimation modal like below will popup for confimation this will happen for restore to this is same functionality like delete and restore category

Confirmation Modal

Confirmation modal

  1. After deleting expense that row will become rey and status will become inactive to show user that this entry is deleted user can restore the entry using restore button

Profile (Update Name, Username, Change Password)

  1. On profile page update Name , Update Username and Change password is provided
  2. field validation are added for all these fields

Image for Profile

Platform and Editor

I have used Fedora 31 workstation (64 bit) for development and testing. I used Atom text editor.

Technologies/Libraries Used

  1. JavaScript
  2. React Js (React hooks, react-router-dom, react-dom)
  3. Bootstrap (react-bootstrap)
  4. chart.js
  5. styled-components
  6. react-toastify
  7. axios

Instructions

Please follow these instructions for running the application.

APP

  • [] Install nodejs, npm ,yan on your machne

  • [] clone expenseeve-app repo from github.com/paragpalod/expenseeve-app

  • [] install all the dependencies using yarn

  • [] start server using yarn start

  • there is warning for ./local module not found after starting the server ignore this warning as this is related ti chart.js and it will be resoved in their next update