PoupApp is a React + Vite personal finance dashboard created as a learning project focused on styling and UI composition rather than full application functionality. The goal of the project is to practice modern front-end techniques, compare different styling approaches such as CSS Modules and Tailwind CSS across separate branches, and build a clean, organized interface that improves component structure, layout design, and visual consistency.
Creating a grid structure for the Cards and creating, componentizing, and styling the third and fourth Cards.
Creating and styling Typography and Card components
Importing icons, creating and styling the Main and SearchInput components
Creating de sidebar and importing the global font family Work Sans
Restarting the project on a different branch to use Tailwind instead of CSS Modules. I took the opportunity to test Tailwind in its playground, clean up the project, and add the global color variables to Tailwind.
Creating, componentizing, and styling the fourth and final Card.
Implementing a grid to allow the Cards to have stretch behavior, creating and componentizing the third Card.
Creating components for the first and second Card
Creating and styling Card component
Building the Input component and the Main container
Building the side bar
Starting project, cleaning files, creating var colors and creating the main container
