Build Next Js 13 Business Listing App : NextJs, React, Tailwind Css, Google Place API, Typescript,

🔥 What You'll Learn:

Integrating React components to create a seamless user interface.
Styling your app with the modern and sleek Tailwind CSS framework.
Harnessing the power of the Google Places API to fetch business data.
Implementing dynamic routing for business details and search results.
Building a user-friendly search feature with real-time results.
Creating a submission form for users to add new business listings.
Securing your app with authentication and authorization.
🚀 Whether you're a beginner or an experienced developer, this tutorial will provide you with valuable insights and hands-on experience in building a feature-rich web application using cutting-edge technologies.

📚 Prerequisites:

Basic knowledge of JavaScript and React will be helpful.
Familiarity with TypeScript is a plus but not mandatory.
A code editor like Visual Studio Code installed on your system.
👨‍💻 Follow along with our easy-to-understand code examples and explanations to create your own Business Listing App from scratch. By the end of this tutorial, you'll have the skills and confidence to tackle similar web development projects and bring your ideas to life.

🔗 Stay connected with us:

#Nextjs #React #TailwindCSS #GooglePlacesAPI #TypeScript #WebDevelopment #BusinessListingApp #tutorial

Join this channel to get access to perks:

00:00:00 Introduction
00:04:36 Create NextJs 13 App
00:07:55 Run App and Project Folder Explained
00:12:20 Header
00:21:06 Use Custom Font
00:23:09 Hero Section (Search Bar, Category List)
00:46:17 Create Google Place API Key
00:52:44 Create Google Place NextJs API
00:58:22 Fetch Place List Using API
01:06:23 Display Place List
01:15:56 Display Place Photo
01:20:25 Display Place Details on Side Drawer
01:38:56 Add User Search Functionality
01:44:20 Loading Skelton Effect
01:47:38 Deploy App on Vercel

[Programmer-journey-BD]

Wow It's amazing.. Please we need full stack web development course please ❤

[chessknock]

Wow, this is amazing! Please keep these full-stack projects coming 🎉 Learning so much

[uminhtetoo]

Thank you so much for sharing your experience and knowledge, Sir.

[naweedjaulim]

Really nice project, exactly what I was looking for. Would you be able to share some snippet how to do the pagination with the the placelist component. I can see the next page token in the console result but unsure how to implement it here 😊

[mahomedcissokho]

Just wonderful, u explain very well !! . Sir is it possible to have a mern project like e-commerce app with complete Oauth, custom products with size and colors, add to cart, stripe integration and perhaps notifications after payment + history ?

[lalaniwerake]

Hi TubeGuruji, I am glad I found you :) your contact is very informational. One question - is it possible to send a selected placelist to a DB (say to Mongo) and call it from there when the page loads for the first time? That way, the front page is always the same and if additional imformation is needed, can go for Google API calls?

[ronitpatelcse]

hey thanks for wonderful tutorial
but need some help ... after I deploy this project on github pages the tailwindcss in not being applied
can you please me with this issue...

[moteteletsa]

Huh, nice video, and I was following and building with you until I reached a point where I was building a PlaceItemCard. Here, you just pasted the code but never shown the full code. Is this deliberate?

[andrewaghoghovwia]

I can't seem to get the same screen that enables the google place api ..does anyone else face same issue....awww I just realized you can't make it pass until you sign up for the free trial and get your card verified

[mohdsajidshaikh]

Which page is ssr ssg after build show that also

[nasssty]

Thanks for tutorial ! <3 where can i see png images?

[codewithAbdulMumin]

very lucky to discover this channel. best channel to learn next js. the way you teach is unique. thank you

[ahsanmughal]

How i can get Google API's key for free?

[HAMOKA-]

Great work, thank you, but there are things that you did not complete. I hope you make a new video or share the source code to complete them, such as the share button, the category bar, and others. I am a supporter from your site, thank you .

[MikeeBuildstech]

if I wanted to launch this website for free for local businesses to upload their businesses how do I add the functionality to do that?

[dannybrown]

Hi there. Great video but i have a little challenge on timestamp 1.00.00. I get this Error: "async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server."

[AlphaBeeta-of]

please as i mentioned earlier also please try to make responsive also

[Philddev]

Hi, the demo app doesnt seem to fetch data