AlterClass
AlterClass
  • 48
  • 237 638
Let's Build a Full Stack App with React & Nhost in 20 Minutes
Learn how to build a full-stack React JS app using Nhost, an open-source Firebase alternative with GraphQL. In this video, I'll walk you through the Nhost React quickstart demo to show you how to set up and configure a React project using Nhost in less than 20 minutes.
Nhost React Quickstart → docs.nhost.io/platform/quickstarts/react
🎒 Learn more about AlterClass
• Website: alterclass.io/
• Tutorials: alterclass.io/tutorials/
• Courses: themodern.dev/
👨‍💻 Learn more about Nhost
• Website: nhost.io/
• Docs: docs.nhost.io/
► Follow me on Twitter - gdangel0
► Join the 💬 Discord Server 💬 - community.themodern.dev/
► Subscribe to the channel - alterclass.io/youtube
_______
📚 Recommended books
• Eloquent JavaScript - amzn.to/3xbO6d2
• Cracking the Coding Interview - amzn.to/3x2gihs
• Introduction to Algorithms - amzn.to/3x5zuL8
• Clean Code - amzn.to/3NevPSf
• Clean Architecture - amzn.to/3zdG8BH
📺 Recommended courses
• Beginner JavaScript - BeginnerJavaScript.com/friend/DANGELO
• React for beginners - ReactForBeginners.com/friend/DANGELO
• Advanced React - AdvancedReact.com/friend/DANGELO
• ES6 for everyone - ES6.io/friend/DANGELO
• JavaScript 30 - JavaScript30.com/friend/DANGELO
_______
🛠 MY GEAR
📸 Video
• Canon EOS M50 - amzn.to/3m4Ze5h
• Canon RF 35mm f/1.8 Lens - amzn.to/3PW8Tc8
• SanDisk Memory Card (128GB) - amzn.to/3xasgXF
• Elgato Key Light - amzn.to/3m4NMqi
• Logitech Litra Glow Light - amzn.to/3GFSvbv
• Logitech C920 HD Pro Webcam - amzn.to/3NoJgyM
🎤 Audio
• Røde Procaster Microphone - amzn.to/3GFWcOi
• Røde PSA1 Microphone Hinge Arm Tripod - amzn.to/3m4n555
• Røde Elastic Microphone Holder PSM1 - amzn.to/3GH8XYY
• RØDE WS2 Pop Filter Windshield - amzn.to/3M8SU7p
• Red VideoMicro - amzn.to/38FM7Ev
• Bose Noise Cancelling Headphones 700 - amzn.to/3PVKnb7
🖥 Editing
• Descript editing software - www.descript.com?lmref=F61Cyg
• DELL U2419HC Monitor x2 - amzn.to/3NdQzJA
• Keychron K2 Mechanical Keyboard - amzn.to/3GH5fhX
• Logitech M545 Wireless Mouse - amzn.to/3xjzg4F
• Apple MacBook Pro - amzn.to/3m3gZlA
• Canva Pro for design - partner.canva.com/3Prmbk
⚡️ Others
• ConvertKit - Creator Marketing Platform - convertkit.com?lmref=3Yr5Ng
_______
⏱ TIMESTAMPS
00:00 - Intro
01:05 - Create a new Nhost app
02:10 - Create a React app
03:59 - Configure Nhost with React
05:30 - Add authentication
09:26 - Protect routes
12:42 - Retrieve user data
13:38 - Update user data
19:52 - Thank you!
_______
DISCLAIMERS
Links included in this description may be affiliate links. When you buy a product or service with these links, I may receive a small commission. However, there is no additional cost to you :) I highly appreciate you supporting my channel, so I can continue to provide you with awesome modern web development content for free!
มุมมอง: 1 828

วีดีโอ

How to COLLECT PAYMENTS with STRIPE + NEXT.js (Step-by-Step Tutorial)
มุมมอง 17K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev ► App demo: myplantshop.vercel.app ► Source code: github.com/AlterClassIO/ecommerce-nextjs-stripe-checkout ► The micro packag...
12 - Code-Splitting with React, React.lazy, and React Router
มุมมอง 1.1K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev Finally, we'll look at what code-splitting is and how to do it, and how to implement it with React Router to split your app i...
11 - Programmatically navigate using React Router
มุมมอง 8583 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev Sometimes, you need to navigate the user to a new location without clicking on an actual link, but when he has performed a sp...
10 - Protected Routes and Authentication with React Router
มุมมอง 8K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev You'll often need to protect some pages of your application and display them only if the user is authenticated. So, in this l...
09 - Redirect to Another Page with React Router
มุมมอง 8K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn how to use the Redirect component from React Router to create a redirect rule from one route to ...
08 - Handle 404 pages (catch-all routes) with React Router
มุมมอง 1.3K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn how to implement a catch-all route for handling 404 pages in a React app with React Router. Buy ...
07 - Parse query strings in React Router
มุมมอง 2.2K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn how to retrieve and parse the query strings from the current URL using the useLocation hook from...
06 - Use Regular Expressions with Routes
มุมมอง 2K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev The path property of the Route component can accept a string, an array of strings, or even regular expressions. So, in this l...
05 - Use URL parameters with React Router
มุมมอง 1.1K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev URL parameters are a fundamental concept of building web applications. In this lesson, you'll learn how to effectively levera...
04 - Style a Link that is Active with NavLink
มุมมอง 5K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn to build navigation links using NavLink, which is a special version of the Link component that g...
03 - Use the Link Component to navigate Between Routes
มุมมอง 1.5K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn how to use the Link component from React Router to allow your users to navigate around your appl...
02 - Create Basic Routes with BrowserRouter
มุมมอง 2.2K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn how to enable routing in your app using the BrowserRouter component from React Router, and creat...
01 - Introduction - React Router v5
มุมมอง 3.7K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, you'll learn about the concept of routing in a web application, understand server-side routing, its pros, and...
09 - Design a variant of a Tailwind card component using props
มุมมอง 1.3K3 ปีที่แล้ว
► Check out screencasts.alterclass.io/ for more episodes! ► Learn to build your own production-ready React applications and become a successful React developer: alterclass.io/courses/react ► Be on top of the best and hottest web technologies: alterclass.io/the-modern-dev In this lesson, we'll finish building our 3-tier pricing table by emphasizing one of the tiers. We will create a variant of o...
08 - Use Tailwind CSS to create a responsive grid layout
มุมมอง 3.1K3 ปีที่แล้ว
08 - Use Tailwind CSS to create a responsive grid layout
07 - Render multiple React components with map inside JSX
มุมมอง 4.3K3 ปีที่แล้ว
07 - Render multiple React components with map inside JSX
06 - Extract a self-contained and reusable UI component with React
มุมมอง 6203 ปีที่แล้ว
06 - Extract a self-contained and reusable UI component with React
05 - Design a call to action button with Tailwind CSS
มุมมอง 8523 ปีที่แล้ว
05 - Design a call to action button with Tailwind CSS
04 - Style SVG Icons with Tailwind Utility Classes
มุมมอง 1.1K3 ปีที่แล้ว
04 - Style SVG Icons with Tailwind Utility Classes
03 - Structure and style a basic card in Tailwind CSS
มุมมอง 8093 ปีที่แล้ว
03 - Structure and style a basic card in Tailwind CSS
02 - Setup Tailwind CSS in a Create React App project
มุมมอง 7363 ปีที่แล้ว
02 - Setup Tailwind CSS in a Create React App project
01 - Create a React app from scratch with create-react-app
มุมมอง 2K3 ปีที่แล้ว
01 - Create a React app from scratch with create-react-app
18 - Launch and deploy a Next.js app in production on Vercel imported from Github
มุมมอง 7983 ปีที่แล้ว
18 - Launch and deploy a Next.js app in production on Vercel imported from Github
17 - Protect server side rendered pages to prevent a flash of unauthenticated content
มุมมอง 8543 ปีที่แล้ว
17 - Protect server side rendered pages to prevent a flash of unauthenticated content
16 - Create a reusable blog post editor component with Markdown support and syntax highlighting (2)
มุมมอง 4103 ปีที่แล้ว
16 - Create a reusable blog post editor component with Markdown support and syntax highlighting (2)
16 - Create a reusable blog post editor component with Markdown support and syntax highlighting (1)
มุมมอง 5603 ปีที่แล้ว
16 - Create a reusable blog post editor component with Markdown support and syntax highlighting (1)
15 - Fetch data from Next.js API and create an infinite loading list with React hooks and SWR
มุมมอง 4.8K3 ปีที่แล้ว
15 - Fetch data from Next.js API and create an infinite loading list with React hooks and SWR
14 - Build basic and dynamic API routes with Next.js to create/read/update/delete data in FaunaDB
มุมมอง 4713 ปีที่แล้ว
14 - Build basic and dynamic API routes with Next.js to create/read/update/delete data in FaunaDB
13 - Listen to Next.js Router events and display a progress bar when changing route
มุมมอง 2.8K3 ปีที่แล้ว
13 - Listen to Next.js Router events and display a progress bar when changing route

ความคิดเห็น

  • @zafpar
    @zafpar หลายเดือนก่อน

    npm ERR! code ETARGET npm ERR! notarget No matching version found for css@7. it is showing when i tried to install Tailwind css

  • @climax65
    @climax65 4 หลายเดือนก่อน

    Hello sir how do you make the chat app live on demo

  • @pradipspeaks9395
    @pradipspeaks9395 6 หลายเดือนก่อน

    Can you please add one example for nested routes? Say / matches the home. Inside home we have /home1 /home2. Can you please explain this as an additional video?

  • @growingisgood
    @growingisgood 7 หลายเดือนก่อน

    Your code is wrong. the [id].js route isn't doing anything

  • @HuyPhanTien
    @HuyPhanTien 7 หลายเดือนก่อน

    So..? What happend if I have more 10 pages? Wrap all in layout brh?

  • @SamHartmannCom
    @SamHartmannCom 9 หลายเดือนก่อน

    Can't wait to use Next!! But step by step... gonna start with React basics.😇

  • @amitsahu4575
    @amitsahu4575 10 หลายเดือนก่อน

    To the point.. thanks

  • @RNBnewsIndia
    @RNBnewsIndia 11 หลายเดือนก่อน

    sir , how costing will work for this feature of firebase, ?

  • @Dev-Phantom
    @Dev-Phantom ปีที่แล้ว

    poop

  • @bouzianemohameddjalleleddi7062
    @bouzianemohameddjalleleddi7062 ปีที่แล้ว

    how i should know if i'm good in javascript to start learning react ??

  • @codewithhazem_
    @codewithhazem_ ปีที่แล้ว

    thanks very much! ❤❤👌👌

  • @rafaeljahn2928
    @rafaeljahn2928 ปีที่แล้ว

    Bro thank you so much!!!! very simple and effective

  • @williamdiaz8307
    @williamdiaz8307 ปีที่แล้ว

    Thanks, It was really useful

  • @chijiokeemechebe8125
    @chijiokeemechebe8125 ปีที่แล้ว

    So easy and explained properly. Thank you

  • @williamcao5139
    @williamcao5139 ปีที่แล้ว

    This man is a scamer

  • @elonkhanal
    @elonkhanal ปีที่แล้ว

    What's the English tone . Sounds cool though 😁

  • @brendonmecoy315
    @brendonmecoy315 ปีที่แล้ว

    This video actually didn't have anything to do with what the title suggests. We are asking how we can make meta tags dynamic between each individual page...

  • @shaunkumar116
    @shaunkumar116 ปีที่แล้ว

    what does this error mean and how do I fix it: export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

    • @3ms111
      @3ms111 4 หลายเดือนก่อน

      Same, I have also encountered this message. And when, I try to solve it, some features( function ) are not working.

  • @photostudioapp8189
    @photostudioapp8189 ปีที่แล้ว

    This is hands down the shortest video explaining how to do this. Very efficient for those of us learning.

  • @xaviermichelmengue1989
    @xaviermichelmengue1989 ปีที่แล้ว

    searching for the css code

  • @caiofernandes5074
    @caiofernandes5074 ปีที่แล้ว

    amazing!!!

  • @AKHIL-cg7uo
    @AKHIL-cg7uo ปีที่แล้ว

    In terms of pricing real-time database is better because this will have problem while scaling

  • @KumariNeetu-wo6wp
    @KumariNeetu-wo6wp ปีที่แล้ว

    by using useHistory the Redirection is working on url but UI is not Updating .how to resolve it ?

  • @fictionplus
    @fictionplus ปีที่แล้ว

    Can I use Webflow for my landing and other pages, then gatsby to build a dashboard?

  • @realdaly
    @realdaly ปีที่แล้ว

    I don't want to replace the title, I wanna just add the page title to the default title from the layout and separate them by "-" or something. For example, the default title is "Clothing Store" and for the pages I want it to add "Clothing Store - Products" where products is dynamic and could be any title I want. Is that possible?

    • @Popo-hr6gc
      @Popo-hr6gc ปีที่แล้ว

      Did you get an answer?

    • @realdaly
      @realdaly ปีที่แล้ว

      @@Popo-hr6gc I'm using a library called "next-seo" to achieve that.

  • @nikhil182
    @nikhil182 ปีที่แล้ว

    I can't thank you enough! Tutorials should be like this💯

  • @mediacreatif
    @mediacreatif ปีที่แล้ว

    French accent isn't it ?

  • @Adenafun
    @Adenafun ปีที่แล้ว

    background music is very loud which makes it difficult to hear your voice.

  • @mfz5166
    @mfz5166 ปีที่แล้ว

    Cannot find name 'isInViewport'. how did you get this function?

    • @rawarg
      @rawarg ปีที่แล้ว

      8:37

  • @Flimcy
    @Flimcy ปีที่แล้ว

    hey i was wondering how do i fix 'npx' is not recognized as an internal or external command, operable program or batch file. it keeps coming

  • @kvncnls
    @kvncnls ปีที่แล้ว

    What about the meta tag that shows the preview image of your site on Twitter, Discord, Facebook, etc.?

  • @AjitJain-ym1cf
    @AjitJain-ym1cf ปีที่แล้ว

    Thanks for this. But I am not able to see these meta tags in view page source. That's why Facebook crawler is not able to read these meta tags any help?

  • @adcentertainments009
    @adcentertainments009 ปีที่แล้ว

    thank you very much sir , this video helped me very much

  • @portersmith9101
    @portersmith9101 ปีที่แล้ว

    What about firebase permissions?

    • @portersmith9101
      @portersmith9101 ปีที่แล้ว

      Also how is this 5 minutes xD you stop the timer multiple times

  • @hichamabboud9672
    @hichamabboud9672 ปีที่แล้ว

    I followed all the steps but I still get this message when I refresh the browser : " Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server."

  • @ziggy1454
    @ziggy1454 ปีที่แล้ว

    Your channel photo (dp) will look great with gradient in background instead of that simple purple colour

  • @relativityboy
    @relativityboy ปีที่แล้ว

    A great tutorial, but those macros that insert entire code-blocks? Pas bien.

  • @luisvalencia5009
    @luisvalencia5009 ปีที่แล้ว

    When did you create the lib directory??? I've already search for the moment you created it and it's like god, it doesn't exist!!!. terrible experience for people who found interesting how you created the infinite loading. how can I guess what is the content of "isInViewport()" ??

  • @LemonZorzCinema
    @LemonZorzCinema ปีที่แล้ว

    I found this series when looking for a dark mode tutorial for next. Now, I'm going through the entire series. I love how direct and to-the-point your style is. You respect others time and show only whats needed. Can't wait to go through the playlist, thanks!

  • @clipartinc
    @clipartinc ปีที่แล้ว

    16:10 for the fetcher I'm getting Module not found. What module did you install for the fetcher?

    • @clipartinc
      @clipartinc ปีที่แล้ว

      I keep getting -> session is not defined ... as a webhook error.

  • @clipartinc
    @clipartinc ปีที่แล้ว

    I am getting a 401 error on the promise return when clicking redirectToCheckout. The session.url from accessing /api/checkout_sessions is correct and works, but the url redirectToCheckout sends to is not, it ends in init, which fails. The error seems to be from Invalid API Key provided: undefined". Where does this API Key need defined? I have the public key for client side and private key for server side just as the videos show. Hmmmmm Any ideas what's going wrong?

    • @clipartinc
      @clipartinc ปีที่แล้ว

      I solved the issue by adding the code below in to the next.config.js file... env: { stripe_public_key_test: process.env.stripe_public_key_test, stripe_secret_key_test: process.env.stripe_secret_key_test, stripe_webhook_endpoint_secret: process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET, }, You have to tell Next.js this or else it doesn't see them I guess :\

    • @immortalshadow4244
      @immortalshadow4244 ปีที่แล้ว

      same problem

  • @clipartinc
    @clipartinc ปีที่แล้ว

    Great video and love how you show the code. Great job! I'm still having issues with a "Request failed with status code 500" when clicking checkout, but I'll figure it out.

    • @RaefetOuafiqo
      @RaefetOuafiqo ปีที่แล้ว

      i saw u in the stripe devs channel, how things are working out with u?

    • @clipartinc
      @clipartinc ปีที่แล้ว

      @@RaefetOuafiqo Hi, working out great :)

    • @RaefetOuafiqo
      @RaefetOuafiqo ปีที่แล้ว

      @@clipartinc did you needed any serverside (like nodejs ) or nextjs was enough

  • @mohamedsharkawey3847
    @mohamedsharkawey3847 ปีที่แล้ว

    right to the point...thank you sir!

  • @yhasmanivaldes6217
    @yhasmanivaldes6217 ปีที่แล้ว

    you made my day, i was missing the last part because the icons doesn't match. Thank you

  • @miscany
    @miscany ปีที่แล้ว

    I'm confused. In the page *pages/products/[id].js* , where are the props coming from? You come to this page when you click on a product, which links you to the dynamic page. But I can't figure out where the props are coming from lol.

  • @sachinaugustine9023
    @sachinaugustine9023 ปีที่แล้ว

    Subscribed bro ..... love it

  • @ikamy
    @ikamy ปีที่แล้ว

    I get this error when I'm trying to write localhost/:1 Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

  • @santrajrakesh1079
    @santrajrakesh1079 ปีที่แล้ว

    is it good i am learning typescript rather java script?

  • @swapnilcodes
    @swapnilcodes ปีที่แล้ว

    Wow !

  • @codelucky
    @codelucky ปีที่แล้ว

    Is Nhost better than Supabase and Appwrite?