From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Create the ProjectCard component

Create the ProjectCard component

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Create the ProjectCard component

“

Welcome to this session! Our goal is to build a reusable project card component for your portfolio. This component will display project details, such as the title, description, type and image, all while looking great in both light and dark modes. We'll use Tailwind CSS for styling, making it efficient and visually appealing. Moving to ProjectCard.jsx. Now you will see that I've added a prop called Project to receive the project data. This allows us to access individual project details within the Project Card component. We're using destructuring for clean syntax. Let's render the project title. Moving to index.jsx, I am replacing the placeholder div elements in the Projects section with our newly created ProjectCard component. Each project from the Projects array will now be rendered as a separate ProjectCard. Notice that I am passing the project data to the component using the project prop. to ProjectCard.jsx. Here I am adding basic styling to the ProjectCard's div. These Tailwind…

Contents