Introduction

An introduction to the course

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:06] Hello and welcome to Building Slic Web Applications with Shatsy and UI. I'm Ayal and I will be your instructor for this course.

  • [00:07 - 00:18] This course is ideal for both experienced and junior font and developers. It's particularly relevant for those looking to enhance the font and toolkit with the latest libraries and technologies.

  • [00:19 - 00:37] You will learn how to effectively use Shatsy and UI, a modern UI components collection, in order to build sleek and accessible web applications. By the end of this course, you will have a deep understanding of how to use, compose and customize Shatsy and UI components in your own application and even how to contribute to the library itself.

  • [00:38 - 00:46] The course includes a bit of theory and a lot of practical exercises and you will add two new projects to your portfolio. What you'll learn?

  • [00:47 - 01:06] The course covers the fundamentals of Shatsy and UI, using customizing and them ing Shatsy and UI, building powerful forms and tables, composing new components and contributing to Shatsy and UI. This new knowledge will be applied to build two real world applications, a new site and an event management applications.

  • [01:07 - 01:20] Both applications will be accessible, responsible and well-styled and can be showcased in depth or portfolio. You'll use next GS, Tailwind CSS and Lucida Dev along with Shatsy and UI to build applications.

  • [01:21 - 01:35] What you won't learn? Topics that are relevant but not specific for Shatsy and UI, like React State Management or Best Practices or DunexJSapp Auto, will not be covered but will be subtly integrated into the examples.

  • [01:36 - 01:41] The learning modules will be focused on Shatsy and UI. So what is Shatsy and UI?

  • [01:42 - 01:58] Shatsy and UI is a collection of components for React, blending Tailwind and Ready, with a built-in modern design, along with a powerful developer experience. It was first released in 2023 by Shatsy and UI is very popular with fondant developers recently.

  • [01:59 - 02:09] It won the 2023 JavaScript Rising Stars award, being the most popular project overall. The GitHub repository has almost 50,000 stars as of speaking.

  • [02:10 - 02:23] Shatsy and UI meets the needs of today's modern web applications effectively. It answers the importance of design quality, accessibility, easy customization and the modularity required in user-friendly applications.

  • [02:24 - 02:37] The skill of using Shatsy and UI is a great addition to the front-end developers toolkit, and it's a great skill to have in your portfolio. Developers often have multiple frustrations when working with UI libraries.

  • [02:38 - 02:44] Shatsy and UI was developed in response to these common pain points. The first is lack of flexibility.

  • [02:45 - 02:56] Many UI libraries are rigid, offering little to no room for customization. Developers find themselves constrained by the design functionality limitations of these libraries, complex customization processes.

  • [02:57 - 03:17] Adjusting the look and feel of components can be an readiness task, requiring extensive overrides or convoluted configurations, making the development process inefficient in cumbersome, and the third absence of ownership. The use of certain UI libraries can lead to a disconnect between the developers and the reward.

  • [03:18 - 03:47] They have a reliance on pre-built components, often limits the opportunity for creativity and personalization in design and functionality. That's why Shatsy and UI stands out. It embraces a modular and lean approach to component-based UI development, giving greater control and ownership over the code, allowing customization of our components look, feel and coded. By design, Shatsy and UI components are accessible, animated, have beautiful styles, fully responsive and customizable.

  • [03:48 - 03:59] With React and XGS being the most popular font and frameworks today, Shatsy and UI is a great fit for building modern-er applications. It's a great choice as a building block for modern applications.

  • [04:00 - 04:28] The following scenarios are when Shatsy and UI provide the most value, building a new web application from scratch, adding new components to an existing application, creating a company-wide design system, and replacing an existing UI library. The prerequisite for the course are Basic HTML, CSS and JavaScript, which are a must. The most will be gotten after this course if there is at least a basic experience in React, and especially with its fundamentals, books, components, state and props.

  • [04:29 - 04:48] While not mandatory, experience with Next.js will be useful as well, as the course includes a project using Shatsy and UI Next.js templates, and a working Node.js environment on the machine, and TypeScript knowledge, which is a plus. If you are not comfortable working with React, you could look at the new line full-stock React course, the reasoning below.

  • [04:49 - 04:52] In the next lesson, you will learn about the course and what's in the agenda.

Hello and welcome to Building Slic Web Applications with Shatsy and UI. I'm Ayal and I will be your instructor for this course. This course is ideal for both experienced and junior font and developers. It's particularly relevant for those looking to enhance the font and toolkit with the latest libraries and technologies. You will learn how to effectively use Shatsy and UI, a modern UI components collection, in order to build sleek and accessible web applications. By the end of this course, you will have a deep understanding of how to use, compose and customize Shatsy and UI components in your own application and even how to contribute to the library itself. The course includes a bit of theory and a lot of practical exercises and you will add two new projects to your portfolio. What you'll learn? The course covers the fundamentals of Shatsy and UI, using customizing and them ing Shatsy and UI, building powerful forms and tables, composing new components and contributing to Shatsy and UI. This new knowledge will be applied to build two real world applications, a new site and an event management applications. Both applications will be accessible, responsible and well-styled and can be showcased in depth or portfolio. You'll use next GS, Tailwind CSS and Lucida Dev along with Shatsy and UI to build applications. What you won't learn? Topics that are relevant but not specific for Shatsy and UI, like React State Management or Best Practices or DunexJSapp Auto, will not be covered but will be subtly integrated into the examples. The learning modules will be focused on Shatsy and UI. So what is Shatsy and UI? Shatsy and UI is a collection of components for React, blending Tailwind and Ready, with a built-in modern design, along with a powerful developer experience. It was first released in 2023 by Shatsy and UI is very popular with fondant developers recently. It won the 2023 JavaScript Rising Stars award, being the most popular project overall. The GitHub repository has almost 50,000 stars as of speaking. Shatsy and UI meets the needs of today's modern web applications effectively. It answers the importance of design quality, accessibility, easy customization and the modularity required in user-friendly applications. The skill of using Shatsy and UI is a great addition to the front-end developers toolkit, and it's a great skill to have in your portfolio. Developers often have multiple frustrations when working with UI libraries. Shatsy and UI was developed in response to these common pain points. The first is lack of flexibility. Many UI libraries are rigid, offering little to no room for customization. Developers find themselves constrained by the design functionality limitations of these libraries, complex customization processes. Adjusting the look and feel of components can be an readiness task, requiring extensive overrides or convoluted configurations, making the development process inefficient in cumbersome, and the third absence of ownership. The use of certain UI libraries can lead to a disconnect between the developers and the reward. They have a reliance on pre-built components, often limits the opportunity for creativity and personalization in design and functionality. That's why Shatsy and UI stands out. It embraces a modular and lean approach to component-based UI development, giving greater control and ownership over the code, allowing customization of our components look, feel and coded. By design, Shatsy and UI components are accessible, animated, have beautiful styles, fully responsive and customizable. With React and XGS being the most popular font and frameworks today, Shatsy and UI is a great fit for building modern-er applications. It's a great choice as a building block for modern applications. The following scenarios are when Shatsy and UI provide the most value, building a new web application from scratch, adding new components to an existing application, creating a company-wide design system, and replacing an existing UI library. The prerequisite for the course are Basic HTML, CSS and JavaScript, which are a must. The most will be gotten after this course if there is at least a basic experience in React, and especially with its fundamentals, books, components, state and props. While not mandatory, experience with Next.js will be useful as well, as the course includes a project using Shatsy and UI Next.js templates, and a working Node.js environment on the machine, and TypeScript knowledge, which is a plus. If you are not comfortable working with React, you could look at the new line full-stock React course, the reasoning below. In the next lesson, you will learn about the course and what's in the agenda.