When legend like Sonny is on, your job is to pay close attention. He is literally helping you support your dream by explaining and coding at the same time. This is rare.
Год назад+10
I have good memories in this channel. Last year I followed the live actions and learnt React a little. And as a data scientist I can build my own services now. Although Django and Flask are fine, this is just another level of awesomeness. Thank you. When you build it for the first time it feels dumb and you are just repeating and copying. After 3-4 builds you slowly start understanding. So beginners shouldnt frustrate and give up.
This guy helped me got my brand new first job, and i'm always looking forward to see his stuff, i'm going to my third week in the job and still using everything he taught us, thx a lot
If you opted to use the component from Next instead of the tag this will cause an error with hot reload down the road when you go to test in dropping a new file at about 2:07:00 for the instant file loading, you will either need to swap back to or find a work around.
hey man i am getting this error Uncaught Error: Failed prop type: The prop `href` expects a `string` or `object` in ``, but got `undefined` instead. do you know how to solve it?
@@AvikNayak_ use the tag instead of link. I never found a solution as to why the link tag does not receive the href, my only thought is because nextjs preloads s the data may not be fetched by the time the Link attempts to render, and possibly the tag doesn't care because its not preloading the page and only needs the URL when the link is clicked by the client
Thank you Sonny for an amazing video! To avoid "@ts-ignore" we can do the following: import { type DefaultExtensionType, FileIcon, defaultStyles } from "react-file-icon";
If you are using /src folder in your projects, the middleware.ts file needs to go in the /src folder not the root If it is in the wrong place you will see the following error in your terminal ○ Compiling /_error ... ✓ Compiled /_error in 654ms (921 modules) and the dashboard will show up just fine.
Hey sonny i really like your videos, i know it’s irrelevant at the time but can you make a short series or clones working with vue js / nuxt js too. It would be a great help!
Hi Sonny, If we added the following line, publicRoutes: ["/"]; then to redirect to a route `/dashbaord` but it's not working as excepted. in the terminal getting following message: INFO: Clerk: The request to /dashboard is being redirected because there is no signed-in user, and the path is not included in `ignoredRoutes` or `publicRoutes`. To prevent this behavior, choose one of: 1. To make the route accessible to both signed in and signed out users, add "/dashboard" to the `publicRoutes` array passed to authMiddleware 2. To prevent Clerk authentication from running at all, pass `ignoredRoutes: ["/((?!api|trpc))(_next.*|.+\.[\w]+$)", "/dashboard"]` to authMiddleware 3. Pass a custom `afterAuth` to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes
@Sonny, you mentioned at 1:21 in video about your going to do. Firebase videos - any ETAs? I am very interested in it, also on their messaging/nootificaitons services too..?
@@SonnySangha#PAPAFAM all the way!!!😄🔥❤️❤️❤️ One day when I make it, I’ll do well to hit you up and support whatever you’re doing. Not all superheroes wear capes. You’re my hero, bro🫶🏾
In you next video when you have to use files and uploads can you use uploadthing , if more people agree with me I want you to use it pls, your videos are soo good keep going
I was trying to move the firebaseConfiguration to env file. But it is giving bucketNotFound error. I tried to debug and found out that projectId and storageBucket are the culprits. If they are passed directly, it's working as expected. How to fix this? Also the rename and delete modal are lagging in performance. how to optimize it?
is there a way to use Firebase only on the server and still get to use storage and have Realtime updates on the client, or must firebase always completely be on the client? I see Sonny didn't add firebase keys to the env file, is that wrong or is it completely fine?
hello sonny can i build nextjs app showing pdf page but not allowed the viewer to downlaods it using react-pdf pdfjs and i store the file in the any database.
Issues faced and their solution: 1)Error: Clerk: auth() was called but Clerk can't detect usage of authMiddleware() - I was using node version 18, updated to 20 and it got resolved
hi i hope you are well Plz tell me that dropbox paid version has token usage time option i.e i want token can not be expire so please guide me i am waiting for your reply.
if the skeleton files (server loaded files) are available without any delay then why are calling files again in the client side and causing more delay? i didn't understand the logic behind it. was it just for the skeleton effect? or any other logic behind it?
I believe to get files from server/firebase should alway be a network call. if not next.js will cache the page and we may not see latest updates. so this delay is acceptable.
2:07:13 How is that possible it refreshes de table after uploading another file? I really dont see the part of code where he rettriggers the call to get all the files again. After uploading a file the application should not rerender anything since it is not changing its state.
"I'm encountering an issue when declaring 'open' with 'isDeleteModalOpen'. I'm getting an error saying 'Type '(open: boolean) => void' is not assignable to type 'boolean | undefined.' Could you provide guidance on resolving this issue? It's happening around the 02:26:00 mark of the tutorial."
To explore or use a new/different library. Yes, firebase can do the same, but it's always good to learn something new. To increase options when you will building. My opinion!
![BRASIL vs. URUGUAY [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 12](http://i.ytimg.com/vi/-hWBAuxF1eY/mqdefault.jpg)
When legend like Sonny is on, your job is to pay close attention. He is literally helping you support your dream by explaining and coding at the same time. This is rare.
I have good memories in this channel. Last year I followed the live actions and learnt React a little. And as a data scientist I can build my own services now. Although Django and Flask are fine, this is just another level of awesomeness. Thank you.
When you build it for the first time it feels dumb and you are just repeating and copying. After 3-4 builds you slowly start understanding. So beginners shouldnt frustrate and give up.
So true! Even I learnt the same way
When Next.js 14 dropped, Sonny was the first channel that came to mind for an amazing new tutorial
Thank you I appreciate you!
This guy helped me got my brand new first job, and i'm always looking forward to see his stuff, i'm going to my third week in the job and still using everything he taught us, thx a lot
This is an AWESOME Comment thank you i'm so glad I could help you land your job!
Sonny you are on of the best teachers on RUclips. Believe me I've been a professor for 5 years. You do have a talent to teach
Thank you so much! This means a lot!! #PAPAFAM 💯🙏🏽
If you opted to use the component from Next instead of the tag this will cause an error with hot reload down the road when you go to test in dropping a new file at about 2:07:00 for the instant file loading, you will either need to swap back to or find a work around.
Thanks so much man
@@Crypt2349 If you find a work around or run into any issues let me know happy to help. This may no longer be an issue with new versions of next.
@@DigitalAlchemyst thanks so much man
hey man i am getting this error Uncaught Error: Failed prop type: The prop `href` expects a `string` or `object` in ``, but got `undefined` instead. do you know how to solve it?
@@AvikNayak_ use the tag instead of link. I never found a solution as to why the link tag does not receive the href, my only thought is because nextjs preloads s the data may not be fetched by the time the Link attempts to render, and possibly the tag doesn't care because its not preloading the page and only needs the URL when the link is clicked by the client
Thank you Sonny for an amazing video!
To avoid "@ts-ignore" we can do the following:
import { type DefaultExtensionType, FileIcon, defaultStyles } from "react-file-icon";
If you are using /src folder in your projects, the middleware.ts file needs to go in the /src folder not the root
If it is in the wrong place you will see the following error in your terminal
○ Compiling /_error ...
✓ Compiled /_error in 654ms (921 modules)
and the dashboard will show up just fine.
sidenote this also caused an issue with tailwind.
What I did too as per the Docs, then found this... Confirmed on my end too!
@@jamestuttle Yeah i did see that in the docs later on after making this comment.
I could never imagine your tutorials could be this good man. Thank you
Thank you so much Sonny !!
You are best teacher !!!
Such a great project to follow, thanks!
Hey sonny i really like your videos, i know it’s irrelevant at the time but can you make a short series or clones working with vue js / nuxt js too.
It would be a great help!
Loved your video bro learned a few new things :) found it (this vid) looking for a shawncn tuto. You got a new sub.
Yoo sunny you are inspirations💕
From the best best best on RUclips, thanks.
FIRE STREAM 🔥🔥🤩
Minimum Asset should be provided to start such a video url, images url, (images used) so that it will be easy.
Hi Sonny,
If we added the following line,
publicRoutes: ["/"];
then to redirect to a route `/dashbaord` but it's not working as excepted.
in the terminal getting following message:
INFO: Clerk: The request to /dashboard is being redirected because there is no signed-in user, and the path is not included in `ignoredRoutes` or `publicRoutes`. To prevent this behavior, choose one of:
1. To make the route accessible to both signed in and signed out users, add "/dashboard" to the `publicRoutes` array passed to authMiddleware
2. To prevent Clerk authentication from running at
all, pass `ignoredRoutes: ["/((?!api|trpc))(_next.*|.+\.[\w]+$)", "/dashboard"]` to authMiddleware
3. Pass a custom `afterAuth` to authMiddleware, and replace Clerk's default behavior of redirecting unless a route is included in publicRoutes
36:34 bro was hurt by the very suggestion!
@Sonny, you mentioned at 1:21 in video about your going to do. Firebase videos - any ETAs? I am very interested in it, also on their messaging/nootificaitons services too..?
I know react/nextjs are your forte but have you ever thought of having a build using angular, vue or svelte kit?
This guy are amazing programmer 🎉
Great job , watching from Libya
Sonny, I love the fact that you used Shadcn, Zustand and Clerk😍😍😍👏🏾. It’s like you read my mind. You’re the best, bro 🫶🏾
Maybe I have a super power to read minds.... muhahahaha thanks for the support!!! #PAPAFAM all the way!
@@SonnySangha#PAPAFAM all the way!!!😄🔥❤️❤️❤️
One day when I make it, I’ll do well to hit you up and support whatever you’re doing. Not all superheroes wear capes. You’re my hero, bro🫶🏾
In you next video when you have to use files and uploads can you use uploadthing , if more people agree with me I want you to use it pls, your videos are soo good keep going
Thanks Sonny that was awesome!
I m facing problem when i add on clerk .. please help me out and how I can I reach out you to show error
I was trying to move the firebaseConfiguration to env file. But it is giving bucketNotFound error. I tried to debug and found out that projectId and storageBucket are the culprits. If they are passed directly, it's working as expected. How to fix this?
Also the rename and delete modal are lagging in performance. how to optimize it?
is there a way to use Firebase only on the server and still get to use storage and have Realtime updates on the client, or must firebase always completely be on the client? I see Sonny didn't add firebase keys to the env file, is that wrong or is it completely fine?
hello sonny can i build nextjs app showing pdf page but not allowed the viewer to downlaods it using react-pdf pdfjs and i store the file in the any database.
Totally agree with you about the live debugging. Keep it going!!
🙏🏽💯
Issues faced and their solution:
1)Error: Clerk: auth() was called but Clerk can't detect usage of authMiddleware() - I was using node version 18, updated to 20 and it got resolved
same error came for me,i updated to node version 20 but not working
Awesome Sonny 🎉🎉
No share functionality for files?
Please what is the point of the file reader at 1:16:20? why do we not just call upload file directly with the file?
Nice one bro, Weldone... 👍
Thank you so much 😀
hi i hope you are well
Plz tell me that dropbox paid version has token usage time option i.e i want token can not be expire so please guide me i am waiting for your reply.
if the skeleton files (server loaded files) are available without any delay then why are calling files again in the client side and causing more delay? i didn't understand the logic behind it. was it just for the skeleton effect? or any other logic behind it?
I believe to get files from server/firebase should alway be a network call. if not next.js will cache the page and we may not see latest updates. so this delay is acceptable.
Am waiting for some React native App Projects please make 3 to four apps like your long NEXT JS video please
2:07:13 How is that possible it refreshes de table after uploading another file? I really dont see the part of code where he rettriggers the call to get all the files again. After uploading a file the application should not rerender anything since it is not changing its state.
React Firebase hooks uses a realtime listener, this is why it’s always listening and updating due to changes in the database!
@@SonnySangha Didnt know that. Thank you very much for your fast answer and all the content you make :)
When i drop and drag the file it doesn't push through firebase i did exactly the same you did maybe it was the import ?
NVM haha ijust forgot to pass the onDrop on DropzoneComponent thanks
Dope 🔥
"I'm encountering an issue when declaring 'open' with 'isDeleteModalOpen'. I'm getting an error saying 'Type '(open: boolean) => void' is not assignable to type 'boolean | undefined.' Could you provide guidance on resolving this issue? It's happening around the 02:26:00 mark of the tutorial."
I have the same bug @sonny save us 😢
Did anyone get the same error: `Error: Clerk: auth() was called but Clerk can't detect usage of authMiddleware()`
Maybe you're using node version 18, update it to v20 and it will get resolved
@@HarshvardhanGaikwad6969 doesn't work, bruhhh
Background music was too loud and unnecessary.
Feedback noted
very good but it so cool
I am from Pakistan ❤❤❤❤
clerk did not work for me
do you have solution
Need more info, nobody will be able to help with little info! :D
thanks but i was able to pull it off it had @@SonnySanghato do with the middleware not placed correctly.
track id for 50:00 ?
please add timeline of video. very hard to view video
Added!
🔥🔥💖
Please does anyone have the constant.ts file ?
i created this one:
export const COLOR_EXTENSION_MAP: { [key: string]: string } = {
txt : "#C0C0C0",
doc : "#0000FF",
docx : "#00008B",
pdf : "#FF0000",
ppt : "#FFA500",
pptx : "#FF8C00",
xls : "#008000",
xlsx : "#006400",
jpg : "#00FFFF",
png : "#008B8B",
gif : "#FFFF00",
mp3 : "#800080",
mp4 : "#4B0082",
zip : "#A52A2A",
rar : "#8B4513",
html : "#FFD700",
css : "#FF4500",
js : "#FF6347",
json : "#2E8B57",
xml : "#9932CC",
svg : "#800000",
php : "#8A2BE2",
java : "#F08080",
py : "#FF69B4",
cpp : "#B22222",
c : "#A0522D",
md : "#4B0082",
csv : "#2F4F4F",
log : "#4682B4",
exe : "#8B0000",
dll : "#800000",
bat : "#A52A2A",
sh : "#808000",
sql : "#008080",
};
after implementing the skeleton Loader (2/2) i get an empty array when i consol log the skeletonFile , do you have any idea why?
17K
Good video. Why did you select clerk for auth and you do not select firebase as you already used firebase for storage?
To explore or use a new/different library. Yes, firebase can do the same, but it's always good to learn something new. To increase options when you will building. My opinion!
Are you located in Dubai??
30056