Food tracker app (Phase 1/?) for show how you split your money
Tags: laravel, redis, react, postgres
Published: 2024-06-18 01:00:41

Hi everyone, in this post I will share the process of creating a food tracker app that tells you how you split your money across the different stores and food that you purchase.

## Why are you building this?

Right now I’m having a transition on my life, where I want to move from the house of my mother to start living alone, and one important thing when you start to live alone is the food, specially when you have a limit budget from where you can purchase your food.

With that two things in mind and considering that I most of the time eat the same things, I wanted to have some kind of app to see what food I regularly bought and compare the different price of these across different stores to get the same food for the cheapest price possible.

## Stack for the application

The stack for the application not only consists on which technologies we’re going to build the app, but also how will be deployed and how we will split the work for the project.

### Technologies for the development of the app

### Frontend

For the frontend part we will be using react js and typescript. Alongside the ui component from shadcn, the tanstack query and tanstack router packages and finally the zustand statemanagment package.

### Backend

For the backend we will have our friend laravel for supporting all the creationg of the database through the migrations, the integration with redis and providing the api support.

### Databases

For the databases we will have postgresql as the main db, alongside a redis instance for handling basic cache of the pagination of the api and the stores and food part of the applicatIon.

### Technologies for the management of the task of the project

I will be using jira for the task managment and the issues of github for getting a general idea of what is missing from the project.

### Technologies for the deploy of the app

I will be using railway for the deploy of the application because I see that you can deploy laravel project on it and also because have a free trial that gives you 5 dollars to get started with the platform.

## Development of the app

At the beginning I create a simple repo on github with the next structure 

```bash
frontend # for the react project
backend # for the laravel project
docs # for documentation of the project
```

I started the react project using pnpm, meanwhile I use laragon for my local development for laravel (because I’m on windows and laragon comes with the possibility to start a redis service).

After the initialization of both projects I focus on developing the ui of the application because it’s one of the things that took me a lot of time, after having the main screen of the application (food, stores and entries) I move to the backend to start with the development of the api.

### Database diagrams

Next are the diagrams for the tables of the app, I use the laravel migrations for building the database, but this will be the equivalent diagrams.

![Database diagrams, showing 4 tables, stores, entries, food and entry_dets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfqvhfrm3xp7mfqlvtih.png)

The database is in `postgresql` .

### Overview of the backend

The backend consists of only of the endpoint of the api alongside with the services for the redis integration. The reason for this is because I will the only one to use the app, so I don’t need users for this app.

### Redis integration

The integration of redis was using the predis package alongside of a service for exposing the main actions for all the controllers, for saving, remove and get keys of the app.

### Overview of the frontend

In the frontend we use `zustand` for the state of the app, alongside `shadcn` components with tailwind and `tanstack router` and `query` packages.

The main problem with the frontend was to create the charts for the user to see their summary of the app.

## Deploy of the app

For deploying the app we will be using `railway` because has a trial of 5 dollars to test the service. 

### Final look of the app

This is how our deploy is going to look at the end of this section

![Railway final look of the services used in the app, redis, postgresql and two card about the code of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3jvc8hyp7xaprdbo45c.png)

### Frontend service

Because the repository for the project contains both `frontend` and `backend` for the deploy the way that I found to work was to have two different services.

In the frontend service we set the root directory to point to the folder that contains the frontend in my case is `frontend` Also setup the env variable for the api as show below:

![Setup of the vite api url env variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hhao81g8hrk7eqow772.png)

### Backend

For the backend we need to add a `NIXPACKS_BUILD_CMD` for work better with the laravel app. Also the setup for this service is the same as the frontend part

The nix command it’s the next one

```bash
composer install && npm install --production && php artisan optimize && php artisan config:cache && php artisan route:cache && php artisan view:cache && php artisan migrate --force
```

### PostgreSQL y Redis

For redis and postgres is as easy like click on `create` button and search for the database and redis service.

## Final words about the app and next steps

Right now the app as completed the first state of it, store the data and give a basic report to the final user about their current expenses. But there is still a long way to become a really good app, one of the parts that I want to improve in future version are the UI and UX of the app. Alongside with the posibility of adding users.

Here are some screenshots of how the app currently looks

![A display of data related to the entries that you do](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ck52ygczpq44dlrul8s.png)

![A modal showing how to add a new entry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7d1jvjq1mpwnzpk2jgb.png)