Graphical Explanation of this project (Entity Model Diagram, and something similar to UML): https://excalidraw.com/#json=lDcxWl1JEGtK_ar66wFPY,USzLKr2TeVeKVyVKZ5vr5Q
Before I log in on flavortown, I did all the page with the DOM, it worked. But now to complex things a little, I started migrating it to react. First I made a excalidraw to organize the idea and concept. What each component where supose to deploy (another component, and so on) How they are related.
I first made a module with the component for “ingredients” another for just “ingredient” separated and I realized it wasn’t necesary to separate them. And also the code was redundant. That’s why I changed it to Typescript and started to use generic types to solve this problem. Now I can create as much sections as I want and I don’t have to paste almost the same code more than once.
I also separated API-related functions into a “services” folder. That API already existed before Flavortown, but I made some changes to it.
When I started, the site looked awful, then I decided to use tailwind. And, I’m not gonna lie. I hate css so I didn’t think a lot about how to make it, it was more AI, than anything else.
I’m proud of the results. It was hard to deploy the page. Tried first with gh-pages package, it didn’t work. It worked manually with Cloudflare. Is hard for me to organize the commitment. What to say on the message, what to add in the stage, when is really needed to do a branch and when is not really necessary. For example, I made one just because I added tailwind, and then another one for react & vite (the last one makes sense, the first one don’t, now I know)
It was hard to understand how the states, effects and hooks worked at the beginning. I wanted to do it like the real normal dom. But then I noticed it was a completely different paradigm.
For some reason there says “16h 37m” but it was a lot more. On hackatime it says 60h 27m
Log in to leave a comment