Build a React Router V7 Countries App | ReactJS, RRV7, TailwindCSS, Typescript

Learn How to Build a React Router V7 Resume Ready App. In this tutorial, you'll create a fully responsive country explorer where you can filter and view detailed country data fetched directly from the REST Countries API. We cover everything from setting up dynamic routing and loaders to styling with Tailwind CSS—all while breaking down the fundamental features of React Router V7. Whether you're a beginner or looking to level up your skills, this video has you covered. Don't forget to like, subscribe, and hit the notification bell for more coding tutorials!

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Timestamps:
00:00 - 00:07 Introduction to Project
00:07 - 00:14 Overview of Features
00:14 - 00:20 Setting Up the Project
00:20 - 00:27 Installing React Router
01:23 - 01:29 Creating the App Folder
02:48 - 02:54 Understanding Folder Structure
04:05 - 04:10 Defining the Root Component
06:03 - 06:08 Creating Routes for Pages
09:19 - 09:26 Building the Navbar Component
12:05 - 12:13 Adding Tailwind CSS
16:14 - 16:20 Building the Home Component
24:05 - 24:11 Fetching Country Data
32:05 - 32:12 Displaying Country List
38:12 - 38:17 Adding Search Functionality
42:06 - 42:11 Handling No Results Found
51:31 - 51:38 Displaying Individual Country Data
55:00 - 55:08 Creating the About Page

#reactjs

[nomad]

Love this! Please MORE React Router v7 content!

[-not-found-service]

Thank you, these types of videos are very good, as is the tanstack query. etc, super light and entertaining, I hope you keep going, a hug.

[deanarvin]

Incredible. At this rate you're my go-to spot for React Router v7 education. Thank you, sir!

[prashlovessamosa]

Please create more on as a framework approach this thing v7 will save millions of SPAs

[huytran-ewgg]

awesome, just what I need, you save me again !!

[atharvdange]

Thank you sooo much for this tut mannn. really appreciate it! ❤❤

[MarekLi]

Please add more advanced react router v7 videos. There are plenty of NextJS but little rrv7.

[jacquitratongamanahaja]

Thank you so much for the effort you put into making these amazing video, they are so helpfull.

[KyawAung-hv]

Thank you so much sir. You are a live saver

[dharamavarambhargavi]

Superb and It is very helpful and add more videos on React Router v7 (Framework) and pls do the videos on the React version 19 new features

[bangunny]

Hey Pedro, good stuff. Anyway have you tried migrate to tailwind v4 ? If so would you make a quick guide

[nazgul]

Hello Pedro! Like your YouTube channel!

I just repeated everything you did in the video and it worked out for me and I should point out that you have a gift for presenting information simply and clearly. ❤🌼

[waydevstacksz]

Like ! Nota 10! poderia fazer um portfolio com paginação!

[Deus-lo-Vuilt]

Buen proyecto, me gustan tus videos, sigue asi

[mrinalg]

Great work 👌🏻
Please make more on framer motion, gsap and Fullstack projects

[mattieandkd]

Thanks for this. Hope a full stack example is next .

[HuckerDuck]

Good video, just wished you explained more of the TailwindCSS instead of just copy and paste..

[RockyBlad]

Thanks a bunch bro, would really love a mern stack tutorial

[abhishekc]

Hey, when's the beginner course coming out?

[hungviet]

Can you guide me how to navigate outside 1 component? i want to use navigate in zustand. Thanks