Advice Generator APP with React

What are you most proud of, and what would you do differently next time?

• What I'm most proud of

What I'm most proud of in this project is implementing a skeleton loading state for the first time. A skeleton is a placeholder displayed while data is still being fetched, and it gives users clear visual feedback that the content is on its way, instead of showing an empty or frozen screen.

To me, this detail represents a step beyond simply making the application work: it shows care for the user experience. Seeing how a seemingly small feature improves the feeling of smoothness and the perceived performance of the app was very rewarding, and it's something I plan to carry into my future projects.

• What I would do different next time

Next time, I want to focus on responsiveness from the earliest stages of the project, rather than leaving it as the last thing I do. In this project, I left adapting the layout to different screen sizes for the end, which forced me to revisit and adjust several components that were already finished.

With Tailwind CSS and its mobile-first workflow, the best approach is to build each component with breakpoints in mind from the start, beginning with the mobile layout and scaling up to larger screens as development progresses. This way, I avoid rework, catch layout issues earlier, and make sure the experience works well on any device throughout the whole process, not just in the final result.

What challenges did you encounter, and how did you overcome them?

1. Creating the Glow Effect with Tailwind CSS

• Challenge: I struggled to figure out how to create a glow effect using Tailwind. I spent some time trying to understand how to do it without resorting to raw CSS.
• Solution: I talked to someone close to me who had more experience with Tailwind. They explained that I could think of the glow as a colored shadow. That shift in perspective led me to create a custom shadow token in the theme (shadow-grn) and apply it on the button's hover state.
• Takeaway: sometimes, looking at a problem from a new perspective is what makes the solution appear. I also learned that asking for help and exchanging ideas with others speeds up learning.

2. Organizing API Data Typing in TypeScript

• Challenge: since TypeScript requires more explicit typing, I wanted to create a type for the data returned by the API, but I wasn't sure where the best place to define it was.
• Solution: I decided to create a separate types file (Types.ts) that every component can access. This way, I don't have to repeat the typing in multiple places.
• Takeaway: centralizing types keeps the code more organized, consistent, and easier to maintain.

What specific areas of your project would you like help with?

Since this is my first project with Tailwind CSS and TypeScript, I'd appreciate feedback on the following areas:

• Componentization: did I use componentization in the best way possible? Are the components well divided, with clear responsibilities and a good level of reusability?
• Clean and concise code: is the code organized, readable, and easy to maintain? Is there anything that could be simplified or that feels repetitive?
• Tailwind CSS usage: am I making good use of Tailwind's utilities? Are there classes or practices I could adopt to make the code leaner?
• Tailwind Theme: this is the area where I'd most like opinions. As it was my first time using the theme, I may have missed values that could be centralized to simplify my code, such as colors, shadows, spacing, or fonts. Is there anything worth moving into the theme?
• Code standards and user experience: I want to keep striving for good code standards and a good user experience. If you notice anything that could be improved in these areas, I'd be very grateful for the suggestion.