Expenses Tracker 💲🔍 - Personal Project

Live Version

visit -> https://avi-cohen-nehemia.github.io/expenses-tracker-ui/#/

The app utilizes an API on the back-end, and the repository for this can be found here.

Background

This app is a personal project which I decided to build to keep my React and front-end skills fresh while also contributing to my personal portfolio. While this app's scale is not particularly massive, it is the biggest that I have developed by myself.

Tech Stack / Frameworks

• React
• Redux
• JavaScript
• JSX
• Bootstrap
• HTML
• CSS

MVP

Create a tool where users can record any transactions that they have made and are able to refer back to if needed.

Additional Features Implemented

• All the information is being stored on and fetched from an API.
• Create dedicated dashboard displaying useful insights.
• Implement authentication (login/logout/signup).
• Users are able to sort transactions order by amount or date.
• Make a profile page for users to view their personal details.
• Ability to edit username and email address.
• Display spinners while data is being fetched/created.
• Add alerts for errors and successful actions.
• 404 page.
• Restrict access to certain pages for users who are not logged in.
• Ability to delete transactions.
• Users can filter transactions by date.
• Users can convert and display their transactions in different currencies.

Future Plans / Features

• Ability to delete an account.

• allow users to change their password.

• Add a "remember me" functionality to login/signup.

• Write unit tests for all the components.

• Ability for users to add additional categories.

Known Issues / Bugs

• Responsive styling have minor issues on mobile.
• No alert/user feedback when unable to access protected routes.

Reflection

Tech Stack Choice

I love React and managing state with Redux and although I've been using these technologies for a while, I was still challenged in multiple ways during this project. My only regret is that I did not choose to use React Hooks to build my components, it's an aspect of React that I definitely plan to explore in the future.

Planning

I think this project was planned fairly well. I set myself goals, I wrote down the steps to achieve them and I followed through. Some decisions I've made during planning turned out to be somewhat questionable but the fact that I dedicated adequate time for that made it much easier to correct any mistakes that I made.

Favorite Parts

Being able to successfully integrate 3rd party libraries like Sweetalert or ES-Lint. It is always a bit daunting and frustrating to start reading the documentation to a new piece of technology I have never used before, but when I manage to achieve what I wanted to do with them it is very rewarding.

Least Favorite Parts

I can't really say anything on the front-end was particularly frustrating but the thing I most struggled with was to try and make the app responsive on all screen sized.

Installation

Start by cloning the repository

git clone [email protected]:Avi-Cohen-Nehemia/expenses-tracker-ui.git

Then Install And Launch the App

cd <project-directory>

npm i && npm start