Duration: 53:42

2,749 views

95

Want to build smart web applications that stand out?

This tutorial is for you!

In this tutorial I'll go through the fundamentals of Next.js, Tailwind CSS and Hugging Face's vast library of pre-trained models. We'll cover everything from building the front end of the application to creating a RESTful API using Next.js and seamlessly integrating Hugging Face's Inference endpoints to carry out specific AI tasks. After this tutorial you will be able to build your own web application end-to-end, that runs in the cloud and uses one or many of the 500,000+ models that Hugging Face offers.

In this video, you'll learn:
1. Fundamentals of Next.js for fast and modern React applications
2. Tapping into the massive library of Hugging Face models for natural language processing
3. Styling your projects with the efficient Tailwind CSS, and Tailwind animations

Video Chapters
00:00 Introduction
00:49 Initialize Next.js and Tailwind CSS
02:12 Building a Responsive Header for different page sizes
03:38 How to style a Textbox
05:39 How to dynamically increase Textbox height
11:34 How to send debounced API calls
16:10 How to build a REST API with Next.js
19:15 How to interact with Hugging Face from a Node server
28:49 Filtering the JSON response from AI
35:05 Displaying the response as Tags
38:52 Adding Emoji to each emotion
42:07 Setting the page background color
44:44 How to add fade in/out animation using Tailwind CSS
50:34 Adding loader/spinner to show loading state

Get the code for this tutorial: https://github.com/KoushikJit/paint-my-mood

Links mentioned
Hugging Face Inference Endpoints: https://huggingface.co/docs/huggingface.js/inference/README
React Loader Spinner: https://mhnpd.github.io/react-loader-spinner/docs/category/components/

Happy coding!