🥷🏽 React native expense tracker project

A react native application with javascript to track your expenses.

📦 Technologies

• React Native
• Javascript
• Firebase database
• Recoil

🦄 Features

Here's what you can do with my expense tracker:

• View all your expenses: You can see how much you spend in total and then see what you bought on what date.

• Add a new expense: You can add an expense by clicking on the + icon and entering in the amount and type.

• View analytics of your expenses: On the analytics page you can view how much you spend in what week of the month. Also what your biggest spend was and on what item you spend the most money on. Also you see a history of every item you bought and how many times.

👩🏽‍🍳 The Process

As a start of this project I wanted to create a simple application with react native that would be available on your phone and website.

So I choose an expense tracker because you can make it really simple and always expend on it later.

I started by looking up designs for my application. After I went and created a firebase database. This was the first time using it so it was a bit of a struggle but after I figuered it out it was relativally easy.

After creating the database and knowing what design I'm going to make. I started creating my project and coding eveything in.

📚 What I Learned

During this project, I've picked up important skills and a better understanding of complex ideas, which improved my logical thinking.

🧠 Brain:

• Logical Thinking: Working in react native is very simular to react but still has a few things you have to understand before coding everything up. Most of the difficulties where with the styling and the barchart.

📓 New knowledge:

• React native: I did got some experience in react native with school but building your own project boosts your knowledge so much.
• Firebase database: First time using firebase as database. This was a fun experience, but a bit difficult to get the hang of.

📈 Overall Growth:

Each part of this project helped me understand more about building mobile apps, managing complex information, and improving user experience.

💭 How can it be improved?

• More user friendly
• Styling the application more
• Implementing more features

🚦 Running the Project

To run the project in your local environment, follow these steps: NOTE: To see the project in it's full potential scan the QR code after running the project to launch it on your phone.

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:3000 (or the address shown in your console) in your web browser to view the app.

🍿 Video

https://github.com/JarneDirken/2024-Angular_Project/video/...