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
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.
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
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:
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
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
Top comments (0)