Code Genix
Code Genix
  • 13
  • 280 673
Build a File Manager in React: Multi Uploads, Progress Bars, and Smooth Animations!
In this tutorial, you'll learn how to build a file manager in React where users can drag and drop multiple files with smooth animations and real-time upload progress. These files will be uploaded in parallel to a Node.js server running on your localhost. If an upload is interrupted, the progress indicator will turn red.
Once uploaded, the files will be displayed in a paginated Data Grid fetched from the server. Users can sort by columns, manage, download, or perform bulk actions on multiple files.
We’ll primarily focus on state management throughout the app, including handling user input for file selection (with type and quantity validation), uploading files in parallel, updating progress, and managing data on the client with caching, mutation, and invalidation.
#file_upload #react #upload_progress #multer #file_manager
🔗 Links:
Frontend Project Github Repository (Don't forget to leave a star⭐) :
github.com/codegenixdev/file-manager-frontend-tutorial
Backend Project Github Repository:
github.com/codegenixdev/file-manager-backend-tutorial
ua-cam.com/video/AYO4qHAnLQI/v-deo.htmlsi=8FtdSXy95KSBXtuc
ua-cam.com/video/7anLE_RoDwU/v-deo.htmlsi=MMgeW5ABpRAVDofI
Commands and Code Snippets:
gist.github.com/codegenixdev/4bdfb1be037f6f334b4e231ab8217034
React Drop Zone
Material UI
Zustand
React Query
⭐️ Contents ⭐
00:00:00 Intro
00:01:28 Project Setup
00:07:22 Create upload drop zone
00:15:14 Instantiate zustand store
00:30:20 Setup nodejs express multer upload serv
00:33:00 Upload mutations and server requests with react query and axios
00:36:30 Upload progress with axios
00:43:40 Data grid with sorting for file manager with pagination
00:46:00 Data grid queries to api with react query
01:07:00 Bulk actions for files data grid
Переглядів: 5 095

Відео

Dynamic Forms in React using Zod & React Hook Form (BEST Strategy!)
Переглядів 7 тис.3 місяці тому
Creating dynamic forms in React and TypeScript, where form validation adapts based on user actions, is essential for handling complex forms. Implementing such functionality can be a bit tricky, but it can be done clearly and concisely with minimal code. In this tutorial, we will learn how to implement dynamic forms and dynamic validations in React TypeScript using React Hook Form and Zod, speci...
3D Parallax Hover Effect in React
Переглядів 1,1 тис.4 місяці тому
This cool 3D parallax hover effect can be achieved using pure React and Tailwind. It creates the illusion that different components and layers have depth, making them appear detached from the background. We will create a reusable and maintainable component for this effect, allowing us to use it throughout our entire project wherever we want. #react #tailwindcss #parallax #3d 🔗 Links: Commands a...
Drizzle ORM Tutorial - Full Drizzle Course for Beginners
Переглядів 15 тис.5 місяців тому
Discover Drizzle, a modern, type-safe ORM that's lightweight and highly performant. Learn how to define and manage database schemas in TypeScript and access your data in a SQL-like manner. Drizzle stands out for its flexibility and performance, making complex queries simple and efficient. In this tutorial, we'll cover ORM basics, self-hosting a database with Docker, and dive into a full project...
Master the React ecosystem in 2024
Переглядів 53 тис.6 місяців тому
In the React js ecosystem, selecting the right library combination is crucial. Before starting a project, ask yourself these two questions: 1- What is the main goal of the project? 2- How complex is the project? Depending on the answers, the correct library combination will vary. Full Tanstack Query Course: ua-cam.com/video/3e-higRXoaM/v-deo.htmlsi=N5wbCkRVPjPlIYzK Full Zustand State Management...
Zustand Tutorial for Beginners - The Only Course You Will Ever Need
Переглядів 31 тис.7 місяців тому
This is the most comprehensive "Zero to Hero" Zustand course available on UA-cam. You will learn everything related to it through practical examples, best practices, and integrate it with TypeScript and React as quickly as possible to create an eCommerce application with an amazing modern reactive shopping cart and products page. Zustand is a minimalist yet powerful state management library for...
Video Scrolling in React - How to Sync Page Scroll with Video Playback
Переглядів 38 тис.7 місяців тому
If you want to sync a video playback with the amount of scrolling a user has done in React, just follow these steps. You will learn how to set up an image sequence playback sync scrolling (the amount that user has scrolled) in React and Framer Motion. How to sync video (images sequence) playback with page scroll in React? #react #framer_motion #scrolling 🔗 Links: Project on Github: github.com/c...
React Hook Form Tutorial (Zod + MUI) - Full Beginner to Advanced Course
Переглядів 17 тис.7 місяців тому
This is the most complete zero-to-hero tutorial you can find for free on UA-cam for React Hook Form (forms in React) Typescript. I spent a large amount of time on this tutorial, so liking and subscribing means the world to me! In this tutorial, you will learn how to handle the most complex CRUD form scenarios in React and completely integrate it with Zod and Material UI. If you only want to lea...
SWR React Tutorial - Complete Course for Beginners
Переглядів 16 тис.11 місяців тому
This comprehensive course will guide you through the easiest and most modern approach to fetching data and managing server state using SWR (stale while revalidate) in React or Next.js projects. As recommended by Vercel for Next.js projects, SWR is an ideal choice. If you're solely using React, you can still follow along seamlessly. This concise yet comprehensive tutorial will delve into all the...
React Query Tutorial V5 - Full Tanstack Query Tutorial for Beginners
Переглядів 89 тис.Рік тому
In this tutorial, you will learn everything related to TanStack Query, formerly known as React Query. After watching this video, I guarantee that you will understand every concept of this library and will be able to confidently start working with it. #react #react_query #tanstack_query 🔗 Links: Project Github Repository: github.com/codegenixdev/31_react_query_tutorial Fake Server Backend Reposi...
Full Responsive Design in MUI (Material UI) Course - React Next.js
Переглядів 6 тис.Рік тому
There are many ways that we can make our design responsive in material ui based on different breakpoints, in this video you will learn all the ways that you can make your material ui mui project responsive based on breakpoints in a nextjs react or any react project. #react #nextjs #mui #responsive 🔥 Related Videos: ua-cam.com/video/_SQZbgTLCMg/v-deo.html 🔗 Links: Project Github Repo: github.com...

КОМЕНТАРІ

  • @curiousprogrammer90
    @curiousprogrammer90 3 дні тому

    Thanks a lot, awesome! Btw, how would you handle the situation with default values where for example I have a boolean question type of filed (radio group, yes/no - true/false, like your Education level but no default checked) but i do not want either one checked by default? :) Should I set it do undefined or null? How should I set the schema for such fields? Thanks! :)

  • @GabruGiggles
    @GabruGiggles 4 дні тому

    @codegenix Amazing tutorial. At around 53 minutes, when you delete a todo, everything works, but in my console, I do see the deleted todo being re-fetched as well, resulting in a 404 because it is not available. I tried searching for ways to avoid tell tanstack query to not fetch it again but still, nothing. Any idea?

  • @yoskokleng3658
    @yoskokleng3658 7 днів тому

    please help tell me how to run generate and migrate commands for a schema other than the default public schema, without using pgSchema (as it is fixed)? Also, could you tell me how to establish a connection with Drizzle ORM using dynamic schemas? Thanks

  • @alexandredomingosfilho5275
    @alexandredomingosfilho5275 9 днів тому

    I have a question. Is it possible to share state between components, such as... Opening a component's popover and closing the popover using a child component?

  • @Md.MahamudulHasan-zp9qq
    @Md.MahamudulHasan-zp9qq 12 днів тому

    Best crash course on TanStack Query. Thanks man!

  • @shafiq_ramli
    @shafiq_ramli 14 днів тому

    What should I learn first before I dive into this tutorial? I don't understand the typescript syntax at 7:47

  • @EhsanKhanahmadi
    @EhsanKhanahmadi 21 день тому

    Thank you very much for this video. May I ask where are you from?

    • @codegenix
      @codegenix 19 днів тому

      Are dadash chera nemishe😂❤️. Iran karaj

    • @EhsanKhanahmadi
      @EhsanKhanahmadi 18 днів тому

      🤣🤣 damet garm movafagh bashi

  • @devlhb3474
    @devlhb3474 22 дні тому

    I want to start a new project, and I would like an example of a project structure

  • @dundotgg
    @dundotgg 22 дні тому

    DO BETTER-AUTH. YOU WILL BE A LIVE SAVER FOR ALL OF YOUR VIEWERS

  • @codingwitharsalan
    @codingwitharsalan 27 днів тому

    Ham vatan🎉

  • @alirezamohammadi9691
    @alirezamohammadi9691 Місяць тому

    thanks alot for this great tutoraial compatriot(damet garm dadash😉) and I have a suggestion for you : bro it's better to teach with simplicity and focus on the main topic instead of using diffrent UI libs to distract your audience

    • @codegenix
      @codegenix 23 дні тому

      Thanks for the tip dadash❤️!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Місяць тому

    excellent tutorial and very good quality, I hope to see more material like this, greetings.

    • @codegenix
      @codegenix 23 дні тому

      I'm really glad that you liked it bro. Thanks alot

  • @khoihoang8888
    @khoihoang8888 Місяць тому

    if I understood it correctly. Instead of using the useMutation which can give you lifecycle state of the status isPending, isSuccess, isError etc... you are handling that state by yourself? if so, then what is the point to use useMutation (except to invalidate the cache) vs you can just use directly the httpClient you created? The useMutation hook treats the mutate action as one single mutation, you’re seeing a collective status for the group of files rather than individual statuses.

  • @developer_dev_2007
    @developer_dev_2007 Місяць тому

    Thank you So much bro ❤🤘🤘, East and west you are the best

  • @mmaarafat
    @mmaarafat Місяць тому

    Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?

  • @mmaarafat
    @mmaarafat Місяць тому

    Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?

    • @codegenix
      @codegenix Місяць тому

      You're very welcome. AWS and almost every provider is banned in my country and I cannot access them

  • @demircaner
    @demircaner Місяць тому

    Thank you for the great video. I really want to see a combination of React Hook Form and React Step Builder.

    • @codegenix
      @codegenix Місяць тому

      Great suggestion!

  • @RamaGuptaOfficial
    @RamaGuptaOfficial Місяць тому

    too much ads

  • @mammad_mpk1309
    @mammad_mpk1309 Місяць тому

    i think you have presian accent, good job

  • @fatheyabdelslam7684
    @fatheyabdelslam7684 Місяць тому

    Don't you think there is too much repeated code in schema specially in zod Uonion

  • @Abbatyya
    @Abbatyya Місяць тому

    you're amazine bro

  • @Abbatyya
    @Abbatyya Місяць тому

    Please what would you said between nextjs and remix, i'am quandring about these framework, i've done some project on nextjs, but its overwhelming to me but because of it unstable upgrade, and i heard about remix. please can you help me to dispelling this quandring to me. thanx

  • @РомаАбаров-ь2б
    @РомаАбаров-ь2б Місяць тому

    Sorry for bad English. You make great videos. How to combine several schemes in zod into one (so that its own validation works on its own form))? I'm using 3 forms in a project

  • @mehdifada-yi5074
    @mehdifada-yi5074 Місяць тому

    khaste nashid awli bod <3

  • @azogprophet4835
    @azogprophet4835 Місяць тому

    omg dude.. it's amazing... keep make video about multiple form again

    • @codegenix
      @codegenix Місяць тому

      Thank you, I will

  • @AvikNayak_
    @AvikNayak_ Місяць тому

    Great! You made video on something i was looking for at the correct time.

    • @codegenix
      @codegenix Місяць тому

      I'm so glad you liked it

  • @jailton247
    @jailton247 2 місяці тому

    Man, you don’t know my happiness founding this video, that’s exactly what I was looking for, a have a json with folders and it’s files from a Spring Boot API and don’t have the interface, thank you so much

    • @codegenix
      @codegenix Місяць тому

      You're welcome. I'm really glad that it was helpful

  • @AlexSmith-ms9xb
    @AlexSmith-ms9xb 2 місяці тому

    You talk waaaaaay to fast and jump from file to file!!!!! I don't really feel that a beginner can understand the way Zustand works with this tutorial. "The Only Course You Will Ever Need" is an overstatement.

    • @codegenix
      @codegenix Місяць тому

      Thanks for your feedback🙏

  • @mohammadzeyghami
    @mohammadzeyghami 2 місяці тому

    mashtio o portaradar

  • @wolfie8748
    @wolfie8748 2 місяці тому

    So good! Can you also make videos about API routes in next.js / auth etc

  • @Fox_Coder
    @Fox_Coder 2 місяці тому

    ایرانی ؟

  • @sagarpatel7246
    @sagarpatel7246 2 місяці тому

    Can't believe in order to achieve the same animation I used a linear equation by taking scrollY as one variable and image number as another varible but whole tanked while checking responsiveness..

  • @sagarpatel7246
    @sagarpatel7246 2 місяці тому

    You Sir have got a subscriber🖖

    • @codegenix
      @codegenix Місяць тому

      Thanks you so much

  • @kirillbaryba746
    @kirillbaryba746 2 місяці тому

    Welcome back, man! 😎

  • @istvanytamas8929
    @istvanytamas8929 2 місяці тому

    Thanks for your great content on RHF and Zod! I have a quick question-do you know if it's possible to nest discriminated unions within each other using Zod in TypeScript? I'm trying to structure a more complex validation schema and wondering if there's a clean way to handle that. I always run into errors when i try to pass discriminated unions to z.discriminatedUnion() options. Would love to hear your thoughts or see an example if it's something you've come across. Thanks in advance!"

  • @druganov962
    @druganov962 2 місяці тому

    my fellow iranian brother in code

  • @BartoszDurczak-m8y
    @BartoszDurczak-m8y 2 місяці тому

    Good tutorial thanks.

    • @codegenix
      @codegenix 2 місяці тому

      Glad it was helpful!

  • @cykoravi
    @cykoravi 2 місяці тому

    Example is good but to be honest i fu***up 😵😵

  • @vercieli
    @vercieli 2 місяці тому

    Your doing a complex examples try going from basic examples to complex ones

  • @wolfie8748
    @wolfie8748 2 місяці тому

    Thank you!!! Also really lovedd your font and theme color can you tell me ?

    • @codegenix
      @codegenix 2 місяці тому

      @wolfie8748 I'm really glad that you liked it. I'm using JetBrainsMono Nerd Font and Dracula theme

  • @rkpers1420
    @rkpers1420 2 місяці тому

    React hook form 3 hrs vid is worth having 100k subs

    • @codegenix
      @codegenix 2 місяці тому

      You made my day. Thank you!

  • @rkpers1420
    @rkpers1420 2 місяці тому

    You r awsome especially react hook form is best of bests

    • @codegenix
      @codegenix 2 місяці тому

      I really appreciate it. Thanks alot!

  • @Oceanus169
    @Oceanus169 2 місяці тому

    Keep going! More contents! 🔥

    • @codegenix
      @codegenix 2 місяці тому

      Thank you! Will do!

  • @derciojds
    @derciojds 2 місяці тому

    Man thank you, found your channel a week ago and I'm just working in a project with this exact feature

    • @codegenix
      @codegenix 2 місяці тому

      Glad I could help!

  • @moustaphaotf
    @moustaphaotf 2 місяці тому

    I really like your explanation, very clear and simplified ^^

    • @codegenix
      @codegenix 2 місяці тому

      Glad to hear that!

    • @moustaphaotf
      @moustaphaotf 2 місяці тому

      @@codegenix I would appreciate if you made a tutorial on SSR Components

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx 2 місяці тому

    Bro please do this same with next js and aws s3 upload

    • @codegenix
      @codegenix 2 місяці тому

      Sure bro. It's on my schedule

  • @hasan-afzal
    @hasan-afzal 2 місяці тому

    Build it with nextjs tailwind shas cn and try to place the logic in one file. If you check the taplio it's paid but you can get the idea of there assests library by any video. And most important don't write your code it should align with theme properly. So most of the people like me can directly consume them in his code

    • @codegenix
      @codegenix 2 місяці тому

      Thanks for your amazing feedback. Gonna consider it

  • @bangunny
    @bangunny 2 місяці тому

    Have you tried Mantine UI ?

    • @codegenix
      @codegenix 2 місяці тому

      No I haven't yet. Do you recommend it?

    • @bangunny
      @bangunny 2 місяці тому

      @@codegenix i do indeed, not too bloated while they have lots of useful components!, easy to customize as well

    • @codegenix
      @codegenix 2 місяці тому

      Gonna give it a try. Thank you🙏

  • @RatherBeCancelledThanHandled
    @RatherBeCancelledThanHandled 2 місяці тому

    I absolutely love your tutorials. Thank you great job ! I'd love to see your docker set up for api microservices and managing dev vs prod.

    • @codegenix
      @codegenix 2 місяці тому

      Thanks, will do!