Blog Preview Card using React, Next.js, and tailwindcss

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

I got a bit stuck on this one for a while due to the fact that the website that I created to host these little components and website designs a few years back when Node 18.x was LTS. I couldn't for the life of me get the tailwind class names to work once I had deployed the code to Vercel. Locally they worked perfectly, but in Vercel nothing worked. I didn't realize that Vercel has a project setting that's auto set when you create the project which had set Node to 18.x. After a few hours of trying different things I found that setting and once it matched what I was using with pnpm locally, 22.x, everything worked perfectly.

I think next time I'll be sure to check that setting very soon now that I know it exists! :-)

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

The biggest challenge was also what I mentioned previously in the "What are you most proud of?" section.

I overcame it by lots of experimentation and reading online. I tried LLMs to help as well but they didn't come close to figuring it out.

After I figured out that setting exists I wrote a little TypeScript prebuild script to check the version of both pnpm and nodejs to see if they match the versions that I have specified in both .tool-versions and package.json for the repo. If they don't match the versions a dev would be running locally then the build in Vercel will fail and give a helpful error message so that this never happens again!

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

I'd like some help looking at the use of any semantic HTML elements within the card like <h1> tags, etc. I'm not 100% sure how to deal with that since there is no guarantee how this component would be used within another site's semantic structure.

Maybe potentially passing the heading level via a prop would work? I'd love to get some feedback on how to do this effectively or hear about any ideas at all related to the semantic structure of the component.