The shadcn/ui way

Understanding the core principles of shadcn/ui and how it fits into your toolbox.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

Lesson Transcript

  • [00:00 - 00:09] In this lesson you will learn about the course project. You are going to build two projects in the course, a new site, and an event management application.

  • [00:10 - 00:23] Both applications will be accessible responsive and well-stied, and you can showcase them in your portfolio. You will use next.js, Tailwind CSS, and Lucida Dev, along with the chat scene UI, of course, to build applications.

  • [00:24 - 00:32] The new site will be a simple news browsing outlet, where users can read articles. Articles will be fetched from the newsapi.org site.

  • [00:33 - 00:54] The site features RDM page, which is a list of articles with a search bar, with a category filter, an article sheet, which is the chat scene UI sheet component rendering an article, and the filters where the user can filter articles by category. The event management application will be an app where users can create, edit, delete, and view events.

  • [00:55 - 00:59] They can also register for them. A pre-made API will be used to manage events.

  • [01:00 - 01:09] The application features are authentication. Users can register on the site and login, a dashboard that will allow users to create, edit, and delete events.

  • [01:10 - 01:28] And a user events table, or user can access their events through a table that allows pagination, sorting and filtering, and on page, which is agreed with current events that allow searching, like a timeline, you can see it here. And join event feature, users can register for other users' events.

  • [00:00 - 00:09] In this lesson you will learn about the course project. You are going to build two projects in the course, a new site, and an event management application.

    [00:10 - 00:23] Both applications will be accessible responsive and well-stied, and you can showcase them in your portfolio. You will use next.js, Tailwind CSS, and Lucida Dev, along with the chat scene UI, of course, to build applications.

    [00:24 - 00:32] The new site will be a simple news browsing outlet, where users can read articles. Articles will be fetched from the newsapi.org site.

    [00:33 - 00:54] The site features RDM page, which is a list of articles with a search bar, with a category filter, an article sheet, which is the chat scene UI sheet component rendering an article, and the filters where the user can filter articles by category. The event management application will be an app where users can create, edit, delete, and view events.

    [00:55 - 00:59] They can also register for them. A pre-made API will be used to manage events.

    [01:00 - 01:09] The application features are authentication. Users can register on the site and login, a dashboard that will allow users to create, edit, and delete events.

    [01:10 - 01:28] And a user events table, or user can access their events through a table that allows pagination, sorting and filtering, and on page, which is agreed with current events that allow searching, like a timeline, you can see it here. And join event feature, users can register for other users' events.