FIFA 2022 Standings using Nextjs 13 and Tailwind CSS

In this video we will learn how to use #nextjs with #tailwindcss to build the #fifa 2022 #worldcup2022 standings by consuming the #api
Complete app: fifa-2022-standings.vercel.app/
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: kzbin.info...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
Repo link: github.com/trulymittal/fifa-2...
FIFA API (Github): github.com/raminmr/free-api-w...
All credit goes to this repo on Github for proving FREE API data.
0:00 Introduction
0:58 FIFA World Cup API
1:23 Creating a Next.js app
2:06 Setup Tailwind CSS
5:23 Navigation bar in layout.jsx
8:38 Date using LUXON
10:08 Standings page
12:13 Getting JWT for the API
15:28 .env File
15:54 Calling the API
17:26 Revalidation of the data
18:57 Creating the UI using Tailwind CSS
19:44 Co-location components
19:11 Image from next/image
33:22 Sorting the teams by points (using loadash)
======================
✔ Other useful Playlists
======================
#RestAPI (#NodeJS and MongoDB): • REST API using NodeJS ...
#API Authentication using #JWT: • NodeJS API Authenticat...
#Firebase: • Firebase | Build a Not...
Docker: • Docker
MongoDB: • Learn MongoDB in 50 mi...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#yoursTRULY #tutorial #howto #nodejs #android

[@tadakuniyasuda8214]

This is the reason I am glad to pay internet bills every month. This is a hidden gem that deserves way more attentions, but I am kind of glad to find it. THANK YOU. This work is amazing, and it was fun coding along. I practiced Next.js, async, react, map function, and learnt lodash, tailwind and some others like the time displaying package i forgot the name of. Now i am watching more of your videos

[@mafiacodes]

Thank you, I am glad you like the content.

[@vijaykr5492]

Next video NextJS & typescript 🙏

[@saro976]

I figure the issue and every thing is good now. I really appreciate your efforts in making this tutorial.

[@mafiacodes]

Subscribe like share 👍

[@devs_nazmul]

please make next.js 13 full tutorial, we are willing to purchase. you are really great . we love how you explained.❤

[@kimbapslayer1995]

Make the columns flex col on < sm or grid-cols-1 on sm. Also had some x-padding on sm ! :)

[@mafiacodes]

Yeah much more can be done but I needed to get it done in 30mins , all of it 😅

[@patite3103]

Could you do a video showing how to implement this project with T3 stack? thank you

[@mafiacodes]

I would surely start with a t3 stack

[@saro976]

I finish the project on 29th, and when I start it again today, it tells me that I have no authorization to get the data. This happen with me also on 27th and I made a new registration with a different email, in order to get a new token. what's the issue here

[@SaiKumar-tg6ct]

Please make a video on CD/CD

[@ramsem5151]

🫶 make more this type of real-world live project, Subscribed 👍

[@mafiacodes]

Thanks a ton