Full Project-based Tutorial - React + Next.js [FREE]✨

#tutorial #react #javascript #webdev

If you want to learn to code by building real-life projects, this tutorial is for you. Together, we will build a complete application (World Ranks) using React and Next.js.

LIVE APP: https://world-ranks.vercel.app/

📖 You will learn:

Data sorting, filtering
Responsive Layout without any CSS framework
Dark/Light Mode
Server-side rendering
Deploying with Vercel

🍜 Resources:

Design: https://bit.ly/3l1aH3D
Resources: https://bit.ly/36p79SX
API: https://restcountries.eu/
Source Code: https://github.com/nghiemthu/world-ranks

✨ You can find the tutorial here:

🔖 Tutorial Structure

[00:00] - Introduction
[1:37] - Setting up Next.js project
[6:00] - Build Layout Component
[10:25] - getStaticProps
[12:30] - Build Input Component
[18:40] - Build Country Table Component
[27:10] - Sort Countries by state (value and direction)
[38:47] - Filter Countries by Name, Region and Subregion
[41:46] - Dymanic Route in Next.js
[43:47] - getServerSideProps (Server Side Rendering)
[45:43] - Styling Country Page
[1:11:52] - Build Responsive Layouts
[1:29:51] - Build Dark/Light Theme Switcher
[1:36:42] - Create new Github repo and deploy to Vercel
[1:39:15] - getServerSideProps and getStaticProps/getStaticPaths
[1:43:01] - Happy Coding!