Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Next JS - Shadcn UI with Typescript - Next.JS Course - 2025
Rating: 4.7 out of 5(19 ratings)
1,249 students

Next JS - Shadcn UI with Typescript - Next.JS Course - 2025

Next JS with ShadCN UI - Next JS Typescript with Next JS Routing Next JS Routing, Next JS Layout
Created byMatthew Msingathi Hlazo
Last updated 1/2025
English

What you'll learn

  • Learn Next JS Fundamentals for employment
  • Design Patterns and highly scalable code
  • Understand and Master Shadcn UI
  • Learn to think and plan react projects and avoid common pitfalls

Course content

1 section • 11 lectures • 8h 38m total length

  • Course Project Demonstration2:04

    This is a short demonstration of the the Project that we we will create in this course using coding best practices

  • App UI Design with FIGMA56:36

    This is a quick FIGMA project crash course to help you understand FIMGA as a Frontend Developer as it is now the standard of the industry and you have to have Figma Basics.

  • Next JS Project Setup21:54
  • Creating a Menu Item Component52:56
  • Rendering Menu Group7:57

    Tips and tricks on how to render a group of JSX Elements from an array of object.

  • Tailwind Class Collision31:19

    How to effectively manage conflicting Tailwing classes on Shadcn

  • Left Pane Component42:10

    Learn the art and science of left navigation in Next JS using Next Link Component.

  • Dynamic Routing27:44

    Learn an efficient and effective way to handle dynamic routes in Next Js

  • Api Call9:46

    Learn React data fetching using UseEffect hook and master async await and API Calls

  • ShadCN Image Slider1:24:39

    Learn how to create an awesome image slider with Shadcn and how to customize and create a vertical one

  • Data Table3:01:49

    Advance React Table with Tanstack Table using Shadcn

Requirements

  • Basic Web Tech and React fundamentals

Description

Welcome to the first-of-its-kind course that seamlessly by Matthew Msingathi the Designer and Developer from South Africa. This course combines essential skills in app design and development. This comprehensive program equips you with expertise in Figma for UI/UX design and React with Next.js for robust web application development.

In this course, you will delve into a powerful tech stack including React.js with Next.js, TypeScript, ShadCN UI, Tanstack Table, and Tailwind CSS. You will learn to write clean, scalable code adhering to best programming practices.

Our curriculum introduces you to core Next.js concepts such as file-based routing, dynamic routing, and conditional rendering from query parameters. Additionally, you'll master the implementation of Tanstack Table, the most advanced table library in the industry today.

With a focus on both design and development, you’ll start by crafting intuitive, visually appealing interfaces in Figma, then bring them to life with React and Next.js. Throughout the course, you will gain practical skills to create high-performance web applications.

Join us to become proficient in modern web development and design, and set yourself apart in the competitive tech landscape. Whether you're a beginner or looking to enhance your skills, this course offers the tools and knowledge to succeed.

Who this course is for:

  • This course is for students who want to learn Practical production grade React skills, students who want to learn react for employment and understand Design Patterns

Report abuse