FullStack Mastery
FullStack Mastery
  • Видео 32
  • Просмотров 249 048
How to create a React.js video player with buffering | playback speed | scrubbing
In this video, we're going to learn how to create a React.js video player with buffering, playback speed, and scrubbing.
React.js is a popular library for creating user interfaces in React.js. In this video, we're going to use React.js to create a video player. We'll cover topics like how to create a buffer, how to control playback speed, and how to scrub through the video.
This video is a great introduction to React.js and will help you understand the basics of how to create a video player using React.js. Thanks for watching!
Blog post describing a complete guide to implementing buffering: awacreates.com/blog/implement-buffering-in-react--a-complete-guide
____________________________________...
Просмотров: 8 360

Видео

How to create Drag and drop with shadow using Next.js, chakra ui, and react-beautiful-dnd.
Просмотров 8 тыс.Год назад
In this video, I'll show you how to create Drag and drop with shadow using Next.js, chakra ui, and react-beautiful-dnd. Drag and drop is a very common feature on websites and applications, and it can be tricky to create it using standard js and React. But with this video, you'll be able to create Drag and drop with shadow using Next.js, chakra ui, and react-beautiful-dnd in no time! So don't wa...
Build a Multi-List Drag and Drop To-Do App Using React
Просмотров 31 тыс.2 года назад
In this video, we'll be building a Multi-List Drag and Drop To-Do App using React. This to-do app will allow users to manage their lists of tasks easily and efficiently. By the end of this video, you'll have successfully built a Drag and Drop To-Do App using React! This app is perfect for users who want to manage their lists of tasks easily and efficiently. So be sure to watch the whole video, ...
How to Create a Sidebar in Next.js & Tailwind CSS
Просмотров 45 тыс.2 года назад
In this tutorial, I will be demonstrating how to create a sidebar menu in Next.js and Tailwind CSS for a simple dashboard such as a blog's admin dashboard. Link to tailwind documentation on how to configure tailwind CSS with Next.js tailwindcss.com/docs/guides/nextjs Benefits of using Tailwind CSS 1. It is Highly Customizable: Tailwind CSS is a highly customizable framework. The configuration f...
COMPLETE Google OAuth Tutorial - Next.js, Node.js, Express.js and PostgreSQL | Part 2
Просмотров 2,8 тыс.3 года назад
In this Part 2 of the mini-series Complete Google OAuth with Next.js, Node, Express, and Postgres, we will be integrating our OAuth endpoint on the Nodejs backend and consuming it on our Next.js and Chakra UI frontend which we are going to be building. IMPORTANT: Part 1 of COMPLETE Google OAuth Tutorial - Next.js, Node.js, Express.js and PostgreSQL: ruclips.net/video/RkWPDBPkjXs/видео.html In s...
Complete Google OAuth with Next.js, Node, Express and Postgres | part 1
Просмотров 9 тыс.3 года назад
In this tutorial, I will walk you through a complete google OAuth login with Next.js, Node, Express, Postgres, Sequelize. And in this video, we are going to be setting up our express server in Nodejs and some configurations for the google OAuth strategy with passportjs. So how does Google Oauth flow work? Once a user clicks on the Oauth login button, our frontend sends a request to the Google a...
How to build a URL Shortener using React, NodeJS & Postgres Pt 1
Просмотров 2,8 тыс.3 года назад
Build a url shortener nodeJs. create a url shortener website. I will be walking you through the first video in our mini-series of Full stack URL shortener using React, NodeJS, Sequelize and postgres from scratch. In this video, we will be setting up our express server and also configuring sequelize ORM with postgreSQL database. I will start by install all necessary dependencies and creating our...
How to create a nicely animated modal in React
Просмотров 4,5 тыс.4 года назад
In this video, we are going to create an animated modal in react using styled components, useState and useEffect. 🙏 SUBSCRIBE FOR MORE VIDEOS 👇 bit.ly/3cIb4er SOURCE CODE : github.com/dieudonneAwa/react-modal-exercise 🔮OTHER POPULAR VIDEOS👇👇 ▶️ Responsive Hamburger Menu React: ruclips.net/video/GGkBwpxV7AI/видео.html ▶️How to Setup React app from SCRATCH: ruclips.net/video/FG_0JOwpMnU/видео.htm...
Responsive Hamburger menu React and styled-components
Просмотров 78 тыс.4 года назад
HELPIn this tutorial, we will be building a Responsive Hamburger Menu using REACT and STYLED-COMPONENTS from scratch with create-react-app. After creating the react app, install styled components and delete the unwanted files that come with create-react-app, and add a components directory inside the src folder. The components folder is going to hold our navigation bar components consisting of B...
Render a list of task objects ReactJs | Best To Do List App #18.
Просмотров 4,6 тыс.4 года назад
In this video, I am going to walk you through rendering tasks for to dos in the their respective boxes using map function, react context react hooks and actions. Source Code: github.com/dieudonneAwa/todo/commit/fd7cf1f300be1c0476ad7c5b83d8e88c228d8f1b 🙏 SUBSCRIBE FOR MORE VIDEOS 👇 bit.ly/3cIb4er 🔮OTHER PROGRAMMING VIDEOS 👇👇 ▶️ Responsive Hamburger menu React & styled-components: ruclips.net/vid...
Create tasks for Todos. Best To Do List App #17.
Просмотров 7524 года назад
I am going to walk you through creating tasks for our todos. In this video, we are going to add some action creators, reducer cases, and update our context setup to connect the action creators. Source Code: github.com/dieudonneAwa/todo/commit/b80f7b8c171795a570804598f4aea2471486f2fe 👇👇👇👇SUBSCRIBE TO THE CHANNEL👇👇👇👇 ruclips.net/channel/UC4Bh0roLmZn4RIYd4kcD7KQ OTHER VIDEOS YOU MIGHT LIKE👇👇 - How...
How to Render an array of todo objects in React | React Hooks/Context. Best To Do List App #16.
Просмотров 7254 года назад
In this video, I am going to walk you through fetching a list of todo objects using axios and rendering them on the page using the .map() function. As you watch, don't forget to subscribe, like and share with your friends. Source Code: github.com/dieudonneAwa/todo/commit/df9ab76cc6a57de32bbbafdfe9ed8d25dedc6208 👇👇👇👇SUBSCRIBE TO THE CHANNEL👇👇👇👇 ruclips.net/channel/UC4Bh0roLmZn4RIYd4kcD7KQ OTHER ...
How to create a modal in Reactjs/Hooks. Best To Do List App #15.
Просмотров 4 тыс.4 года назад
How to create a modal in Reactjs/Hooks. Best To Do List App #15.
How to handle authentication in React using JWT & Cookies | Hooks. Best To Do List App #14.
Просмотров 4,7 тыс.4 года назад
How to handle authentication in React using JWT & Cookies | Hooks. Best To Do List App #14.
Sign In & Form Validation with React Context | Hooks | No Redux. Best To Do List App #13.
Просмотров 2,1 тыс.4 года назад
Sign In & Form Validation with React Context | Hooks | No Redux. Best To Do List App #13.
Sign up form validation using React Hooks, Context & axios | No Redux. Best To Do List App #12.
Просмотров 4,4 тыс.4 года назад
Sign up form validation using React Hooks, Context & axios | No Redux. Best To Do List App #12.
How setup React Context | React hooks. Best To Do List App #11.
Просмотров 5804 года назад
How setup React Context | React hooks. Best To Do List App #11.
How setup React with Redux, Redux-thunk and axios. Best To Do List App #10.
Просмотров 1,1 тыс.4 года назад
How setup React with Redux, Redux-thunk and axios. Best To Do List App #10.
Create a simple landing page | ReactJS tutorial. Best To Do List App #9.
Просмотров 1,8 тыс.4 года назад
Create a simple landing page | ReactJS tutorial. Best To Do List App #9.
Design mockups for To do list app. Best To Do List App #8.
Просмотров 4004 года назад
Design mockups for To do list app. Best To Do List App #8.
Password Reset using SendGrid. Best To Do List App #7.
Просмотров 5 тыс.4 года назад
Password Reset using SendGrid. Best To Do List App #7.
CRUD operations with Sequelize part 2. Best To Do List App #6.
Просмотров 5584 года назад
CRUD operations with Sequelize part 2. Best To Do List App #6.
CRUD operations with Sequelize. Best To Do List App #5.
Просмотров 2,1 тыс.4 года назад
CRUD operations with Sequelize. Best To Do List App #5.
Create Sequelize Migrations & Associations. Best To Do List App #4.
Просмотров 14 тыс.4 года назад
Create Sequelize Migrations & Associations. Best To Do List App #4.
Implement Authentication with JWT - Sign up and Sign In 2020 | Best To do List App #3.
Просмотров 1,5 тыс.4 года назад
Implement Authentication with JWT - Sign up and Sign In 2020 | Best To do List App #3.
How to setup Sequelize and PostgreSQL | Best Todo List app #2.
Просмотров 4 тыс.4 года назад
How to setup Sequelize and PostgreSQL | Best Todo List app #2.
How to setup Eslint and Babel. Best Todo List app #1.
Просмотров 2,4 тыс.4 года назад
How to setup Eslint and Babel. Best Todo List app #1.
How to setup React app from SCRATCH | Webpack 4, Babel 7 and Eslint(Airbnb style guide)
Просмотров 1,7 тыс.4 года назад
How to setup React app from SCRATCH | Webpack 4, Babel 7 and Eslint(Airbnb style guide)
JAVASCRIPT function to check if a string is a Palindrome or not
Просмотров 1,1 тыс.4 года назад
JAVASCRIPT function to check if a string is a Palindrome or not

Комментарии

  • @PixelGM
    @PixelGM 13 дней назад

    13:25 Sidebar Tailwind CSS Properties

  • @mIkeyGermita
    @mIkeyGermita Месяц назад

    Great video. Constructive criticism: the audio quality is so poor it makes watching the video unpleasant.

  • @swathis157
    @swathis157 Месяц назад

    Does this page work on server side rendering

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

    Thanks! I couldn't find information about how to apply a transition to a conditional style using styled components, this video helped me to achieve it :)

  • @davidekunno
    @davidekunno 5 месяцев назад

    Brilliant video. Thank you!

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

    hey thanks for this. Im using server actions with useoptimistic hook. Can you guide me how to do so using that? Thanks!

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

    Hi, thank you, this has clarified a few things for me. My only concern with your navbar is that you are duplicating it. With a simple trick, I was able to toggle the nav function to modify CSS using just one menu - this is much easier to maintain (unless one would want different items displayed in each).

  • @user-ip6lj6fl3n
    @user-ip6lj6fl3n 8 месяцев назад

    Hi i used your model to start an project but now im facing some problems with "lags" when i try move my cards from a column to another, i have like 500 cards, do u know any way to optimize it?

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

    thank you for this!! Definitely needed for the project I am currently attempting

  • @mark.raetzel
    @mark.raetzel 8 месяцев назад

    is there a way to do offline playing without separate downloading the video? Something like you cant download the video as file but you can make it offline viewable. Very complex, something like netflix. Is it possible?

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

    There is just a small issue, onClick handler should be like this to change the state correctly: const [isOpen, setIsOpen] = useState(false) onClick={() => setIsOpen((cur) => !cur)}

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

    thank you for the education

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

    Hi, kindly help me on adding submenu on your code, thanks

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

    Thanks!!

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

    Very nice design, on thing i doubt that when i change the route manually will the active tab change, if not how can I do so

  • @KhanhNguyen-zx3wv
    @KhanhNguyen-zx3wv 11 месяцев назад

    it so interesting 👍

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

    Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead. Open your browser's console to view the Component stack trace. Can i get some help please?

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

      Did you import Link from next?

  • @dar-v
    @dar-v 11 месяцев назад

    cool, thank you!

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

    great video. thanks @fullStack Mastery , best explanation ever

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

    23:00

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

    Great video! Could you make it in reactsjs without using nextjs?

  • @GS-st2sp
    @GS-st2sp Год назад

    can you build this with time tracking ?

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

    can u share code

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

      Check out the full video here: ruclips.net/video/NqGJeSUre3s/видео.html You’ll get the link to the code there

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

    nice work

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

    Mmhmm

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

      What do you think?

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

      @FullStack Mastery I like it man, you're awesome. Keep doing what you do!

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

      @@lillenk125 Thanks alot man for the kind feedback.🙌😍 I will do best with up coming contents. Priority on high quality contents

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

    I learned how to make an animation thanks to your video. thank you :!

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

    You are amazing...

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

    Thank You! 👍

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

    Thank you 🙂

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

    32:18 is there another way for not using dynamic import? I'm not using Next Js right here

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

      Yeah sure. If you're using react, you should use React suspense and react lazy.

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

      Or you could simply remove strict mode from index.js

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

      @@fullstackmastery Yup that work. Thank you 👍🏻👍🏻

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

      @@Novia5555 you’re very welcome ☺️

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

      @@fullstackmastery Gracias bro

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

    Thank you so much!

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

    please use ts

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

    great content bro, keep it up!!!!

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

      Thanks bro. I will be uploading more content in the coming weeks.

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

    Thank you!!

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

    I spent 2 days searching on stackoverflow, google... to fix a bug related to association but none worked for me until watching your video. Your video very clearly, easy to understand, thank you very much. You save me 💪

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

    Such a worthy video bro 👍

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

    very helpful 😍😍😍

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

    Server Error TypeError: Cannot read properties of undefined (reading 'id') - ["bg-light-lighter"]: activeMenu.id === menu.id, help

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

    help me please

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

    TypeError: Cannot read properties of undefined (reading 'id') how to fix this?

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

      make sure your menu array is initialized before the menuIcons function. For me, my issue was that I did "const router = useRouter" instead of "const router = useRouter();"

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

    ["bg-light-lighter"]: activeMenu.id === menu.id, , how to fix this?

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

    🔥 great video! I'm trying to get better at JS and understanding things as soon as I look at it.

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

      Great to hear! And thanks for watching. Please subscribe if you haven't done it yet

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

    When im console.log(activeMenu) i got notice like this undefined, how to fix this?

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

    How do you add a dropdown to the side bar?

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

    nice

  • @christianenriquevillamoral6140

    How do I make the sidebar static and not affect the content, thanks for the video, I hope a prompt response

  • @Vivek_-_
    @Vivek_-_ Год назад

    how can we retain the background color property of draggable e.g if we have a red background color for to-do how can we keep it in completed and if in-progress we have a background color blue how we retain its color property in complete.

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

    u r covering such huge topics and u r so unpopular

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

      Thanks @Hamsitha CS. I'm glad my content is helpful. Please subscribe if you haven't done that yet.

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

    Great video! Helped me a lot in a project!

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

    good content, but the audio needs improvement