- 11
- 217 059
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!
3D Parallax Hover Effect in React
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 and Code Snippets:
gist.github.com/codegenixdev/e463b383aa7a784e9a5474bd849bef31
Project Github Repository (Don't forget to leave a star⭐) :
github.com/codegenixdev/3d-parallax-tutorial
⭐️ Contents ⭐
⌨️ 00:00 Intro
⌨️ 00:25 Project Setup
⌨️ 01:44 Component Overview
⌨️ 02:43 Mouse Context and it's Hook
⌨️ 12:33 Re-use 3D Parallax Effect Wherever You Want
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 and Code Snippets:
gist.github.com/codegenixdev/e463b383aa7a784e9a5474bd849bef31
Project Github Repository (Don't forget to leave a star⭐) :
github.com/codegenixdev/3d-parallax-tutorial
⭐️ Contents ⭐
⌨️ 00:00 Intro
⌨️ 00:25 Project Setup
⌨️ 01:44 Component Overview
⌨️ 02:43 Mouse Context and it's Hook
⌨️ 12:33 Re-use 3D Parallax Effect Wherever You Want
มุมมอง: 488
วีดีโอ
Drizzle ORM Tutorial - Full Drizzle Course for Beginners
มุมมอง 6Kหลายเดือนก่อน
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
มุมมอง 50K3 หลายเดือนก่อน
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: th-cam.com/video/3e-higRXoaM/w-d-xo.htmlsi=N5wbCkRVPjPlIYzK Full Zustand State Managemen...
Zustand Tutorial for Beginners - The Only Course You Will Ever Need
มุมมอง 21K3 หลายเดือนก่อน
This is the most comprehensive "Zero to Hero" Zustand course available on TH-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
มุมมอง 36K4 หลายเดือนก่อน
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
มุมมอง 13K4 หลายเดือนก่อน
This is the most complete zero-to-hero tutorial you can find for free on TH-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
มุมมอง 13K8 หลายเดือนก่อน
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
มุมมอง 71K9 หลายเดือนก่อน
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
มุมมอง 5Kปีที่แล้ว
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: th-cam.com/video/_SQZbgTLCMg/w-d-xo.html 🔗 Links: Project Github Repo: github.co...
Is shadcn slow+
It's basically tailwind so it is very fast
It's basically tailwind so it is very fast
what font and theme are you using > I really like it
The font is "JetBrainsMono Nerd Font" and the theme is Dracula bro👌
@codegenix Excellent lecture on React Query V5. You become Pro in React Query after watching this Video Wondering why this man has only few thousand subscribers. Please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
Love you bro. You made my day. I'm really glad you liked it❤️
please do redux toolkit practical video
The combination of Zustand and react query is a very common pattern nowadays. Redux can be really overkill for most of the scenarios
@@codegenix ok Appreciate your reply , so then please consider real would project the combination of Zustand and react query with hook form with postgre database
This video is useful. I also like your vs code setup. Can you make a separate video for your vs code setup?
Really loved your suggestion. Sure I'm gonna create a video for it bro
Absolutely incredible tutorial with relevant examples, thank you my man!
My pleasure!
wow is so good!
Glad you liked it🙏
hi @codegenix - Is there a reason why you don't use the InferInsertModel function from Drizzle, but rather use the Zod schema? Doesn't the InferInsertModel already help you define what is optional during an insert versus required fields based on which columns are optional or generated by default? And then you can just use Pick<InsertModel, ...> in the frontend?
@imho7992 I use zod here because I want to have access to the columns constraints (like how many characters is valid, or is the field required or not). It is more than just infering the types. We want to also infer the validations so we can inform the user how many characters he can enter in the desired field. For example when the user is creating a post (in the frontend), he shouldn't enter more than 255 characters for the post name (as it is set in the column schema) and if he enters more than 255 characters, he will see a red error message below the field in real time. So the user's input data validation is always sync with the columns constraints and it will make the codebase cleaner and also the ux much better
@@codegenix i see, that makes sense, thanks for your reply!
So Elegant so beautyful Just looking like a WOW course Amazing Content & Course
You made my day. I'm so glad you liked it
What are perfect combination for document based documentation based project
docusaurus.io is the perfect choice for your scenario
The most comprehensive Zustand tutorial on TH-cam. Thank you brother for taking this tutorial that deep and understandable.
You cannot imagine how much happy I am now. Thanks for your amazing feedback
your example is too complicated, and you got lost in implement the e-commerce site. I dont care the interface of your product, I'm here for zustand knowledge.Pick a simple example, dont waste my time
Thanks for your feedback
Your country is show😂
@egplay8653 so?
@3:13 i was the one in 92.5%. but n0w done subscribe!
Appreciate it bro❤️
i hated programming after watching your tutorial
@drivebuss8079 Is there any problem with the tutorial?
Thanks for sharing this tutorial, I really found it helpful. This is something I'm following and I'll recommend it to a few others as well. Thanks !
You're very welcome bro
Subscribed
Thanks bro
this is the best ever tutorial on tan stack query. Thank you
I'm so glad you liked it🙏
Most complete tutorial on entire TH-cam... I saw about 10 of them, and IMHO this is one of the best. Important details are told here...
You cannot imagine how much you made me happy. I really appreciate your kindness
Really good tutorial. I loved that cache trick at the end. Keep up the good work buddy.
Glad you liked it
"Project on Github" I downloaded it. When start the index.html i just see a white background thats it. 🤔
@3pcgi959 It's an react application created with vite. First make sure you have node v20 or above installed, then run "npm install" command then "npm run dev" to start the development server
Like this video a lot. But its getting really annoying that Tanstack is getting repeated over and over again..
Yes you're right
If you dont understand the lecture , I will suggest you to listen it twice .Then you will be very thankful to this man.
I'm glad that it was helpful to you
Well said! Excellent lecture. Wondering why this man has only few thousand subscribers. @codegenix please do add more lectures which you are well versed with, I guarantee you reach million subscribers soon
With a creativity like yours, I think itd be great if you make some framer motion videos. Nice vid btw, very clear structure and explanation as always!
I'm really glad that you liked it. I really consider your suggestion
Nice , like and sub
Thanks so much
Thanks man. Came here from freecode video to support you. :)
I'm ready glad bro. Thanks❤️🙏
Hi, Why do we need react-query in NextJS, where we can use server action in server component. Would you please make a tutorial about NextJS, react-query, and zustand? It is going to be valuable . Thank you in advance.
@ashfakhossainevan791 When your app requires high interactivity and reactivity, such as in an admin dashboard, using server actions can be a headache and may not be suitable for these scenarios (although server actions do have their appropriate use cases). Due to the lack of experience among many TH-camrs and the misguided hype they create, it often leads to confusion among developers. Just ask one of them how they handle and maintain 600 API calls in their application.
very nice video
Thanks
Too much boilerplate setup at the begining, I came here to learn just drizzle.
I know what you mean. But this is the minium setup needed to start these types of tutorials. But if you check the time line, you can head over to the specific chapter of the video that you are looking for.
OMG this is the BEST TUTORIAL in TH-cam of React Query and updated. New Sub you're gooooood. You have solved all the doubts I had
You cannot imagine how you made me happy with your amazing feedback. You are very welcome😍
yesterday i made the same effect with vanilla js , what a surprise my favorite channel on youtube today share a video how to build it with React 👌
I'm very glad that it was useful
What other tricks would you like to learn? Just let me know👌👌
animations in framer motion
Good text editor which supports table images etc…,
😅 finally uploaded something
What a tutorial 😎.... It's just what I needed 🥳!!! Thanks a lot for sharing this knowledge with us. You're a crack! 🤟
Love you broooo😍❤️
Hello. how to type a wrapper function to add devtools in dev mode? so that devtools do not end up in production. const createStore = (fn, name) => { if(process.env.node_env === "development") { return create()(devtools(fn, name)) } return create(fn, name)) }
you deserve much more subscribers, thanks btw, great explanation!
Love you bro❤️🙏
FYI: Zustand is a German word, pronounced 'tsoo-shtand'
Too hard😅
do you know if discriminated union can be replicated in yup?
@Ernuna I'm not sure. But handling unions and intersections in schema is pretty straighforward.
Hey Code Genix, are you Iranian? Btw, loved your tutorials...
Are sotoonam. Fadat sham❤️
Great content, but hard to follow, no clear title for each component
Which part?
will this work with nextjs?
@bhargavkumar I don't recommend it
@@codegenixwhat do you recommend?
pashmam condign sal bud doable intro mohtavai migashtm merci az to😍😍
I was wondering why you chose to create a sequence of images rather than just using a <video> element and scrubbing through it using js on scroll
Because it is not responsive at all with the worst performant. Using canvas for these types of problems is really great.
Hey @codegenix , please create a tutorials/ more videos on production grade full stack development. you are really doing thing in so clean and production software way. i want to learn more about best practices.
@sujjee I'm so glad that you find my videos in this way. More on the way...
very helpful, much appreciated
You're welcome!
Great tutorial. If I need to store objects removed from useFieldArray remove method to another array for subsequent use. How can I achieve this?
@user-se6mi3fe8w I'm glad you liked it! Would you explain more about your problem? Maybe I can help you.
@@codegenix How can I send you the codes I have problems with? I find I can't post codes here.
Lazy query ?
@muratasarslan2359 Would you explain more? What do you want to achieve exactly?
I really like your teaching style. However, I'd rather see an actual backend. Not fond of the fake server you use
Good idea👍
very succint & easy to follow. Thank you 😃
Glad you enjoyed it!