Skip to content

philipHinch/my_money

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

myMoney - Expenses Tracking App

This is a personal React Project. This my first project ever in which I use backend technologies. Here I have set up user authentication together with a database and storage for profile images. Each user can sign up and then add/remove their expenses and incomes. They can also update their profile picture and username.

There is a lot of asyncronus programming. I managed state with useReducer, useContext and useState.

I have decided mid-development to improve the app (since I was having issues with state sync accross different components and the profile page being too bloated) and modify the profile page by splitting it into components. Also i added the user info and isAuthRead to context for easier access. I also created login, signup and logout custom hooks to furter improve the code and make the navbar leaner.

This project made me sweat at the beginning, it was my first project using backend technologies and it took some time to understand exactly how to implement what I wanted to achieve. I have put a lot of learning effort and did a lot of reaserch and study during the development of this project and I have now a better understanding of certain concepts that were unclear. I learnt more about firebase authentication, database, storage. Also how important are async functions and to sync the states.

Had some confusion with git branches, some commits are messy.

View Project

This is an image

Install Dependencies

npm install

Run

npm start

This is an image

Technologies used:

Front-End:

  • REACT.JS
  • REACT FUNCTIONAL COMPONENTS
  • REACT HOOKS + CUSTOM HOOKS
  • STATE MANAGEMENT WITH USEREDUCER & USECONTEXT
  • CONTROLLED INPUTS
  • ASYNC/AWAIT
  • HIGH ORDER FUNCTIONS
  • ROUTE GUARDING
  • CSS ANIMATIONS

Back-End:

  • FIREBASE USER AUTHENTICATION
  • FIREBASE DATABASE
  • FIREBASE STORAGE

This is an image

This is an image

View Project