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

Build a User Profile Page with React and NextUI

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 NextUI. 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 NextUI

avatar
Vu NguyenSoftware Engineer, NAB

This comprehensive tutorial guides you through creating a modern, interactive flight booking page using React and NextUI. 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.