nandanmen / coin

React app for managing expenses.

Coin

Finance application for managing expenses. Built with Typescript and React. This repo contains the client side code.

Credit to Najla Sekariyanti for the incredible UI/UX work on this app. Check out the case study that she wrote here.

Running the App

You would need to first clone the backend server from here:

$ git clone https://github.com/narendrasss/coin-server.git

Then run the server with yarn dev or npm run dev. The server will start at localhost:3001. This url is already listed as a proxy on the react app, so everything should work correctly.

Then clone the repository:

$ git clone https://github.com/narendrasss/coin.git && cd finance-react

Then start the development server:

$ npm start

This launches a development server at localhost:3000. Visit this page on your browser to browse the app.

To-Dos

General

• Change all SASS files to be CSS modules
• Remove repetitive code (mainly scss styles)
• Add working (wireframe) components for each page

Pages to Implement

• Login
• Onboarding pages
• Dashboard (needs fix)
  • Fix styling and component structure
• Budget
  • Add wireframe
  • Fix styling
  • Implement modify buttons
  • Correct fixed expense component
• Add fixed expense
• All categories
  • Add wireframe
  • Fix styling
• One category (one)
  • Add wireframe
  • Add content by fetching from server
  • Fix styling
• Add category
  • Add wireframe
  • Fix styling
  • Implement onSubmit feature
• All expenses
  • Add wireframe
  • Fix styling
• Add expense
  • Add wireframe
  • Fix styling

Other

• Implement static PieChart component
• Implement working PieChart component (using D3?)

coin's Issues

Require localstorage fallback

The app uses localStorage to store the token then checks if the token exists to determine whether the user is logged in or not.

In private or incognito mode localStorage throws errors. Need to add fallback (https://www.npmjs.com/package/local-storage-fallback) for fix.

Thanks to reddit user /u/mastery!