Building a React Card Component with TypeScript

In this video, we’ll take a Figma card component from design to code with React and Typescript!
🔗 Key Links 🔗
- Github: github.com/coding-in-public/c...
- Demo: codinginpublic.dev/projects/c...
---------------------------------------
📹 Related Videos 📹
- Figma Card: • How to Create a Card C...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:07 Figma Walkthrough
2:31 Code Setup
5:28 Badge Component
10:26 Style CSS
16:17 Badge CSS
18:24 Button Component
24:41 Button CSS
32:29 Card Component
44:04 Card CSS
48:04 Customizing Cards
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: Monokai Pro
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...

[@CodinginPublic]

at 29:50 … I don’t know what I was thinking with the toLowercase function. 🤦‍♂I should have just updated the interface like this: type: 'primary' | 'secondary';

[@anonymouseverx]

This tiny card component is one of the best things in your channel. Very educational. Thank you so much, Chris.

[@CodinginPublic]

Awesome! So glad you enjoyed it! It was a lot of fun to put together!

[@lvekua]

I know nothing about React or TS, but your videos explain and cover more learning material than those weird crash courses here on YT. Thank you Chris! 🙌

[@CodinginPublic]

Lol … glad you enjoyed it!

[@kdot78]

Keep going bro 👍

[@CodinginPublic]

🙏 thanks!

[@viniciusm.m.7822]

Thanks, man!!

[@CodinginPublic]

You’re welcome!

[@pavankumarkr5667]

I Love your videos 🤩

[@CodinginPublic]

🙌 Thanks for your kind words!

[@ogbillity]

Reusable components 101. Thank you.

[@CodinginPublic]

you're welcome!

[@mahdisalmanizadegan5595]

Man i just came across your channel recently and all i can say is that you are awesome, do you have any Figma designing crash course like this one, or do you know any good course ?

[@CodinginPublic]

Glad you’ve enjoyed the channel! I’ve done a few videos on Figma. A few weeks back I designed this card in Figma. I’ve also done a full Figma for Developers video that's essentially a walkthrough of figma. kzbin.info/www/bejne/aJ3Mi2arq7RsmNU

[@mahdisalmanizadegan5595]

@@CodinginPublic That's amazing, I going to watch the video, thank you bro.

[@krascheninnikoviam]

Amazing video!!! what is the program you use for the Google fonts links? is it a plugin in VS?

[@CodinginPublic]

Glad you enjoyed it! It’s called Raycast. It’s a spotlight-like replacement for macOS :)

[@ogbillity]

Thank you so much. This tutorial helped me create reusable banners in NextJS but I have a huge problem with the button. How do I add the NextJS Link tag to use the href prop in the button?

[@ogbillity]

Found the answer. I wrapped the button tag with NextJS link tag and passed passhref prop to it.

[@CodinginPublic]

Awesome!

[@ogbillity]

What VSCode theme are you using?

[@CodinginPublic]

I think I was using Monokai Pro in this video.