Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)

You'll also learn React Best Practices, the creation of modern user interfaces using Tailwind CSS and most importantly, you'll learn how to fetch data from Google Search API using RapidAPI.

✅ A special YOUTUBE discount code is automatically applied!

📚 Materials/References:

❤️ Support JavaScript Mastery & Suggest Future Videos:

🌎 Find Me Here:

💼 Business Inquiries:

Timestamps 👇
00:00 Intro & Setup
00:11:20 Design & Functionality
00:55:42 Image section
01:12:29 Video section
01:16:34 Navbar
01:22:33 Search
01:34:03 Deployment

[amrmostafa]

Thanks sir for the great content !!
and to whoever watching this after react router v6 is released note that in react router v.6, the route path has to be a string and you can't just path an array of routes .. so one way to solve this is that you make an array of routes and then map through them to render the Results components..

[mathewdavies]

Note: at 31: 15, the 'Switch' Component has been replaced by 'Routes' in in React Router Dom V6.

If using version 6 this will also mean there is a clash between the Routes component you have made, and the Routes component in React Dom. This means that you have to rename your Routes component. This includes the file name, the function name and the component reference in App.js, along with the import statement in App js.

[waifufx]

Sir, your courses are even premium, thank you for giving quality content

[tuyikundejeanpaul]

I don't know if I am the only one who like these videos even before I start writing codes! because Bro you are amazing. Keep up the good work.

[je]

Javascript Mastery is a beast !
Im trying to get a job and have been following your videos, learning JS along the way. I hope to achieve my goal before next year.
I PROMISE TO SEND YOU $1000 when I am successful or donate same amount to any charity of your choice.
Thank you for everything you do.

[manzimsoumik]

after material-ui this tailwind css gotta be the best library for react. come one people, hit likes. I want another tailwind CSS video...

this was too good brother. Rapid-API, tailwind all in one piece. thanks a lot

[souvikbasak]

note: at 31:15 the approach directly renders a Redirect component and switch component, which is no longer available in React Router v6+. So instead of using switch you can use Route and for redirect you can use Navigate.
Here use the below approach


import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Result from './Result';

const AppRoutes = () => {
return (
<div className='p-4'>
<Routes>
<Route path="/" element={<Navigate to="/search" replace />} />
<Route path="/search" element={<Result />} />
<Route path="/images" element={<Result />} />
<Route path="/videos" element={<Result />} />
<Route path="/news" element={<Result />} />
<Route path="/shopping" element={<Result />} />
</Routes>
</div>
);
};

export default AppRoutes;
Hope it helps...

[sthefanocarvalho]

You are awesome!
Thank you for the amazing content, as usual :D

Tailwind is great! I would love to see more videos using it.

[crescentmoon]

Thank you so much!! I was looking for more Tailwind + React content on YouTube! This is gonna be great for building my portfolio 🙏🏾

[Adnn.be]

Thanks for the content, If u guys get an error while typing npm start, simply replace 'postcss' in craco.config file to : 'postcssOptions'

[thembamshazy]

No way I just found your channel while still on the journey to learn web development what usefully Content, learning from you is the best choice ever

[naomilago]

wow, I just found out your channel and there's a while I don't deal with react and I've never used tailwind - but woah, seeing this amazing design and this high quality master-class... I got a new work to do 🙂❤️

[mattoattacko]

Excited to get started with this new project. Thanks for the quality content, as usual😇 Great VS extension pack as well!

[arunalagusunthram]

Waiting for your paid course, even for the free content you are doing such an amazing job, I am more than thrilled to be seeing your paid course

[wwe]

I don't know how to express my thanks and appreciation for your great content. you're an amazing teacher, developer, and the best I have ever seen .... Lots of love to you

[kekerslayer]

I really love the way you tech, I have been your student for almost 2 years now and I learned a lot. Thank you so much🥰
from the Philippines❤

[bharatpaliwal]

More Tailwind CSS projects, More such clone projects, these are awesome, Great Work 👍👍👍

[robertmacharia]

I know this is a 2hr vedio but it will take at least 2 wks to finish with a lot of back n forth!! Getting started!

[ranjankumarmandal]

And again with a masterpiece project idea. Thanks 'Javascript Mastery'. Amazing. Thank you very much....

[decentrob]

You should do more tailwind videos :-) Something I also would like to see is your MERN series but with MySQL instead. Great video man!