All solutions

This is my solution for the Product Preview Card Component using React. It was fairly straightforward for the most part as I have learned quite a bit from my previous solutions, happy to hear feedback if any!

This is my solution made using React+Typescript+Vite with the help of Tailwind for styling, as I figured it would be a much more interesting challenge than purely only using HTML/CSS. This would be my 2nd time using React, Typescript and Tailwind, and my first time using Vite to quickly build this project for me, and Vercel to host my projects.

Challenges I faced during this project

• While figuring out how to dynamically populate the content based on the provided JSON was simple enough, I was pretty much somewhat inexperienced with some of the intricacies relating to Typescript and having to specify every single type being used from the JSON, so I had to quickly figure out why it was blasting errors at me.
• The biggest problem I came across was having to deal with Tailwind. I'm still very shaky about making responsive design for mobile, as I had to undo my mindset of designing for desktop sized screens first, when I needed to do it the other way around to firstly target mobile sized devices then moving on to the next breakpoint.
• I also had a few problems figuring out how to use Tailwind's grid columns and how to make them stack vertically, but after reading through documentation, it was easy to figure out that they also include flex columns as an option.
• I was most unsure of how to put the content vertically centered on the screen, and had to resort to just setting an arbitrary margin my-44 just to make it somewhat centered on the screen. Would love to see if someone could tell me how to do such a thing in Tailwind!

I think I'm pretty confident with my React code as it was extremely simple and barebones, but I'm open to feedback, of course. I'm a bit less confident about my Tailwind code and I was wondering how I could do better on that regard.

• Maybe I should've used bootstrap for this? I just rawdogged it with no libraries...
• Trying to make the container mobile-friendly and responsive is really difficult without any help from libraries. On mobile, it doesn't neatly fit it all on a single screen, you have to scroll down a little. How could I have done it better?
• I'm wondering if my CSS code is a little messy, I am mostly self-taught and I'm unsure of what is considered best practice when it comes to that.