Not another boring tutorialReady for somethingdifferent

  • Interactive Previews

    Learn Visually. Our live previews offer a clear and intuitive way to understand coding concepts. See how your code affects the output, making learning more engaging and effective.

  • Clear Code Walkthrough

    Follow along with our step-by-step guides and clear explanations. We break down complex concepts into simple steps, making it easy for you to understand and apply them.

  • Storybook and source code included

    Dive deeper into the code with Storybook and access the full source code of each tutorial. Understand how components are built and interact with each other, and use the source code as a reference for your own projects.

Live Preview

Understading Typescript Generics

avatar
Vu NguyenSoftware Engineer, NAB

Generics is a core feature in statically-typed languages like TypeScript, enabling developers to define components, functions, or structures that can accept and enforce types passed during use. This enhances flexibility, promotes reusability, and reduces code duplication.

1

What are generics in TypeScript?

2

Making Your Code Flexible with Generics

3

Generic Parameter Defaults

4

Generic Constraints

5

Conditional types with generics

6

Closing thoughts

class MyStorage<T> {
private items: T[] = [];
addItem(item: T): void {
this.items.push(item);
}
getAllItems(): T[] {
return this.items;
}
}
// Usage
const stringStorage = new MyStorage<string>();
stringStorage.addItem("Hello");
stringStorage.addItem("World");
const numberStorage = new MyStorage<number>();
numberStorage.addItem(42);
numberStorage.addItem(100);
View Tutorial

Build a User Profile Page with React, Tailwind and HeroUI

avatar
Vu NguyenSoftware Engineer, NAB

This in-depth tutorial guides you through the process of creating a modern, interactive user profile page using React and HeroUI. You'll learn how to construct reusable components for showcasing user information, implementing a feature photo carousel, and displaying user posts and photos. By the end of this tutorial, you'll have a fully functional profile page that demonstrates best practices in React development and UI design.

1

Setup and initialize a new React project

2

Building the FeaturePhotos component

3

Designing the Profile Information Section

4

Creating the Profile Stats Section

5

Implementing the Profile Post Timeline

6

Implementing the Profile Photo Timeline

7

Implementing the Profile Timeline Tabs

8

Putting it All Together

Live Preview
Loading preview...
View Tutorial

Build a Flight Booking UI with React, Tailwind and HeroUI

avatar
Vu NguyenSoftware Engineer, NAB

This comprehensive tutorial guides you through creating a modern, interactive flight booking page using React and HeroUI. You'll learn how to build reusable components for displaying flight information, implementing advanced filtering and sorting functionalities, and creating a responsive user interface. By the end of this tutorial, you'll have a fully functional flight booking page that showcases best practices in React development and UI/UX design.

1

Setup and initialize a new React project

2

Building Flight Header Component

3

Building Flight Card Component

4

Building Flight List Component

5

Building Flight Filter Form Component

6

Building Flight Filter Drawer Component

7

Building Flight Sort Menu Component

8

Building Flight Preferences Component

9

Putting It All together

Live Preview
Loading preview...
View Tutorial
avatar

Follow Upskills.dev

Stay updated with our latest tutorials and coding tips.

We respect your privacy. Unsubscribe at any time.