![Cules Coding](/img/default-banner.jpg)
- 114
- 317 289
Cules Coding
Приєднався 8 вер 2020
Want to learn web development??
Let me teach you...
Let me teach you...
Tailwind Variants crash course with Nextjs | How to create variants in Tailwind CSS
Learn how to create variants in tailwind CSS using Tailwind variants.
Tailwind Variants is a first-class variant API library for TailwindCSS. You will learn:
1. Creating variants
2. Compound variants
3. Responsive variants
4. Slots
5. Compound slots
6. Slots with variants and so on
Docs: www.tailwind-variants.org/
NextUI tutorial: ua-cam.com/video/4f-tAcsSv54/v-deo.html
Timestamp:
0:00 Intro
2:10 How to add variants
7:25 boolean variants
10:05 responsive variants
12:45 Slots
17:05 Compound slots
18:05 Compount variants with slots
19:05 Outro
#tailwindcss #nextjs #reactjs
Contacts:
Email: thatanjan@gmail.com
Portfolio: thatanjan.vercel.app/
Blog: cules-coding.vercel.app/
Linkedin: linkedin.com/in/thatanjan/
Github: github.com/thatanjan/
Twitter: thatAnjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: www.culescoding.vercel.app/blog/setup-eslint-prettier-with-typescript-and-react
What is Client-Side Rendering?: www.culescoding.vercel.app/blog/what-is-client-side-rendering
What is Server Side Rendering?: www.culescoding.vercel.app/blog/what-is-server-side-rendering
Everything you need to know about tree data structure: www.culescoding.vercel.app/blog/everything-you-need-to-know-about-tree-data-structure
13 reasons why you should use Nextjs: www.culescoding.vercel.app/blog/13-reasons-why-you-should-use-Nextjs
Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: ua-cam.com/video/T-n0mrssDiw/v-deo.html
Setup and deploy fullstack application on Vercel and Render: ua-cam.com/video/ME3tMy5Q2qo/v-deo.html
Auth0 basics with Next.JS: ua-cam.com/video/FqxtDabMUEQ/v-deo.html
Upload images from React and Node: ua-cam.com/video/hHCabCNLmPk/v-deo.html
Chakra-UI crash course: ua-cam.com/video/hJ873mLhmFQ/v-deo.html
Next auth crash course: ua-cam.com/video/tgrvKGPmI04/v-deo.html
Build a small search engine with MongoDB: ua-cam.com/video/C6VytdSDNSk/v-deo.html
Playlists you might like:
Next.Js tutorials: ua-cam.com/play/PLEr-WXao6eSPCSujdESIOcDePkTL91FfQ.html
Build a blog using JAMstack: ua-cam.com/video/KYLBb1W1ZBA/v-deo.html
Quick tricks: ua-cam.com/video/RECwLOZdiR4/v-deo.html
Crash course: ua-cam.com/video/rSa8sUC8m_4/v-deo.html
How-to videos: ua-cam.com/video/T-n0mrssDiw/v-deo.html
Clone Blue Origin Landing Page: ua-cam.com/play/PLEr-WXao6eSNuEn9uP_BYinHKcukMbX8L.html
Stay safe and good bye.
Tailwind Variants is a first-class variant API library for TailwindCSS. You will learn:
1. Creating variants
2. Compound variants
3. Responsive variants
4. Slots
5. Compound slots
6. Slots with variants and so on
Docs: www.tailwind-variants.org/
NextUI tutorial: ua-cam.com/video/4f-tAcsSv54/v-deo.html
Timestamp:
0:00 Intro
2:10 How to add variants
7:25 boolean variants
10:05 responsive variants
12:45 Slots
17:05 Compound slots
18:05 Compount variants with slots
19:05 Outro
#tailwindcss #nextjs #reactjs
Contacts:
Email: thatanjan@gmail.com
Portfolio: thatanjan.vercel.app/
Blog: cules-coding.vercel.app/
Linkedin: linkedin.com/in/thatanjan/
Github: github.com/thatanjan/
Twitter: thatAnjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: www.culescoding.vercel.app/blog/setup-eslint-prettier-with-typescript-and-react
What is Client-Side Rendering?: www.culescoding.vercel.app/blog/what-is-client-side-rendering
What is Server Side Rendering?: www.culescoding.vercel.app/blog/what-is-server-side-rendering
Everything you need to know about tree data structure: www.culescoding.vercel.app/blog/everything-you-need-to-know-about-tree-data-structure
13 reasons why you should use Nextjs: www.culescoding.vercel.app/blog/13-reasons-why-you-should-use-Nextjs
Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: ua-cam.com/video/T-n0mrssDiw/v-deo.html
Setup and deploy fullstack application on Vercel and Render: ua-cam.com/video/ME3tMy5Q2qo/v-deo.html
Auth0 basics with Next.JS: ua-cam.com/video/FqxtDabMUEQ/v-deo.html
Upload images from React and Node: ua-cam.com/video/hHCabCNLmPk/v-deo.html
Chakra-UI crash course: ua-cam.com/video/hJ873mLhmFQ/v-deo.html
Next auth crash course: ua-cam.com/video/tgrvKGPmI04/v-deo.html
Build a small search engine with MongoDB: ua-cam.com/video/C6VytdSDNSk/v-deo.html
Playlists you might like:
Next.Js tutorials: ua-cam.com/play/PLEr-WXao6eSPCSujdESIOcDePkTL91FfQ.html
Build a blog using JAMstack: ua-cam.com/video/KYLBb1W1ZBA/v-deo.html
Quick tricks: ua-cam.com/video/RECwLOZdiR4/v-deo.html
Crash course: ua-cam.com/video/rSa8sUC8m_4/v-deo.html
How-to videos: ua-cam.com/video/T-n0mrssDiw/v-deo.html
Clone Blue Origin Landing Page: ua-cam.com/play/PLEr-WXao6eSNuEn9uP_BYinHKcukMbX8L.html
Stay safe and good bye.
Переглядів: 654
Відео
Material Tailwind crash course with NEXT.JS | Tailwind CSS | React UI Framework | Material Design
Переглядів 3,5 тис.3 місяці тому
Learn Material Tailwind with NextJS. Material Tailwind is a UI framework based on tailwind CSS and Material design. Resources: Material Tailwind: www.material-tailwind.com/ Crash courses: ua-cam.com/video/rSa8sUC8m_4/v-deo.html&pp=iAQB Next UI: ua-cam.com/video/4f-tAcsSv54/v-deo.htmlsi=uHOQTgUCZlRQErHX Timestamp: 0:00 Intro 1:25 setup 6:30 Button 10:15 Typography 11:50 Dialog 17:30 Forms 20:30 ...
NEXT UI crash course with NEXT.JS | Tailwind CSS | React UI Framework
Переглядів 9 тис.4 місяці тому
Learn Next UI easily with NextJS. Next UI is a framework based on tailwind CSS. Crash courses: ua-cam.com/play/PLEr-WXao6eSNuG2mQyV_48RQoj5p8WM_q.html Timestamp: 0:00 Intro 2:30 Setup 8:20 Button component 13:20 Link component 16:50 Dark theme 18:10 Switch between themes 22:00 Customize existing themes 32:00 Add custom theme 33:30 Override component styles 35:40 Add custom variants Contacts: Em...
NextJS Loading UI & How React Streaming and Suspense works | App Router | loading.js
Переглядів 6164 місяці тому
Learn how to use loading UI in Nextjs and how React streaming with suspense works. 0:00 Intro 0:40 how to use loading.js 3:05 Behind the scene 3:35 How react streaming with suspense works 11:10 Show loader while navigating to a page 14:00 Nested suspense component 17:35 Outro Contacts: Email: thatanjan@gmail.com Portfolio: thatanjan.vercel.app/ Blog: cules-coding.vercel.app/ Linkedin: linkedin....
Don’t make this mistake with React Context in Nextjs and how to setup correctly
Переглядів 2955 місяців тому
Avoid making this mistake with React context in Nextjs and learn how to setup correctly Blog: ua-cam.com/video/Gtc5okZWeHA/v-deo.html 0:00 Intro 0:30 The problem 2:30 Correct way to add react context 4:40 Outro Contacts: Email: thatanjan@gmail.com Portfolio: thatanjan.vercel.app/ Blog: cules-coding.vercel.app/ Linkedin: linkedin.com/in/thatanjan/ Github: github.com/thatanjan/ Twitter: twitter.c...
10 things you should know about Component composition in Nextjs
Переглядів 2495 місяців тому
You will learn 10 things you should know about Component composition in Nextjs Blog: dev.to/thatanjan/10-things-you-should-know-about-component-composition-in-nextjs-m3p 0:00 Intro 0:30 What is component composition and obvious pattern 1:55 1. Client component inside server components 3:00 2. All components are client components under a parent client component 5:00 3. No server component inside...
Setup NextJs 14 with MongoDB and Mongoose | React | instrumentation
Переглядів 2,6 тис.5 місяців тому
Learn how to setup NextJs with MongoDB and Mongoose. We will also see how to use new instrumentation feature of nextjs Blog: dev.to/thatanjan/2-ways-to-set-up-nextjs-with-mongodb-and-mongoose-4afo Code: github.com/thatanjan/nextjs-mongodb-mongoose-starter 0:00 Intro 0:40 Setup mongodb database on mongodb atlas 3:20 Connect nextjs to mongodb 6:50 Nextjs instrumentation 8:30 Add data to mongodb d...
useFormStatus | Better way to display the loading state in Nextjs forms | React | Server component
Переглядів 4325 місяців тому
In this video, you will learn a better way to display the loading state in nextjs or react forms. 0:00 Intro 0:30 Old way of showing loading state 1:30 how to use useFormStatus 6:30 Notes 8:05 Outro blog: dev.to/thatanjan/a-better-way-to-display-the-loading-state-in-nextjs-forms-with-useformstatus-28pl Contacts: Email: thatanjan@gmail.com Portfolio: thatanjan.vercel.app/ Blog: cules-coding.verc...
Firebase Cloud Storage Crash course with NextJS 14 | React
Переглядів 7255 місяців тому
Learn how to use Firebase Storage with Nextjs 14 Blog: dev.to/thatanjan/how-to-upload-images-or-files-on-firebase-cloud-storage-with-nextjs-14-3dpf We will learn how to: - Upload files - Track upload progress - Pause, resume, cancel upload - Download files - Delete files - List files in directories 0:00 Intro 1:05 Setup 4:35 How to upload files 12:10 Get upload progress 14:30 Pause, resume, can...
10. How to write simple & complex queries in Firebase Firestore in Nextjs14
Переглядів 3996 місяців тому
How to write simple & complex queires in Firebase Firestore in Nextjs14 In this video series, you will learn about how to : - Setup project with Nextjs - Add new document - Add multiple documents - Get documents - Get Realtime updates - Update documents - Delete documents - Sort and Limit data - Query data Resources: Repo: github.com/thatanjan/next-fire-yt Contacts: Email: thatanjan@gmail.com P...
9. How to sort and limit documents from Firebase Firestore in Nextjs14
Переглядів 2656 місяців тому
How to sort and limit documents t from Firebase Firestore in Nextjs14 Timestamp: 0:00 Intro 0:10 Sort documents 1:30 Limit the number of documents In this video series, you will learn about how to : - Setup project with Nextjs - Add new document - Add multiple documents - Get documents - Get Realtime updates - Update documents - Delete documents - Sort and Limit data - Query data Resources: Rep...
8. How to delete documents from Firebase Firestore in Nextjs14
Переглядів 2756 місяців тому
How to delete documents from Firebase Firestore in Nextjs14 Timestamp: 0:00 Intro 0:10 Delete specific field from a document 0:50 Delete a document 2:05 Outro In this video series, you will learn about how to : - Setup project with Nextjs - Add new document - Add multiple documents - Get documents - Get Realtime updates - Update documents - Delete documents - Sort and Limit data - Query data Re...
7. How to update documents to Firebase Firestore in Nextjs14
Переглядів 5646 місяців тому
Learn How to update documents to Firebase Firestore in Nextjs14 Timestamp: 0:00 Intro In this video series, you will learn about how to : - Setup project with Nextjs - Add new document - Add multiple documents - Get documents - Get Realtime updates - Update documents - Delete documents - Sort and Limit data - Query data Resources: Repo: github.com/thatanjan/next-fire-yt Contacts: Email: thatanj...
6. How to get real-time updates from Firebase Firestore in Nextjs14
Переглядів 7316 місяців тому
6. How to get real-time updates from Firebase Firestore in Nextjs14
5. How to get documents from firestore using Server component | Nextjs14 | Caching
Переглядів 1,3 тис.6 місяців тому
5. How to get documents from firestore using Server component | Nextjs14 | Caching
4. How to add multiple documents to firestore using Server component and server action | Nextjs14
Переглядів 9286 місяців тому
4. How to add multiple documents to firestore using Server component and server action | Nextjs14
3. How to add a Document to firestore using Server component and server action | Nextjs14 | Firebase
Переглядів 2,9 тис.6 місяців тому
3. How to add a Document to firestore using Server component and server action | Nextjs14 | Firebase
2. Setup Firebase project with Nextjs 14 | Server Component | Server Action | React
Переглядів 4,5 тис.6 місяців тому
2. Setup Firebase project with Nextjs 14 | Server Component | Server Action | React
1. Introduction to Firebase Firestore with Nextjs 14 | Server Component | Server Action | React
Переглядів 4,4 тис.6 місяців тому
1. Introduction to Firebase Firestore with Nextjs 14 | Server Component | Server Action | React
PostgreSQL Installation & Setup on Linux: Easy Guide
Переглядів 1,2 тис.8 місяців тому
PostgreSQL Installation & Setup on Linux: Easy Guide
React Hook Form crash course | Everything You Need to Know
Переглядів 7779 місяців тому
React Hook Form crash course | Everything You Need to Know
How to create modals and popups with Dialog tag in Html
Переглядів 9311 місяців тому
How to create modals and popups with Dialog tag in Html
Fuzzy Search Made Easy: Your fuse.js Basics Tutorial
Переглядів 3,1 тис.Рік тому
Fuzzy Search Made Easy: Your fuse.js Basics Tutorial
Mantine UI crash course with NEXT.JS | React UI Framework
Переглядів 19 тис.Рік тому
Mantine UI crash course with NEXT.JS | React UI Framework
How to setup and structure GRAPHQL project in Node.JS with Babel for scalability
Переглядів 198Рік тому
How to setup and structure GRAPHQL project in Node.JS with Babel for scalability
Material UI crash course with Next.js 2023 | React UI Framework | V5
Переглядів 21 тис.Рік тому
Material UI crash course with Next.js 2023 | React UI Framework | V5
How to setup and deploy fullstack(MERN) application on Vercel and Render
Переглядів 9 тис.Рік тому
How to setup and deploy fullstack(MERN) application on Vercel and Render
Auth0 basics with Next.JS | Add Google, GitHub, and Email authentication in Next.js project | React
Переглядів 7 тис.Рік тому
Auth0 basics with Next.JS | Add Google, GitHub, and Email authentication in Next.js project | React
Translate website content using Next.js internationalization and next-i18next
Переглядів 42 тис.Рік тому
Translate website content using Next.js internationalization and next-i18next
How to upload images from React with Node.js to Cloudinary part 2 | Fastify | Chakra-UI | Dropzone
Переглядів 539Рік тому
How to upload images from React with Node.js to Cloudinary part 2 | Fastify | Chakra-UI | Dropzone
I LOVE YOU SO MUCH, IN SPANISH THERE IS NOT A VIDEO LIKE YOURS, THANK YOU!!!!!!!
super like👍👍👍
hey you. the video was very helpful for me i wanted to ask u something how to connect this to my vscode
install a plugin that will allow you to connect with PostgreSQL. And then use the credentials like user name, password, db name etc to connect. Hope this Helps
in which database u created the table
'postgres' is the default db. So I created the table on that db
What is the IDE you are using? Super cool looks on everything.
I use Neovim or Neovide to be exact.
You just made me understood better, didn't know I've been making mistakes in my code... Thanks so much 🙏
Great to hear!
good serius
thanks
Why is it that when using Button it will show error to enforce some prop i dont need to add Type '{ children: string; type: "button"; }' is missing the following properties from type 'Pick<ButtonProps, "children" | "color" | "disabled" | "translate" | "form" | "slot" | "style" | "title" | "onChange" | "onClick" | "className" | "value" | "key" | "autoFocus" | ... 259 more ... | "loading">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739) (alias) const Button: ForwardRefExoticComponent<Pick<ButtonProps, "children" | "color" | "disabled" | "translate" | "form" | "slot" | "style" | "title" | "onChange" | "onClick" | "className" | "value" | "key" | ... 260 more ... | "loading"> & RefAttributes<...>>
I am not sure. I would recommend creating an issue on the repo if you are still having problem
Got a problem here when making the provider file it seems that the children is highlited red and give out an error of Binding element 'children' implicitly has an 'any' type.ts(7031)
I guess you haven't added the types for children. It should be `ReactNode`.
Thant's was helpful. Thank you! Can we change the speed of moving of the jarallax pictures? If yes, can you show, how to do this too?
I believe this is what you need. github.com/nk-o/jarallax?tab=readme-ov-file#a-javascript-way
Amazing, clear to the point
I use this video for installing and the odin project tutorial for setting postgres every time I reinstall arch, thanks!
Glad it helped
it doesnt work for me i get the styles. I consol.log them in some text input anmd it is correct but it doesnt apply i dont know why
Maybe it is worth checking if you have setup tailwind correctly
@@CulesCoding i am using in react native but it applys only sometimes
You can create an issue in the repo
Hi. I'm getting an error. Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. It posts to the database on submit, but then throws the error. It doesn't indicate which component is causing the problem.
I think you are passing unserializable data. react.dev/reference/rsc/use-server#serializable-parameters-and-return-values If you are passing a mongoose response try calling to `toObject` method. i.e `blog.toObject()`
@@CulesCoding Hi. Thanks for getting back. I think it is caused by "return newPost.save();" in the action file. It replicates what you did, so I don't know why it's giving me an error and not you!
may be try removing the `return` keyword and await the save method.
hello thanks very much
Hi! You just explained in 16 minutes something that I could not find anywhere else!
This is the library that I was looking for, not the low-level Tailwind CSS that everybody is telling us to learn! Mantine is so high level that allows you to build something great quickly, yet let you customize the low-level CSS details when someone needs them. It is just PERFECT!
what operating system are you using?
ArcoLinux (hyprland version)
@@CulesCoding cool waybar tho, at first moment i thought its customised kde
@@Chikobara thanks
how to do this using realtime database
Passing the query to `onSnapShot` function should work
@@CulesCoding thanks
@@CulesCoding I have another question, I always been trying to get data from “Users/uid” the uid is of course a actually generated uid , but the problem is that I have been trying to get the uid or any user data in that node in realtime database but all it does is return my uid in the console log
Great explanation of the Next UI. This video is very informative and easy to follow. I have just subscribed to your channel to stay updated with more content like this. Please keep up the awesome work.
Awesome, thank you!
At 2:35 you need to return the cleanup function from the useEffect callback, I mistakenly did that from iife. Just don't use iife in that case.
Thanks a lot
you didn't unsubscribe. please learn react before doing tutorials on next js.
thanks for noticing. I mistakenly return from the iife not from the useEffect callback.
Even after setting up, my components are unstyled
Can't say anything for sure. but make sure: 1. You have updated the tailwind config 2. Added the provider to your app And always follow the documentation.
@@CulesCoding I've done these exact steps
@@akshatdubey4421 Hard for me to say without seeing the code
i have the same issue
i fixed the issue by : const {nextui} = require("@nextui-org/react"); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, darkMode: "class", plugins: [nextui()], };
Thanks for the video. also one other thing. pleas share a neofetch screen shot 🤣
haha.. will do in the future.
Je viens de découvrir la chaîne UA-cam,je m'abonne
thank you
This helped a lot❤
first server component and how to load more documents?
sorry for the late reply. If you want to have pagination or infinite scroll, you need to use client components and query cursors. Because Firestore doesn't support offset values. At least in client side libraries. Hope it helped.🙂
Your explanation of how React suspense works is very clear and I love the example you used. Great work!🤗
Glad you liked it!
Looks interesting! I wish this playlist also had Authentication.
Thank you so much ❤
How can i add custom color for input component
use classname prop
@@CulesCoding can i edit input config object?
53:40 wtf my soul left my body. 1:06:09 media query hook
I never noticed the audio issue. 😅 Thank btw
can you share github repo link
Sorry, I just used some random code or code from the docs. So I didn't add them to github
The explanation ok good, but the visuals are really bad, text is not visible properly
thanks for the feedback
Looks nice 🎉
wow! your arch linux looks very good! What configuration do you have and what windows do you use? And editor??
thanks. I was using neovide as editor. My config: github.com/thatanjan/.dotfiles Though I haven't added documentation yet
@@CulesCoding thank you brother
perfect
like for Manjaro
Hey can you make a video regarding firebase rules with next js. I mean with a bit complex use case. Thanks for the video series.
Sure thing!
This is like shadcn/ui?
Well not entirely. Both of them are styled with Tailwind but Next UI abstracts way the complexity. And Shadcn allows you to copy paste the component and gives you full control over the component.
@@CulesCoding Thank you!
Next ui should be Mantine please. It's top tier
When I saw she is using Arch I knew she knows what she is talking about
I am a boy
@@CulesCoding 😁😄
@@CulesCoding With great power comes great responsibility Don't misuse your power.
I cant express how helpfull this vid is ,Really thankfull for this
Glad it helped
y la modal?
sorry?
siii justo entre para ver algo acerca de modales mantine y nada, chale me voy triste
:,c
We needed how to styled the modal like change the header's background color for example. But great course man.
@@eliezerabrahamontiverosoje2165 Well I have explained the ways you can change styles in the video. For example, you can use styles API to change the styles for modal header. mantine.dev/core/modal/?t=styles-api
what is this editor?
I use neovim
awesome idea.
Whats the theme that you are using? And I assumed its VS Code, is it?
I use neovim and theme is pywal. pywal basically generates a color scheme from your current background. github.com/dylanaraps/pywal
v nice arch setup
Thanks a lot
Pattens?
could you please clarify what you are trying to ask?