- Видео 32
- Просмотров 249 048
FullStack Mastery
Нигерия
Добавлен 1 сен 2016
Are you eager to learn full stack web development? Do you want to start building Web and Mobile applications, mastering front-end, hybrid mobile and server-side development? Subscribe to FullStack Mastery right now.
The skills you will learn from this channel include: JavaScript, React, Typescript, NextJS, Redux, HTML, CSS, Styled-Components, Bootstrap, NodeJS, Express, Sequelize, Postgres, MongoDB, Mongoose... etc.
See you in the videos
The skills you will learn from this channel include: JavaScript, React, Typescript, NextJS, Redux, HTML, CSS, Styled-Components, Bootstrap, NodeJS, Express, Sequelize, Postgres, MongoDB, Mongoose... etc.
See you in the videos
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
____________________________________...
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
13:25 Sidebar Tailwind CSS Properties
Great video. Constructive criticism: the audio quality is so poor it makes watching the video unpleasant.
Does this page work on server side rendering
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 :)
You're welcome Juan. I'm glad it helped
Brilliant video. Thank you!
hey thanks for this. Im using server actions with useoptimistic hook. Can you guide me how to do so using that? Thanks!
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).
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?
thank you for this!! Definitely needed for the project I am currently attempting
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?
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)}
thank you for the education
Hi, kindly help me on adding submenu on your code, thanks
Thanks!!
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
it so interesting 👍
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?
Did you import Link from next?
cool, thank you!
great video. thanks @fullStack Mastery , best explanation ever
23:00
Great video! Could you make it in reactsjs without using nextjs?
can you build this with time tracking ?
can u share code
Check out the full video here: ruclips.net/video/NqGJeSUre3s/видео.html You’ll get the link to the code there
nice work
Thanks 😊
Mmhmm
What do you think?
@FullStack Mastery I like it man, you're awesome. Keep doing what you do!
@@lillenk125 Thanks alot man for the kind feedback.🙌😍 I will do best with up coming contents. Priority on high quality contents
I learned how to make an animation thanks to your video. thank you :!
You're most welcome
You are amazing...
Thanks Ted
Thank You! 👍
You're welcome
Thank you 🙂
You're welcome
32:18 is there another way for not using dynamic import? I'm not using Next Js right here
Yeah sure. If you're using react, you should use React suspense and react lazy.
Or you could simply remove strict mode from index.js
@@fullstackmastery Yup that work. Thank you 👍🏻👍🏻
@@Novia5555 you’re very welcome ☺️
@@fullstackmastery Gracias bro
Thank you so much!
You're welcome Bayron 😊
please use ts
great content bro, keep it up!!!!
Thanks bro. I will be uploading more content in the coming weeks.
Thank you!!
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 💪
You're welcome. I'm glad I could help😇
Such a worthy video bro 👍
very helpful 😍😍😍
Server Error TypeError: Cannot read properties of undefined (reading 'id') - ["bg-light-lighter"]: activeMenu.id === menu.id, help
You need to make sure activeMenu and menu are defined
Were you able to solve it?@@fullstackmastery
help me please
TypeError: Cannot read properties of undefined (reading 'id') how to fix this?
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();"
["bg-light-lighter"]: activeMenu.id === menu.id, , how to fix this?
🔥 great video! I'm trying to get better at JS and understanding things as soon as I look at it.
Great to hear! And thanks for watching. Please subscribe if you haven't done it yet
When im console.log(activeMenu) i got notice like this undefined, how to fix this?
How do you add a dropdown to the side bar?
nice
How do I make the sidebar static and not affect the content, thanks for the video, I hope a prompt response
Tough luck, buddy.
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.
u r covering such huge topics and u r so unpopular
Thanks @Hamsitha CS. I'm glad my content is helpful. Please subscribe if you haven't done that yet.
Great video! Helped me a lot in a project!
good content, but the audio needs improvement