Chris DeSilva
Chris DeSilva
  • Видео 64
  • Просмотров 267 137
React Custom Hooks - useIsOnline
Learn about custom hooks in React by creating a hook that detects network connectivity.
Repo: github.com/chrisdesilva/web-apis
React docs: react.dev/
Просмотров: 89

Видео

Web APIs - Geolocation Hook in React
Просмотров 4259 месяцев назад
Create a hook to use a device's location information with the geolocation API. Repo link: github.com/chrisdesilva/web-apis
Build a Tailwind Component Library #3 - Text
Просмотров 111Год назад
Build a common text component using Tailwind Repo: github.com/chrisdesilva/my-next-park
Build a Tailwind Component Library #2 - Link
Просмотров 87Год назад
Repo: github.com/chrisdesilva/my-next-park Build a common component that handles internal routing and external links
Build a Tailwind Component Library - Layout
Просмотров 3,3 тыс.2 года назад
In this series we'll refactor an old project by building out a component library. This video focuses on a common layout component. Repo: github.com/chrisdesilva/my-next-park Original project playlist: ruclips.net/p/PL1FIFZraE9UFphZIXApGJXX-qtzDwM3OA
Full Stack Flask, React, and Postgres, pt 2
Просмотров 14 тыс.2 года назад
Create a full stack application using Flask, PostgreSQL, and React. In this video, we'll connect our Flask back end to a new React front end.
Full Stack Flask, React, and Postgres, pt. 1
Просмотров 37 тыс.2 года назад
Create a full stack application using Flask, PostgreSQL, and React. In this video, we'll set up our CRUD endpoints and test them using Postman. SQLAlchemy docs: docs.sqlalchemy.org/en/20/
3D Image Carousel, pt. 2 - Media Queries and Match Media
Просмотров 1,6 тыс.3 года назад
Make your 3D carousel responsive Link to project: github.com/chrisdesilva/3d-slider
Automate Cypress Testing in the Cloud with LambdaTest
Просмотров 9963 года назад
Link to repo: github.com/LambdaTest/cypress-example-kitchensink LambdaTest: www.lambdatest.com/cypress-testing
Flutter As A React Dev, pt 2
Просмотров 463 года назад
Official docs: codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0
Flutter As A React Dev, pt 1
Просмотров 1083 года назад
Official docs: codelabs.developers.google.com/codelabs/first-flutter-app-pt1#0
Cypress Intercept - Spy on Requests and Stub Responses
Просмотров 10 тыс.3 года назад
Cypress Intercept docs: docs.cypress.io/api/commands/intercept
Create a Skeleton Loader with Styled Components
Просмотров 1,3 тыс.3 года назад
Make a placeholder skeleton component for loading data using styled components
Learn Apollo Client's useMutation Hook in Less Than 30 Minutes
Просмотров 8 тыс.3 года назад
Mutation docs: www.apollographql.com/docs/react/data/mutations/ Playground back end: codesandbox.io/s/mutations-example-app-server-sxewr?file=/index.js:934-943
React App Testing with Cypress
Просмотров 44 тыс.3 года назад
Learn to test your React app with Cypress Repo: github.com/chrisdesilva/nba-scoreboard Cypress Docs: docs.cypress.io
React Forms with Formik, Yup, and Material UI
Просмотров 9 тыс.3 года назад
React Forms with Formik, Yup, and Material UI
Learn Apollo Client's useQuery Hook in Less Than 20 Minutes
Просмотров 9 тыс.3 года назад
Learn Apollo Client's useQuery Hook in Less Than 20 Minutes
React Interview Prep - Class Components to Hooks
Просмотров 523 года назад
React Interview Prep - Class Components to Hooks
React Interview Prep - Build A Form
Просмотров 1973 года назад
React Interview Prep - Build A Form
3D Backgrounds with Vanta and Next.js
Просмотров 9 тыс.3 года назад
3D Backgrounds with Vanta and Next.js
Make a 3D Image Carousel with React Slick
Просмотров 42 тыс.3 года назад
Make a 3D Image Carousel with React Slick
Next.js #5 - Firebase Hosting
Просмотров 14 тыс.3 года назад
Next.js #5 - Firebase Hosting
Next.js #4 - Responsive Design with Tailwind
Просмотров 1,6 тыс.3 года назад
Next.js #4 - Responsive Design with Tailwind
Next.js #3 - Create Park Pages with getStaticPaths
Просмотров 4113 года назад
Next.js #3 - Create Park Pages with getStaticPaths
Next.js #2 - Styling the Homepage
Просмотров 7813 года назад
Next.js #2 - Styling the Homepage
Next.js #1 - Getting Started with Next and Tailwind
Просмотров 2,2 тыс.3 года назад
Next.js #1 - Getting Started with Next and Tailwind
Next SSG #2: Using getStaticPaths with Next.js
Просмотров 2,4 тыс.3 года назад
Next SSG #2: Using getStaticPaths with Next.js
Next SSG #1: Using getStaticProps with Next.js
Просмотров 8173 года назад
Next SSG #1: Using getStaticProps with Next.js
CSS Modules, Variables, and Global Styles in Gatsby
Просмотров 1,8 тыс.4 года назад
CSS Modules, Variables, and Global Styles in Gatsby
3 Strategies for Creating Diagonal Layouts with CSS
Просмотров 2,8 тыс.4 года назад
3 Strategies for Creating Diagonal Layouts with CSS

Комментарии

  • @illMonk-xm2xd
    @illMonk-xm2xd 17 дней назад

    preciate you my boy

  • @hubschmannn
    @hubschmannn 3 месяца назад

    a lot of thx!!! very usefull content!

  • @tabdig
    @tabdig 4 месяца назад

    So everytime i reload and the website has access to my location. It just returns null

  • @adamkudla
    @adamkudla 7 месяцев назад

    Thanks for this video. Not as tutorial but demo of possibilities.

  • @fabianpetersen2452
    @fabianpetersen2452 8 месяцев назад

    i wanted to use this for my website but it is to messy to make it work, if anything goes wrong i dont have the time to go through the code to look for changes only to see birds on the screen 🤣

  • @rayanetube7074
    @rayanetube7074 8 месяцев назад

    Thank you

  • @TheNormann33
    @TheNormann33 8 месяцев назад

    Hi, thanks for the great video! I tried to reproduce it, and everything work fine, while Im on localhost. When I try to open react page outside localhost, it opens with errors. It seems like frontend cant reach backend in this case. Could you please give some advise how to fix it?

  • @fal8202
    @fal8202 8 месяцев назад

    Thank you Chris for this compact and very useful video, i used it in my Nextjs project with some adjustments like wrapping the fetch function in a useEffect so it does it only once. I am getting the location data but not the timestamp (on Chrom), any hints? Thanks

  • @timothyatanda1188
    @timothyatanda1188 8 месяцев назад

    This is a great tutorial i must be sincere, but many of found it hard to setup Python with VS code powershell, you shouls have started from how you create your folders😭

  • @jhunelpenaflorida1768
    @jhunelpenaflorida1768 8 месяцев назад

    There had an error, but was able to solve by using postgresql:// instead of postgres://. Thank you.

  • @tracy8522
    @tracy8522 9 месяцев назад

    I really like this!!! You put it all into one whole set that provide us with the whole picture! Thank you Chris!

  • @techany671
    @techany671 10 месяцев назад

    Githhub link?

  • @zacharymargulies
    @zacharymargulies 10 месяцев назад

    At minute 15 I keep getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when trying to run the app. I am not sure what I am doing wrong but for some reason map is not working. Any thoughts?

    • @ChrisDeSilva
      @ChrisDeSilva 10 месяцев назад

      Is it giving you a line number? It's likely that you're trying to map over something that's undefined. Either a variable typo or data that might be getting fetched that isn't ready yet. For example, if I do data.map... - and data is being fetched, data can temporarily be undefined. There are a few ways of addressing these things. You can add a loading state, use optional chaining (data?.map), etc. Just depends why exactly you're getting the error.

    • @zacharymargulies
      @zacharymargulies 10 месяцев назад

      @@ChrisDeSilva No line number but the rest of the error reads "TypeError: Cannot read properties of undefined (reading 'map') at App (localhost:3000/main.6a2dabcb05f981dd9f7e.hot-update.js:134:32) at renderWithHooks (localhost:3000/static/js/bundle.js:21453:22) at updateFunctionComponent (localhost:3000/static/js/bundle.js:24335:24) at beginWork (localhost:3000/static/js/bundle.js:26047:20) at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js:11045:18) at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js:11089:20) at invokeGuardedCallback (localhost:3000/static/js/bundle.js:11146:35) at beginWork$1 (localhost:3000/static/js/bundle.js:31020:11) at performUnitOfWork (localhost:3000/static/js/bundle.js:30267:16) at workLoopSync (localhost:3000/static/js/bundle.js:30190:9)" Thanks for the reply. Your video is INCREDIBLE, but this error is stumping me.

    • @zacharymargulies
      @zacharymargulies 10 месяцев назад

      In trying to debug this, I am confused as to why you use do line 49 at minute 15 "eventsList.map(event=> {" shouldn't "event" here be "events" ?

    • @ChrisDeSilva
      @ChrisDeSilva 10 месяцев назад

      You can call that whatever you want. When I use array methods, I typically call it the individual entity. Since we're mapping over eventList, then each individual item is an event.

    • @zacharymargulies
      @zacharymargulies 10 месяцев назад

      @@ChrisDeSilva Thank you that makes sense. So optional chaining does get rid of the error but sadly that means I can't fetch my data, no?

  • @kadencarr1914
    @kadencarr1914 10 месяцев назад

    What is your theme

  • @MikeyFEonline
    @MikeyFEonline 11 месяцев назад

    i'm trying to use variables & mixins, instead of ' :root'... why is that not working with this approach?

  • @joeniati7903
    @joeniati7903 11 месяцев назад

    This project will not start for me properly

  • @joeniati7903
    @joeniati7903 Год назад

    what commands should i runto start the project

  • @HellBoy-nl7lo
    @HellBoy-nl7lo Год назад

    I need to intercept a request and add a custom header to the request and let it hit, how can it be done

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Check out the docs here: docs.cypress.io/guides/guides/network-requests

  • @joeniati7903
    @joeniati7903 Год назад

    or any kind of tokens?

  • @joeniati7903
    @joeniati7903 Год назад

    does this use any kind of JWT token?

  • @Coolgardt
    @Coolgardt Год назад

    Thank you!

  • @saeidex
    @saeidex Год назад

    Sir, what's the font you are using on vscode?

  • @imaginechiu4371
    @imaginechiu4371 Год назад

    Thank you for the tutorial :) I'd like to recommend another React carousel to you, it's called "bear-react-carousel". You might want to give it a try.

  • @shikhxr24
    @shikhxr24 Год назад

    While giving the db.create_all() for creating the 'event' table, I'm getting "Runtime error: Working outside of application context" The way to resolve this is using 'application context' . I went through the documentation but couldn't figure out how the code would look like for this. Please let me know if you could.

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Without seeing the code you've got set up, this looks like it might point you in the right direction based on that error: flask.palletsprojects.com/en/2.3.x/appcontext/

    • @agreen254
      @agreen254 11 месяцев назад

      You have to nest the db.create_all() inside a context block: with app.app_context(): db.create_all() Also make sure you declare the Event class before running create_all or it won't register in the database. I have no idea why it worked for him in the python shell without adding the context block. Probably something to do with the deprecation warnings, considering the video is almost 2 years old now. Still a good tutorial that helped me with ORMS!

  • @tejasgopal6101
    @tejasgopal6101 Год назад

    Great video man! You're video was done smartly and concisely, I really appreciate it!

  • @claringzero
    @claringzero Год назад

    Because of you I solved my problem. Thank you and God Bless. 🎉

  • @iFunktion
    @iFunktion Год назад

    How did anyone get this to work, tables won't create, error messages everywhere, this is a nightmare for a beginner tutorial

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Sounds frustrating. Hard to tell from the error messages alone without any other context. If you're just starting out, it's a great opportunity to lean on documentation. Check the Flask docs, search Stack Overflow for similar error messages, etc. It usually ends up being a small detail that got missed somewhere along the way. Super easy to do when following along with tutorials.

  • @iFunktion
    @iFunktion Год назад

    I really don't understand how you are doing this without getting errors, I am now getting :RuntimeError: Working outside of application context. How do you get round all of this?

  • @iFunktion
    @iFunktion Год назад

    Hi, I'm getting and error: RuntimeError: Either 'SQLALCHEMY_DATABASE_URI' or 'SQLALCHEMY_BINDS' must be set. How do you get past this?

    • @bigmack13
      @bigmack13 7 месяцев назад

      Did you ever sort this out

    • @sagharsahebi5236
      @sagharsahebi5236 6 месяцев назад

      Did you figure it out?@@bigmack13

  • @Sameer.Trivedi
    @Sameer.Trivedi Год назад

    Thankyou so much man!

  • @lesterdelacruz5088
    @lesterdelacruz5088 Год назад

    Note for people: `next export` will lose some of the functions of NextJS like hot-module replacement, server-side APIs, and stuff since `next export` essentially turns it into a SPA app. Though you will maintain some of other beneficial aspects of NextJS.

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Awesome comment, thanks for adding this! I'm sure this will help with some future troubleshooting.

    • @lesterdelacruz5088
      @lesterdelacruz5088 Год назад

      @@ChrisDeSilva yes the 404 that people are getting in the comments below is because the loss of SSR. /pages are no longer nextJs served they are loaded in by React. So those routes need can only be accessed from a link from the index page. I personally think Firebase isn’t the place for nextJs app at least at the moment but to each their own.

  • @atfranco00
    @atfranco00 Год назад

    TY BRO !!! SAVE THE DAY 😁

  • @hercodingpill
    @hercodingpill Год назад

    Amazing, just implemented this in my project! 🤩

  • @dan754513
    @dan754513 Год назад

    By intercepting, can I log the the response from secure website as well ? I need to log the response so I can get client ID which I need to use for the next call

  • @SantoshK-md6wc
    @SantoshK-md6wc Год назад

    pretty good video. it would be good if you can demo some processing of data using web and db connectivity

  • @SantoshK-md6wc
    @SantoshK-md6wc Год назад

    wonderful video. thanks you so much

  • @williamliu796
    @williamliu796 Год назад

    Great video! For some reason my cypress version is missing the add command to test button

  • @aldelta19
    @aldelta19 Год назад

    When you start working with these tools, the other stuff seems silly... Unless you're working for an enterprise, I guess.

  • @manasahr430
    @manasahr430 Год назад

    could you please make a video on flask backend ,react frontend ,microsoft sql server database (stored procedure data )

  • @HimanshuSharma-vo3ny
    @HimanshuSharma-vo3ny Год назад

    Very helpful!👏

  • @theclueless11212
    @theclueless11212 Год назад

    When I run POST and GET requests at localhost:5000/events, I get a 401 Unauthorized error. any ideas why?

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Tricky to diagnose without a bit more detail but are you seeing any other error messages in the console. First thing that comes to mind is that you may have a CORS issue and may have simply missed that part of the setup. Happy to try to help troubleshoot further if you have more details/questions.

  • @shaunakchandra737
    @shaunakchandra737 Год назад

    thnks a lot for this helpful video

  • @Balance-8
    @Balance-8 Год назад

    Keep it up!

  • @giancarlocabrera7336
    @giancarlocabrera7336 Год назад

    Chris i have a question, what if i want to do my query once the user submits a form, i've been tying to do it but it does not let me do the query inside a function onSubmit

    • @ChrisDeSilva
      @ChrisDeSilva Год назад

      Check out the docs to either use the refetch method or useLazyQuery - www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

  • @sergiocanas383
    @sergiocanas383 Год назад

    Finally found a course that talks about all three and not just React and flask. Thank you

  • @lucasmunaro1093
    @lucasmunaro1093 Год назад

    Hi, Thanks for tutorial. Know you help peoples on the all world! I'm from brazil and very content with your video.

  • @SophieWillson-qu3gu
    @SophieWillson-qu3gu Год назад

    This is great, I'm having an issue with my model where the 'id' and 'created_at' default value are returning "null" - when I print "event" from the formatter method it just logs my description

  • @MrDamian0303
    @MrDamian0303 Год назад

    i love you

  • @ersk_i
    @ersk_i Год назад

    Thank you dude! Got my site to hosting with ease, definetly will subscribe as you seem to do so much more cool content

  • @JustSkillGG
    @JustSkillGG Год назад

    awesome video, awesome explaining!