Bikash web
Bikash web
  • Видео 104
  • Просмотров 253 968
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...
Просмотров: 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...
React Kanban Board Drag and Drop
Просмотров 3,1 тыс.Год назад
React Kanban Board Drag and Drop
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
React easy state management Zustand
Просмотров 9632 года назад
React easy state management Zustand
React drag and drop sort list
Просмотров 50 тыс.2 года назад
React drag and drop sort list
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

Комментарии

  • @MrSullyTheKnight
    @MrSullyTheKnight 12 дней назад

    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!

  • @sanjivchaudhary7259
    @sanjivchaudhary7259 12 дней назад

    sorry but Why are you using access & refresh token logic if you are storing tokens in storage ? LOL

    • @thebikashweb
      @thebikashweb 6 дней назад

      Well this was not a video regarding a best security practice but a quick concept on how token refresh works.

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

    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))

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

      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

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

    everything is okay however it's not a good practice to store token in localstorage. appreciate your effort

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

      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.

  • @na1kel802
    @na1kel802 2 месяца назад

    thank you bro that 's help me a lot

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

    Bro i need full video,please make it

  • @TamasOlasz-mw6wt
    @TamasOlasz-mw6wt 4 месяца назад

    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...

    • @thebikashweb
      @thebikashweb 6 дней назад

      you can if that can observe the state change and re-renders components

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

    works fine

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

    How about situations where new custom roles can be created by the user, would conditional rendering still work?

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

      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” ])

  • @AsifAli-fz8dm
    @AsifAli-fz8dm 4 месяца назад

    Kk 87864

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

    😉 Promo sm

  • @Gaamaa-oz5ef2lf3n
    @Gaamaa-oz5ef2lf3n 5 месяцев назад

    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 ?

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

    Nice

  • @user-ud4bj9vc7l
    @user-ud4bj9vc7l 5 месяцев назад

    thx man

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

    Hi sir this vedio is password recovery for admin

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

    Why are we using useRef for storing the indexes? Can't we just use useState?

  • @user-wc5tc8vr6q
    @user-wc5tc8vr6q 6 месяцев назад

    thx bro

  • @MatinKhani-yx7cg
    @MatinKhani-yx7cg 7 месяцев назад

    this video is very useful for me. thanks

  • @user-vt3hv2rv6t
    @user-vt3hv2rv6t 7 месяцев назад

    Amazing, very useful and save my time

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

    daju nepali hunu parxa hehe

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

    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.

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

    Nice Structuring with Typescript Loved it.

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

    when i route from one page to another page, it shows undefined error

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

    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

  • @Ap-ui6kk
    @Ap-ui6kk 8 месяцев назад

    how am i going to sent a function as a prop in route?

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

      It is possible but why would you need that?

    • @Ap-ui6kk
      @Ap-ui6kk 8 месяцев назад

      @@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.

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

      @@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

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

    I have been on this for more than 3 days , you helped me to fix it within seconds. Thank you so much keep going

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

    This video save me from 4 days of stress thks

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

    Need video how to save position for example in local.storage

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

      Here you go ruclips.net/video/6v8HL0aVKDs/видео.htmlsi=QXpkY1FLdoyPcyXQ in this video you’ll see how the sorted position can be persisted

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

    Wow, your video is incredibly vivid and descriptive! You're absolutely killing it, bro! Keep up the awesome work!

  • @ANKITSHARMA-ck6ln
    @ANKITSHARMA-ck6ln 10 месяцев назад

    Thank you so much, you explained the concept in simple ways.

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

    How do mobile phones drag and drop?

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

    good content, annoying sub alert :)

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

    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>)

  • @user-zj2gp7qx1y
    @user-zj2gp7qx1y 11 месяцев назад

    Thanks. It was very simple solution to understand

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

    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.

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

    How can we store this new arrangement in a database so it persists?

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

      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.

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

      okay, thanks.@@thebikashweb

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

    How can we store this new arrangement in a database so it persists?

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

    does this listing persist if i refresh ?

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

      Chcek another video in my channel about proper way of handling data! Check container drag and drop

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

      @@thebikashweb thanks!

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

      cant find it, is it this one? ruclips.net/video/CkjhqUbgvHo/видео.html @@thebikashweb

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

    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.

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

    Doesn't work on mobile 😞

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

      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.

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

    I didn't know you could do this with React! Genuinely a really helpful tip! Thanks! :)

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

    Hi bro ..can u make video abt jwt with access and refresh token with redux.role based authentication...

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

      Hey, checkout my latest videos! I have them uploaded!!

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

    the most straightforward tutorial ive seen about protected routes, nice

  • @user-yj2jk5tn5y
    @user-yj2jk5tn5y Год назад

    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

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

      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

  • @viniciusm.m.7822
    @viniciusm.m.7822 Год назад

    Thanks, bro!!!! God bless! Forte abraço do Brasil!

  • @FGA-47
    @FGA-47 Год назад

    thanks that was really helpful

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

    Exactly what I was looking for. Thanks!

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

    Amazing content over React. I guess right now I've not find better channel for react than this.

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

    Promo SM ☹️

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

    Thanks for the great tutorial. He completely helped me to develop an entire billing module. Grateful