- Видео 104
- Просмотров 253 968
Bikash web
Финляндия
Добавлен 31 май 2021
I created this channel to share my learning as a full-stack web developer.
Video uploaded in this channel will be helpful for those who want to be a full-stack developer and beyond.
Occasionally I will be having a discussion with other developers and do some live coding.
These are the tech stacks I will be focusing on this channel.
HTML
CSS/SASS
JavaScript
React
Vue
Node
Express
Databases
WordPress
Thank you for watching and do not forget to subscribe :)
Bikash Sharma
Video uploaded in this channel will be helpful for those who want to be a full-stack developer and beyond.
Occasionally I will be having a discussion with other developers and do some live coding.
These are the tech stacks I will be focusing on this channel.
HTML
CSS/SASS
JavaScript
React
Vue
Node
Express
Databases
WordPress
Thank you for watching and do not forget to subscribe :)
Bikash Sharma
Junior front-end developer interview coding task - UI pagination - show more
In this tutorial, we dive into creating front-end pagination in React using TypeScript, perfect for junior developers and those preparing for front-end interviews. You'll learn step-by-step how to handle lists and implement a "Show More" button to dynamically display more items. This essential skill covers arrays, lists, state management, and hooks, crucial for modern web development.
🔹 What you'll learn:
- Setting up a React project with TypeScript
- Understanding lists and arrays in React
- Implementing pagination using state/hooks
- Dynamic list rendering based on user interaction
🔹 Who this is for:
- Junior developers looking to strengthen their React & TypeScript skills
- Anyone preparing fo...
🔹 What you'll learn:
- Setting up a React project with TypeScript
- Understanding lists and arrays in React
- Implementing pagination using state/hooks
- Dynamic list rendering based on user interaction
🔹 Who this is for:
- Junior developers looking to strengthen their React & TypeScript skills
- Anyone preparing fo...
Просмотров: 64
Видео
React drag and drop to sort the list and persist the sorted data
Просмотров 6938 месяцев назад
Book one-to-one mock interview session with me : topmate.io/bikashxsharma Join discord : discord.gg/42tS2a4D ⭐ Features - Key ideas you will learn from this video are: ⭐ 🔸 React drag and drop 🔸 React sorting the list and drag drop 🔸 React form stepper ⭐ Tech Stacks ⭐ 🔸 React 🔸TypeScript 🔸CSS 🔸 React beautiful dnd ➤ Github repo: github.com/thebikashweb/react-drag-drop-without-library ➤ Connect w...
How to do User Roles in backend and front-end #typescript #react #mernstack
Просмотров 90711 месяцев назад
In this insightful RUclips video, we delve into the intricate world of role-based user permissions in a full-stack React and Node application. We explore the critical mechanisms that govern API route permissions, ensuring that access is granted exclusively to authorized roles. Furthermore, we demystify the art of implementing user interface (UI) restrictions in React, demonstrating multiple app...
Advanced Type Partial, Pick, Omit, Record, and Keyof #typescript
Просмотров 28811 месяцев назад
🚀 Ready to take your TypeScript skills to the next level? In this in-depth tutorial, we delve into the world of advanced type manipulation in TypeScript. Join us as we explore powerful type utilities such as Partial, Pick, Omit, Record, and Keyof, and learn how to wield them effectively to supercharge your TypeScript projects. 🧐 We'll break down each type utility, demonstrating real-world scena...
How to handle accessToken and refreshToken in React and Node
Просмотров 4,4 тыс.Год назад
In this technical tutorial, we'll delve into the intricacies of JWT (JSON Web Tokens) and explore the precise steps for handling two critical tokens - the access token and the refresh token - in a secure manner on both the front-end and back-end of your application. On the front-end, we'll be working with React and TypeScript, demonstrating how to modify Axios requests to manage these tokens ef...
Forgot and Reset Password with React, Node, Express and Mongodb
Просмотров 2,8 тыс.Год назад
Unveil the magic of MERN with our quick, focused tutorial! In just a few steps, you'll transform your app's user experience by mastering the 'Forgot Password' and 'Password Reset' features. Here's what we'll cover: 🚀 Create React Pages: Craft sleek, intuitive React pages dedicated to 'Forgot Password' and 'Reset Password'. 🔗 Query Params: Learn how to use query parameters to efficiently retriev...
Fully custom react typescript global snackbar/toast bar - no external library
Просмотров 521Год назад
Learn how to create a custom global snackbar component in React using TypeScript, without any third-party libraries! This comprehensive tutorial covers everything from scratch, including the implementation of a global MobX store and customization options for urgency and colors. Elevate user experience in your React apps today! Book one-to-one mock interview session with me : topmate.io/bikashxs...
User Profile Edit with React, TypeScript, React Router, MobX | Node.js, Express.js MERN Stack
Просмотров 1,2 тыс.Год назад
Welcome to our next RUclips tutorial where we will explore the process of creating a user profile edit feature in a full-stack web application. In this video, we'll cover both the front-end and back-end implementation, using a range of technologies. Get ready to learn how to leverage React with TypeScript, React Router for navigation, and MobX for efficient state management on the front-end. On...
Build a Full-Stack URL Shortener App | Node.js, Express.js, React, MongoDB | MobX | Typescript
Просмотров 1,4 тыс.Год назад
Welcome to our RUclips tutorial on building a full-stack URL shortener app! In this video, we will guide you through the process of creating a powerful and efficient web application using a variety of technologies. By the end of this tutorial, you will have a solid understanding of backend development with Node.js, Express.js, and MongoDB, as well as front-end development using React with TypeS...
Is this the best state management for React?
Просмотров 138Год назад
Is this the best state management for React?
Creating a custom hook in React to fetch API data
Просмотров 1,1 тыс.Год назад
Creating a custom hook in React to fetch API data
URL shortener final - Mobx state management in React Typescript
Просмотров 274Год назад
URL shortener final - Mobx state management in React Typescript
URL shortener part 8 - Edit feature full stack with React Dialog Model
Просмотров 202Год назад
URL shortener part 8 - Edit feature full stack with React Dialog Model
URL shortener part 7 - React Responsive table without library #typescript
Просмотров 990Год назад
URL shortener part 7 - React Responsive table without library #typescript
URL shortener part 6 - Get urls for a user | mongoose user relation
Просмотров 122Год назад
URL shortener part 6 - Get urls for a user | mongoose user relation
URL shortener part 5 - Middlewares protected API routes | token auth | jwt token | Node Express
Просмотров 163Год назад
URL shortener part 5 - Middlewares protected API routes | token auth | jwt token | Node Express
URL shortener part 4 -React user login and signup | private and public route | access token
Просмотров 377Год назад
URL shortener part 4 -React user login and signup | private and public route | access token
URL shortener - MERN stack portfolio project part 3 | User authentication API
Просмотров 462Год назад
URL shortener - MERN stack portfolio project part 3 | User authentication API
URL shortener - MERN stack portfolio project part 2 | React setup, Components & Api calls
Просмотров 463Год назад
URL shortener - MERN stack portfolio project part 2 | React setup, Components & Api calls
URL shortener - MERN stack portfolio project part 1 | API routes and mongo db
Просмотров 1,9 тыс.Год назад
URL shortener - MERN stack portfolio project part 1 | API routes and mongo db
Alert Component and variants in Figma and React TypeScript using chatgpt
Просмотров 280Год назад
Alert Component and variants in Figma and React TypeScript using chatgpt
JavaScript Coding Interview for Junior Developer ✅🔴
Просмотров 866Год назад
JavaScript Coding Interview for Junior Developer ✅🔴
You must know this javascript array and object modification
Просмотров 3 тыс.2 года назад
You must know this javascript array and object modification
What is state management ? Front-end state management explained
Просмотров 5 тыс.2 года назад
What is state management ? Front-end state management explained
Node js create api server | Node.js for beginner CRUD actions - REST API
Просмотров 1 тыс.2 года назад
Node js create api server | Node.js for beginner CRUD actions - REST API
Handle parents props and function from children in React
Просмотров 1882 года назад
Handle parents props and function from children in React
All you need to learn typescript | React Typescript
Просмотров 6502 года назад
All you need to learn typescript | React Typescript
Can't believe you only have this few views on these videos. Glad you took the time to record and edit this. You helped me pick this up quick!
sorry but Why are you using access & refresh token logic if you are storing tokens in storage ? LOL
Well this was not a video regarding a best security practice but a quick concept on how token refresh works.
Hey, nice video! But there is one question I faced: are you sure that removing token from a user invalidates it? I may be mistaken but it seems like even after setting resetToken field to an empty string token is still successfully verified... that's the behavior I got unfortunately))
What do you mean? Token verification is done using JWT, so it should not behave like that export const veryResetToken = async ( token: string ): Promise<boolean | string> => { return new Promise((resolve, reject) => { jwt.verify( token, JWT_SECRET, async (err: any, decoded: { email: string; id: string }) => { if (err) { resolve(false); } else { try { resolve(decoded.email); } catch (error) { resolve(false); } } } ); }); }; However, if a client is still sending a reset token, you are right, there is a bug, so before this line: return new Promise((resolve, reject) => { jwt.verify( You can add a check so you try to see if user's table has resetToken or not, and also another check whether this token is same as the one getting in request. if (!user.resetToken || user.resetToken!==resetToken) return false
everything is okay however it's not a good practice to store token in localstorage. appreciate your effort
Well you can put it to cookies but either way if token has a low validity time, and tokens are refreshed, I would not worry that much. Idea is if someone sees/gets token, they have anyway auth power. But sure there can be better security major taken. Thanks for your comment.
thank you bro that 's help me a lot
Bro i need full video,please make it
There is one in my channel
I dont get it. Why cant we just use "global variables"? This seems like an awful lot of "tech" and infrastructure and Im not even sure what is the problem it should solve...
you can if that can observe the state change and re-renders components
works fine
How about situations where new custom roles can be created by the user, would conditional rendering still work?
In that case you can create proper roles array or object. Then you can check if user.roles.has(roleRequired), E.g user1.roles= new Set([“admin”,”user”,”editor”,”visitor” ]) user1.roles= new Set([”user”,”editor”,”visitor” ])
Kk 87864
😉 Promo sm
I hate React js mainly because it couldn't even handle global variables to use it on the entire application. Have you ever heard such bad practice on C++, C#, VB, Python, golang, etc... In fact, there we use 100s of windows where we share the same global variables. Variables are stored in memory, that is global. Why should we use Redux, Context, Zustand etc... And spend a lot of time to re-create another set of code to program those ? Can you please explain why such pathetic architecture in Web applications ? If someone writes the web app on Python/golang, can't they use global variables to maintain the states ?
Nice
thx man
Hi sir this vedio is password recovery for admin
Why are we using useRef for storing the indexes? Can't we just use useState?
thx bro
this video is very useful for me. thanks
Amazing, very useful and save my time
daju nepali hunu parxa hehe
Ho bhai 😀
The description states "in a secure manner"... though, from a security standpoint; it's not advised to store either token in localStorage. The refresh token should be stored as an httpOnly Secure cookie (not accessible via JavaScript) and the access token should be kept in memory. That said, page refreshes will result in loss of access tokens... so you'd have to plan for instances where there is no access token but a valid (and inaccessible) refresh token in the httpOnly cookie. One solution could be to store the refresh token's expiration date in cookies or local storage... just be sure to delete it when logging out.
Nice Structuring with Typescript Loved it.
when i route from one page to another page, it shows undefined error
Here is another video which answers most of your questions such as sorting in mobile devices, persist the sorting in localStorage. ruclips.net/video/6v8HL0aVKDs/видео.html
how am i going to sent a function as a prop in route?
It is possible but why would you need that?
@@thebikashweb There is a basket and design section in My Pages section. I want to add the design I made in the design section to the basket with a button. I couldn't quite figure out how to do it.When I press the Add to Basket button, I add them to my products list, then I need to show these products in the cart. Deletion and addition operations can also be done in the cart. For this, I send the add function as props, but it doesn't work.
@@Ap-ui6kk thats nothing to do with routes, you can use a state management for that. Check country api app in my channel where I have redux used to do so. Maybe I should start live coding session to help on this kind of situation
I have been on this for more than 3 days , you helped me to fix it within seconds. Thank you so much keep going
This video save me from 4 days of stress thks
Need video how to save position for example in local.storage
Here you go ruclips.net/video/6v8HL0aVKDs/видео.htmlsi=QXpkY1FLdoyPcyXQ in this video you’ll see how the sorted position can be persisted
Wow, your video is incredibly vivid and descriptive! You're absolutely killing it, bro! Keep up the awesome work!
Thank you so much, you explained the concept in simple ways.
How do mobile phones drag and drop?
good content, annoying sub alert :)
To fix the red wiggly line that appears from 9:31 and on you just need to put all the div inside a return ( <div key={todo.id} ... > </div>)
Thanks. It was very simple solution to understand
Thank you. So many of these videos include out of date third party libraries, and they're just so confusing and unnecessary. Even though this video is in ts and not js, I did exactly what I wanted to do in my js project in <30 mins with this video's help. I adjusted it to match my needs, but your framework was perfect. Thanks so much.
How can we store this new arrangement in a database so it persists?
I did discuss that in the video. You just need to update those column values in the database. So for everything that has changed, you call a bulk-update. It is up-to you on how you have your API/backend setup.
okay, thanks.@@thebikashweb
How can we store this new arrangement in a database so it persists?
does this listing persist if i refresh ?
Chcek another video in my channel about proper way of handling data! Check container drag and drop
@@thebikashweb thanks!
cant find it, is it this one? ruclips.net/video/CkjhqUbgvHo/видео.html @@thebikashweb
Hey thanks for this! Could you please also do a video or just here in reply let me know how we can do this using server action and useOptimistic Hook? Im using useOptimistic but confused how to do the sorting when i add new item and it instantly shows but the whole scenario seems a bit confusing.. Thanks anyways I have subbed and hope to see more from you.
Doesn't work on mobile 😞
It will not, those click events or drag events does not work as it is in mobile devices. I will make new video soon about that.
I didn't know you could do this with React! Genuinely a really helpful tip! Thanks! :)
No problem!
Hi bro ..can u make video abt jwt with access and refresh token with redux.role based authentication...
Hey, checkout my latest videos! I have them uploaded!!
the most straightforward tutorial ive seen about protected routes, nice
That is not an optimal solution. A normal company expects an absolutely different way to solve this problem, better to use a stack, or a recursion at least. But with a recursion, you will come across to maximum call stack
Well these videos are intended to Junior developer or beginners! Optimal solution depends on the problem, project, time-line, company etc. So yes, you are right this may not be an optimal solution but I don't think people are expecting to find an optimal solution in some random RUclips shorts :D
Thanks, bro!!!! God bless! Forte abraço do Brasil!
thanks that was really helpful
Exactly what I was looking for. Thanks!
Amazing content over React. I guess right now I've not find better channel for react than this.
Promo SM ☹️
Thanks for the great tutorial. He completely helped me to develop an entire billing module. Grateful