React JS SPA Expense Tracker With Firebase

Summary

React JS single page application expense tracker with authentication, database storage and cloud hosting with Google Firebase.

This project was part of the Net Ninja React JS + Google Firebase Course on Udemy.

Notes:

Registered users can login, sign up, then create expenses and delete their own expenses.

Unregisterd users will only see the login screen and the register screen.

The application has route guarding implemented to cater for unauthorised access to routes.

Also, rules have been setup on the backend where only authenticated users can add and delete items.

Tech and Tools

• JavaScript
• CSS
• HTML
• Google Authentication
• Google Firestore Database
• Google Hosting
• React
• React Router Dom

React JS

The demonstration uses the following React JS features:

• Hooks
  • useState
  • useEffect
  • useReducer
  • useContext
  • useRef
• Components
• API

Demo

Open demo on Google hosting.

Link to Demo