00:01 Create a full stack URL shortener app with ReactJS, Tailwind CSS, Supabase, and Shadcn UI 02:00 Implemented production grade features like analytics and dashboard using Tailwind CSS, Supabase, Shadcn UI. 06:04 Setting up Tailwind CSS, Supabase, and Shadcn UI 08:06 Setting up project with API key and URL for Supabase integration 12:14 Setting up unique custom URLs and creating a table for click tracking. 14:11 How to secure hosting and domain for your app 17:57 Creating routes using the browser router function 20:00 Setting up different pages and routes using React Router 24:04 Creating a new component for header with logo and banner 26:01 Implement programmatic navigation using useNavigate from React Router DOM 29:48 Building the landing page with Shadcn UI components 31:43 Setting up UI components in React 35:37 Customizing button styles and accordion component 37:32 Using useState to manage URL state in React 41:34 Handling search parameters in the URL and showing a prompt to login 43:34 Creating API for Login and Sign Up 47:30 Installing React Spinners and yep Library for input validation 49:34 Implementing a loading indicator and error handling 53:37 Validation logic for email and password input fields 55:32 Creating a custom hook for handling API calls 59:08 Using fetch hook and Supabase for API calls 1:01:04 Setting up Superbase URL 1:05:01 Setting up context API in React with create context and provider 1:07:15 Implementing user authentication and session management 1:11:07 Creating user profile with file storage and database interaction 1:13:09 Creating an API for signing up users with a profile picture 1:17:09 Updating sign up flow and file uploading functionality. 1:19:09 Implementing authentication logic for redirecting users to appropriate routes based on login status 1:23:10 Implementing User Profile and Logout Functionality 1:25:25 Implementing local storage and fixing UI errors 1:29:16 Adding dummy data for testing purposes 1:31:21 Setting up policies and APIs for QR code functionality 1:35:38 Rendering stats and user-created links 1:37:39 Setting up UI elements for link creation 1:41:50 Implementing search functionality and error handling in the project 1:43:47 Making data dynamic for URLs and clicks 1:47:59 Setting up environment variables for URL handling 1:49:53 Customizing UI elements and adding functionality to URL shortener project 1:53:54 Creating logic for deleting URLs 1:56:00 Creating URL functionality for dashboard 1:59:58 Creating API for URL shortening 2:01:56 Show popup with long URL pre-filled when user lands on homepage 2:05:50 Creating form state and schema 2:07:31 Setting up form values and handling URL changes 2:11:41 Handling loading state and form validation 2:13:36 Implementing error handling and API call in the URL shortener form 2:17:52 Creating an API to store user stats like device location 2:19:42 Fetching long URL and storing clicks in the database 2:23:48 Created new APIs for fetching URL details and click stats. 2:25:52 Building the URL shortener page 2:29:54 Adding buttons and QR code to the Link Card 2:31:57 Implementing conditional rendering for fetching and displaying stats. 2:36:04 Cumulating location data for multiple cities 2:38:01 Creating city count data from stats array 2:42:05 Mapping data and rendering in a chart 2:43:56 Building a complete URL shortener project with React JS, Tailwind CSS, Supabase, and Shadcn UI. 2:47:39 Setting up and testing the React app functionality
Best frontend UA-cam channel , if i have to recommend frontend tutorials i will recommend ur channel over udemy courses for best projects and interview preparation
Day 4 ✅ Thank you so much for this amazing course.❤ 2:49:13 Just now I have finished this project You deployed this in hostinger but Can I deploy this in vercel or any other free platform please reply 🙏
Hello Bro, i completed this project, but i face w issues now.... 1. Whenever i create new short url, I can't able to see that in Supabase DB 2. I can't see the clicks of new urls and stats, i click that link many times but 0 is in my clicks Can u help me in this bro ?
@@RoadsideCodersir what are the prerequisites for this project? Please I beg to you bring some projects like your 2 years old chat app where only html css javascript knowledge was required and more things you will explain along the way please help on that
At 5:53 if you are getting this error: "No import alias found in your tsconfig.json file", then You just have to add ./ in front of src in your tsconfig.json/jsconfig.json file "paths": { "@/*": ["./src/*"] },
at 22:07 if you are getting the error: Identifier 'Link' has already been declared, then Rename the custom Link component to avoid name conflicts with the Link component from react-router-dom. Update the import statement for your custom component: then Update the route configuration to use the renamed component.
When will you explain JWT authentication and authorisation technique & Redux OR Redux Toolkit on any React Application or project so that we can learn the concept????
@@RoadsideCoder Hello Mr Piyush following this tutorial from the beginning, and got following error at creating dashboard section "invalid input syntax for type uuid: "[object Object]" trying to resolve but helpless could u please see this once. thank you
Impressive content 👏 Hey bro can you make a tutorial on these thing 😅 1. Supabase production level authentication with next js gmail otp and magic link 2. How to make delivery dashboard I'm following you from long time maybe u remember i suggest you to make ui library in insta 😂
{ "message": "No API key found in request", "hint": "No `apikey` request header or url param was found." } ye error dikha rha when I click on my short url , Anybody have idea gow to resolve it?
Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead. getting this error please help '
Sir can you help to deploy it on vercel or render many audience is struggling it and you havent provided any solution to this nor replying to it ..i request you to help... Thank you
@@RoadsideCoder Sir problem is not the deployment, the problem is after deployment the redirect thing is not working when deployed on vercel and render ..that's the main issue many of are us facing ...if you can provide a solution to this it will be helpful
Hello Bro, i completed this project, but i face w issues now.... 1. Whenever i create new short url, I can't able to see that in Supabase DB 2. I can't see the clicks of new urls and stats, i click that link many times but 0 is in my clicks Please resolve this issue!!!
What's up bro I have a question for you Did you write all this offhead or used some resources? If you wrote it off head or used resources can you share how you did it? Cause those are m*dd JavaScript right there bro...
I request to make video on how to secure VITE_SUPABASE_KEY and VITE_SUPABASE_URL as these keys are available in production build js chunk file. Anyone can view it from network tab
I followed every step in this video, still the website is completely blank, I thought it work but I wasted all my time, pls sir if you could help me....
@@RoadsideCoder Sir how can I connect you personally as I've invested 4 hours in doing code with you but still it's not working, Sir pls help me in running of my project, already I've the full source code with me, where I should send you, so that you can verify it, pls sir help me 🙏🙏
Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)
Hi!!! Please make tutorial on ai photo enhancer web app development like Picwish and cutout pro..
Does this video include the backend tutorial too? I'm just a beginner so would this video be sufficient?
00:01 Create a full stack URL shortener app with ReactJS, Tailwind CSS, Supabase, and Shadcn UI
02:00 Implemented production grade features like analytics and dashboard using Tailwind CSS, Supabase, Shadcn UI.
06:04 Setting up Tailwind CSS, Supabase, and Shadcn UI
08:06 Setting up project with API key and URL for Supabase integration
12:14 Setting up unique custom URLs and creating a table for click tracking.
14:11 How to secure hosting and domain for your app
17:57 Creating routes using the browser router function
20:00 Setting up different pages and routes using React Router
24:04 Creating a new component for header with logo and banner
26:01 Implement programmatic navigation using useNavigate from React Router DOM
29:48 Building the landing page with Shadcn UI components
31:43 Setting up UI components in React
35:37 Customizing button styles and accordion component
37:32 Using useState to manage URL state in React
41:34 Handling search parameters in the URL and showing a prompt to login
43:34 Creating API for Login and Sign Up
47:30 Installing React Spinners and yep Library for input validation
49:34 Implementing a loading indicator and error handling
53:37 Validation logic for email and password input fields
55:32 Creating a custom hook for handling API calls
59:08 Using fetch hook and Supabase for API calls
1:01:04 Setting up Superbase URL
1:05:01 Setting up context API in React with create context and provider
1:07:15 Implementing user authentication and session management
1:11:07 Creating user profile with file storage and database interaction
1:13:09 Creating an API for signing up users with a profile picture
1:17:09 Updating sign up flow and file uploading functionality.
1:19:09 Implementing authentication logic for redirecting users to appropriate routes based on login status
1:23:10 Implementing User Profile and Logout Functionality
1:25:25 Implementing local storage and fixing UI errors
1:29:16 Adding dummy data for testing purposes
1:31:21 Setting up policies and APIs for QR code functionality
1:35:38 Rendering stats and user-created links
1:37:39 Setting up UI elements for link creation
1:41:50 Implementing search functionality and error handling in the project
1:43:47 Making data dynamic for URLs and clicks
1:47:59 Setting up environment variables for URL handling
1:49:53 Customizing UI elements and adding functionality to URL shortener project
1:53:54 Creating logic for deleting URLs
1:56:00 Creating URL functionality for dashboard
1:59:58 Creating API for URL shortening
2:01:56 Show popup with long URL pre-filled when user lands on homepage
2:05:50 Creating form state and schema
2:07:31 Setting up form values and handling URL changes
2:11:41 Handling loading state and form validation
2:13:36 Implementing error handling and API call in the URL shortener form
2:17:52 Creating an API to store user stats like device location
2:19:42 Fetching long URL and storing clicks in the database
2:23:48 Created new APIs for fetching URL details and click stats.
2:25:52 Building the URL shortener page
2:29:54 Adding buttons and QR code to the Link Card
2:31:57 Implementing conditional rendering for fetching and displaying stats.
2:36:04 Cumulating location data for multiple cities
2:38:01 Creating city count data from stats array
2:42:05 Mapping data and rendering in a chart
2:43:56 Building a complete URL shortener project with React JS, Tailwind CSS, Supabase, and Shadcn UI.
2:47:39 Setting up and testing the React app functionality
Does this video include the backend tutorial too? I'm just a beginner so would this video be sufficient?
Bro you're just a hidden gem. Your video should reach to many developers.
Best frontend UA-cam channel , if i have to recommend frontend tutorials i will recommend ur channel over udemy courses for best projects and interview preparation
Thank u so much 💖
very underrated channel, this channel need more subs 🔥
Day 4 ✅
Thank you so much for this amazing course.❤ 2:49:13
Just now I have finished this project
You deployed this in hostinger but Can I deploy this in vercel or any other free platform please reply 🙏
yes, u can deploy on vercel as well
@@RoadsideCoder Thank you soo much I will deploy and share here asap
@@1Bipul hey bro you deployed on vercel?
Hello Bro, i completed this project, but i face w issues now....
1. Whenever i create new short url, I can't able to see that in Supabase DB
2. I can't see the clicks of new urls and stats, i click that link many times but 0 is in my clicks
Can u help me in this bro ?
Thats so great need more project like these.
More Coming!
@@RoadsideCodersir what are the prerequisites for this project?
Please I beg to you bring some projects like your 2 years old chat app where only html css javascript knowledge was required and more things you will explain along the way please help on that
@@chakrabarti9634 Sure bro, will bring mern projects too! You can alse follow thi with basic react knowledge
i am getting Failed to fetch error at 1:01:20, how can i fix it?
Thanks for making a project using these techstack
Please continue this type of tutorial ❤
Amazing video waiting for more!
What a hidden GEM 😎😎😍😍
No import alias found in your tsconfig.json file. GETTING THIS ERROR! PLEASE HELP 05:50
form last 1 year im looking for this type of project specialy this url shortner application ,i appreciate to your work need more such projects video
Thank you
Did you deploy it on vercel?
Pls help me how to deploy it on vercel
@@RandomReqrdid u deployed on vercel?
At 5:53 if you are getting this error:
"No import alias found in your tsconfig.json file", then
You just have to add ./ in front of src in your tsconfig.json/jsconfig.json file
"paths": {
"@/*": ["./src/*"]
},
at 22:07 if you are getting the error: Identifier 'Link' has already been declared, then Rename the custom Link component to avoid name conflicts with the Link component from react-router-dom. Update the import statement for your custom component: then Update the route configuration to use the renamed component.
bro is back
✌️
I dont think so anybody will be able to watch this project whole and complete it but still I am doing
why bro i just think about these to complete
Great Teaching Piyush
Thanks !
Good video and want part 2
Thanks man, helped a lot
Did you deploy it on vercel?
If yes then please tell me how to do it.
@@RandomReqr Sorry i didnt
timestamp : 28:00
Can you please explain or make video on kafka MQ and the redis for the same url shortener
thnk for full stack, make more like this
More to come!
When will you explain JWT authentication and authorisation technique & Redux OR Redux Toolkit on any React Application or project so that we can learn the concept????
Hands down the best channel for learning frontend development. You teach us how to think and go with the flow to make projects. Thank you🫶
Thanks man! Great to hear!
great project
Thanks
@@RoadsideCoder My pleasure sir
Bucket not found i get this error please help me toh solve this error
Thanks a lot for this amazing project tutorial, can we deploy in vercel or any free hosting sites
Yes, you can
@@RoadsideCoder Hello Mr Piyush following this tutorial from the beginning, and got following error at creating dashboard section "invalid input syntax for type uuid: "[object Object]" trying to resolve but helpless could u please see this once.
thank you
Did you deploy it on vercel?
If yes then please tell me how to do it.
leaving bookmark
56:15
How did you made that cinematic showcase of project plz tell
Adobe Premiere Pro
2:21:02
Brother please make the second part of this video. ❤
bhaiya is this project is impactful for my resume
7:30 Supabase
23:00 made with
40:20 Supabase auth
1:09:25 Supase storage
1:27:00 Supabase security
1:46:00 Supabase
Nice ❤
Thanks 🔥
Impressive content 👏
Hey bro can you make a tutorial on these thing 😅
1. Supabase production level authentication with next js gmail otp and magic link
2. How to make delivery dashboard
I'm following you from long time maybe u remember i suggest you to make ui library in insta 😂
Noted! Thanks for the suggestion.
Damn Bro your killing the content
Thanks mate!
@@RoadsideCoder Can I use this and build the same is it ok
Yeah sure!
Can someone please tell me how to deploy this project in vercel?
Please help me if anyone has completed it.
Have u done it on vercel?
failed to fetch when creating table in Supabase ... please help
Great
Getting an error,429:Too many requests for the ipapi,how to solve it, kindly help me with it!
Use Kafka for analytics
{
"message": "No API key found in request",
"hint": "No `apikey` request header or url param was found."
}
ye error dikha rha when I click on my short url , Anybody have idea gow to resolve it?
able to resolve? please help
Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead. getting this error please help '
What benefit does supabase have over firebase?
Its open source
Can i follow this along as a react js beginner?
no
Sir can you help to deploy it on vercel or render many audience is struggling it and you havent provided any solution to this nor replying to it ..i request you to help... Thank you
U can check this video on how to deploy it on vercel - ua-cam.com/video/EqV55KO6ujU/v-deo.html
@@RoadsideCoder Sir problem is not the deployment, the problem is after deployment the redirect thing is not working when deployed on vercel and render ..that's the main issue many of are us facing ...if you can provide a solution to this it will be helpful
Will check this bro
@@RoadsideCoderThank you sir ! So much appreciated
Hii bro....i have face issue in creating user in supabase ...can u help me
can you recommend any source to deploy this in vercel or netlify
here - ua-cam.com/video/EqV55KO6ujU/v-deo.html&lc=UgzFoY--Rv6HGrxHmEh4AaABAg
@@RoadsideCoder bhaiya host to kr diya vercel pe pr redirect ni kr ra vo original url pe koi specific reason mai 5 baar check kiya code
@@MoviesWallah69 Did you solve this error?
@@AquibSayyed-wv2mj yeah the link he gave is pretty good u can deploy it in vercel very easily
@@MoviesWallah69 how the problem of redirection is solved , ig it still persists
Hello Bro, i completed this project, but i face w issues now....
1. Whenever i create new short url, I can't able to see that in Supabase DB
2. I can't see the clicks of new urls and stats, i click that link many times but 0 is in my clicks
Please resolve this issue!!!
Is this beginner friendly Supabase used here
Means did you explain the things
Yes everything - beginner friendly
@@RoadsideCoder thanks ❤️
I am a little confused because both the page and the component look similar. Why do we call them by two different names?
Because pages contain the files that are imported in the router, its just a good convention that I follow
some time code not understand
we need part 2
Do i have to host it before it works?
no
@@RoadsideCoder I mean the redirect-link, did I have to host it before the redirection of the link works
it will work on your local too, if u wanna shar to someone else then u have to host
@@RoadsideCoder Thanks man It work perfectly
@@oluwanifemiorimoloye-ww6nf hi are u face any issue while completing the project
Day 3 project not done yet
Keep going!
Bhai yeh drop-down menu kuch samajh nhi aara hain ki jaise import kru mein
docs dekhlo ek bar
Ho gya solve bhaiya 😊
ist day
00:31:13
00:44:39
Hey can you make a video on supabase vs firebase
Sure
@@RoadsideCoder Thank you :)
Hi If you know remix js please create a video on remix as well.
🔥🔥
When we share the shortened link with the someone it asks them to login
Make sure the Row level security for SELECT in urls table is for all users.
Did you deploy it on vercel?
If yes then please tell me how to do it.
if i dont want to buy the domain ,this project when deployed on neltify didnt work. can you provide some way out to make it work
please help me , i want to deploy it for the portfolio
U can also use vercel
@@RoadsideCoder but i tried to deploy ... its not working..... can you suggest if something needs to be altered
I mean like i deploy it on netlify but its not redirecting me the original website ...how to achieve that.. if you can help please?
@@ankitasingh1437 Same problem, the console is responding with 404 server error
Bhai test case ka bhi banao
soon 👍
Make video with material ui
Sure ✌️
❤❤thnxxx sir
💖
1000 Likes done Waiting for Part 2
why r u not go with tsx rather jsx
Because the logic remains the same, its just the type. Typescript is same as Javascript.
Did you deploy it on vercel?
If yes then please tell me how to do it.
Are you writing js or ts in your day to day at work ?
both
Hi bro, Can you make a video for Google authentication with MongoDB?
I will!
Can i build this project for resume.
yes
Did you deploy it on vercel?
If yes then please tell me how to do it.
What's up bro I have a question for you
Did you write all this offhead or used some resources?
If you wrote it off head or used resources can you share how you did it?
Cause those are m*dd JavaScript right there bro...
This is the resource that will help u out - roadsidecoder.com/course-details
Did you deploy it on vercel?
If yes then please tell me how to do it.
@@RandomReqr what do you mean
💯
I request to make video on how to secure VITE_SUPABASE_KEY and VITE_SUPABASE_URL as these keys are available in production build js chunk file. Anyone can view it from network tab
Ok , I will!
Password is not secured. Data breach. Google warning ⚠️
haha
Hash it before saving
It is automatically hashed
That means your using week password like test
Who completed this project?
Me
@@falomosharon2135 do you got any difficulty or errors ? And how did you tackle them.
How u deployed this project? Will you plz tell me@@falomosharon2135
I am unable to create user in supabase through add user button mannual, can u help me@@falomosharon2135
@@falomosharon2135did you done with deployment?
1:32:08
Bro I want to ask something can u please connect with me?
@@arinjain25 yaa bro
For those who are getting supabase url error, bring your .env file to the root file
is link redirection logic is working for you in your deployed version?
@@AquibSayyed-wv2mj any issue after deployment?
@ yes link redirection is not working
🛐🛐🛐
Bro keeps using scalable word all the time lmao challemging u to create a 30 day 30 system design playlist brother
I followed every step in this video, still the website is completely blank, I thought it work but I wasted all my time, pls sir if you could help me....
check the console for any error
@@RoadsideCoder Sir how can I connect you personally as I've invested 4 hours in doing code with you but still it's not working, Sir pls help me in running of my project, already I've the full source code with me, where I should send you, so that you can verify it, pls sir help me 🙏🙏