Intermediate React.js FULL COURSE 2022 with NextJS - Tailwind CSS - Typescript - react-query
#nextjs #tailwind #react
Build a Movie App!
Starter files and finished project:
https://github.com/weibenfalk/react-r...
Here is a new video on how to refactor this App to use NextJS 13 instead:
• NextJS 13 - Refactor a complete App t...
This is a special 2022 version of one of my most popular courses. As this is more fast paced than the earlier versions it’s more of an intermediate to advanced ReactJS course. It’s not as thorough on the basics of Javascript and React JS. That’s why it’s more suitable for people that
Already know a bit React and want to get started with Next JS.
The earlier versions use Styled Components and regular CSS but this version uses Tailwind CSS.It also fetches data client side with react-query and server side with getStaticProps and getStaticPaths. The data is fetched from The Movie DB Api.
The tech stack is:
NextJS
Typescript
React-Query
Tailwind CSS
The movie DB
Chapters:
00:00:00 - Introduction
00:01:04 - What we’re building
00:02:22 - The Movie DB - API Key and more
00:03:57 - Setup NextJS
00:10:49 - Setup TailwindCSS
00:22:32 - Setup react-query (tanstack-query)
00:25:43 - Header Component
00:39:03 - Scaffold Home Page
00:43:09 - Basic fetch function
00:47:56 - API Route for movies
00:57:13 - Client side fetch with react-query
01:08:29 - SearchInput Component
01:27:01 - Hero Component
01:39:04 - Grid Component
01:47:35 - Thumb and Card Components01:57:30 - Spinner Component
01:59:35 - Infinite scroll
02:04:27 - Scaffold Movie Page
02:16:25 - getStaticProps and getStaticPaths02:27:11 - Breadcrumb Component
02:31:34 - MovieInfo and Pill Components02:56:14 - Grid Component for Movie Page02:59:27 - Error and 404
03:03:54 - Deploy to Vercel
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀
Check out my premium courses at https://www.weibenfalk.com
—
Find me somewhere below:
Linkedin: / thomas-weibenfalk-76356611
Twitter: / weibenfalk
Github: https://github.com/weibenfalk
FreeCodeCamp: https://www.freecodecamp.org/news/aut...
Dev.to: https://dev.to/weibenfalk
Watch video Intermediate React.js FULL COURSE 2022 with NextJS - Tailwind CSS - Typescript - react-query online without registration, duration hours minute second in high quality. This video was added by user Weibenfalk 11 August 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,217 once and liked it 301 people.