- 13
- 280 673
Code Genix
Приєднався 8 бер 2023
Join me on my journey to discover the art of coding and programming. Through my videos, I share my personal experiences, insights, and tips and tricks to help you improve your coding skills. From building websites to creating software, I cover various topics to help you become a better programmer. Subscribe to my channel to stay in the loop!
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
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...
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! :)
@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?
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
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?
Best crash course on TanStack Query. Thanks man!
What should I learn first before I dive into this tutorial? I don't understand the typescript syntax at 7:47
Thank you very much for this video. May I ask where are you from?
Are dadash chera nemishe😂❤️. Iran karaj
🤣🤣 damet garm movafagh bashi
I want to start a new project, and I would like an example of a project structure
DO BETTER-AUTH. YOU WILL BE A LIVE SAVER FOR ALL OF YOUR VIEWERS
Ham vatan🎉
fadat❤️
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
Thanks for the tip dadash❤️!
excellent tutorial and very good quality, I hope to see more material like this, greetings.
I'm really glad that you liked it bro. Thanks alot
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.
Thank you So much bro ❤🤘🤘, East and west you are the best
You are the best
Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?
Thank you so much. If possible, can you make a video about AWS that we should learn as web developer?
You're very welcome. AWS and almost every provider is banned in my country and I cannot access them
Thank you for the great video. I really want to see a combination of React Hook Form and React Step Builder.
Great suggestion!
too much ads
i think you have presian accent, good job
Don't you think there is too much repeated code in schema specially in zod Uonion
you're amazine bro
You too
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
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
khaste nashid awli bod <3
Mokhlesam soltan
omg dude.. it's amazing... keep make video about multiple form again
Thank you, I will
Great! You made video on something i was looking for at the correct time.
I'm so glad you liked it
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
You're welcome. I'm really glad that it was helpful
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.
Thanks for your feedback🙏
mashtio o portaradar
Fadaaaa❤️
So good! Can you also make videos about API routes in next.js / auth etc
ایرانی ؟
Are sotoon
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..
You Sir have got a subscriber🖖
Thanks you so much
Welcome back, man! 😎
❤️❤️
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!"
my fellow iranian brother in code
Mokhlesammmm
Good tutorial thanks.
Glad it was helpful!
Example is good but to be honest i fu***up 😵😵
Your doing a complex examples try going from basic examples to complex ones
Thank you!!! Also really lovedd your font and theme color can you tell me ?
@wolfie8748 I'm really glad that you liked it. I'm using JetBrainsMono Nerd Font and Dracula theme
React hook form 3 hrs vid is worth having 100k subs
You made my day. Thank you!
You r awsome especially react hook form is best of bests
I really appreciate it. Thanks alot!
Keep going! More contents! 🔥
Thank you! Will do!
Man thank you, found your channel a week ago and I'm just working in a project with this exact feature
Glad I could help!
I really like your explanation, very clear and simplified ^^
Glad to hear that!
@@codegenix I would appreciate if you made a tutorial on SSR Components
Bro please do this same with next js and aws s3 upload
Sure bro. It's on my schedule
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
Thanks for your amazing feedback. Gonna consider it
Have you tried Mantine UI ?
No I haven't yet. Do you recommend it?
@@codegenix i do indeed, not too bloated while they have lots of useful components!, easy to customize as well
Gonna give it a try. Thank you🙏
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.
Thanks, will do!