Full Stack React JS Project ( URL Shortener ) - with Tailwind CSS, Supabase, Shadcn UI Tutorial 🔥🔥

Use This Link to Buy affordable Hosting from Hostinger: www.hostg.xyz/SHF7G
Please use my coupon code and get an additional 10% discount: ROADSIDECODER
➡️ My Frontend Interview Course - roadsidecoder.com/course-details (50% Discount)
Build a Full Stack URL Shortener in React JS with Tailwind CSS, Supabase, Shadcn UI Tutorial. This is an amazing project for your resume which will impress recruiters a lot and showcase your skillset.
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code - github.com/piyush-eon/url-sho...
➡️ Book a mentorship call with me - topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#reactjstutorial #frontend #ReactJS
-------------------------------------------------------------------------
00:00:00 Project Demo
00:03:06 Setup React App with Shadcn UI
00:07:14 Backend Setup with Supabase
00:14:03 Hostinger Setup
00:17:02 Defining the Routes
00:23:47 Building the Header
00:31:12 Building the Landing Page
00:40:14 User Authentication
00:44:32 Creating Login API
00:46:48 Login UI
00:56:11 useFetch Custom Hook
01:03:31 Adding Context API for User State
01:08:59 Creating Signup API
01:14:08 Signup UI
01:20:36 Protected Routes
01:22:23 Making Header Dynamic + Logout Logic
01:26:54 Adding Row Level Security
01:31:57 Fetch Url and Clicks API
01:34:58 Building Dashboard
01:52:14 Download QR Code
01:53:32 Deleting a URL
01:56:05 Create URL API
02:00:21 Create URL Dialog
02:15:57 Link Redirection Page
02:17:58 Statistics API
02:19:50 Redirection Logic
02:22:44 Building Link Stats Page
02:23:37 URL Info API
02:25:01 Link Page UI
02:33:43 Location Graph for a link
02:40:24 Location Pie Chart for a link
02:45:38 Deployment
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)

[@harshtiwari2150]

very underrated channel, this channel need more subs 🔥

[@onlyhere143]

Bro you're just a hidden gem. Your video should reach to many developers.

[@A1996ARP2075]

Best frontend RUclips channel , if i have to recommend frontend tutorials i will recommend ur channel over udemy courses for best projects and interview preparation

[@RoadsideCoder]

Thank u so much 💖

[@user-ko4pe5jp5v]

Thanks for making a project using these techstack

[@vipulgupta4125]

Thats so great need more project like these.

[@RoadsideCoder]

More Coming!

[@chakrabarti9634]

​@@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

[@diptamoymitra7486]

Please continue this type of tutorial ❤

[@Infinite_Coding-mz2oj]

What a hidden GEM 😎😎😍😍

[@FreezingTech]

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

[@RoadsideCoder]

Thank you

[@letsspeakwithlearnenglish6371]

Great

[@AbhishekSingh-nk7lz]

❤❤thnxxx sir

[@RoadsideCoder]

💖

[@mohammadabbas1623]

bro is back

[@RoadsideCoder]

✌️

[@aditya-d-]

thnk for full stack, make more like this

[@RoadsideCoder]

More to come!

[@lluckyy_zy]

Nice ❤

[@RoadsideCoder]

Thanks 🔥

[@manashanand9651]

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 😂

[@RoadsideCoder]

Noted! Thanks for the suggestion.

[@prateek_rohilla]

🔥🔥

[@afaqahmad8918]

great project

[@RoadsideCoder]

Thanks

[@afaqahmad8918]

@@RoadsideCoder My pleasure sir

[@pani3184]

Thanks a lot for this amazing project tutorial, can we deploy in vercel or any free hosting sites

[@RoadsideCoder]

Yes, you can

[@pani3184]

@@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

[@muhammadobaidullahkhan5887]

How did you made that cinematic showcase of project plz tell

[@RoadsideCoder]

Adobe Premiere Pro

[@rishiraj2548]

💯

[@arinjain25]

I am not able to see how many users are opening the link via mobile instead of opening it through mobile ,help me what should i do? Also as i have created new links nothing is showing in my databse both the tables are empty

[@manojb1606]

Damn Bro your killing the content

[@RoadsideCoder]

Thanks mate!

[@manojb1606]

@@RoadsideCoder Can I use this and build the same is it ok

[@RoadsideCoder]

Yeah sure!

[@user-gl7vl2kw8g]

I am a little confused because both the page and the component look similar. Why do we call them by two different names?

[@RoadsideCoder]

Because pages contain the files that are imported in the router, its just a good convention that I follow

[@KanishkaMrunal]

some time code not understand

[@KrunalKRG]

Is this beginner friendly Supabase used here
Means did you explain the things

[@RoadsideCoder]

Yes everything - beginner friendly

[@KrunalKRG]

@@RoadsideCoder thanks ❤️

[@faizanqureshi3792]

i am getting Failed to fetch error at 1:01:20, how can i fix it?

[@maazshaikh7905]

Can i follow this along as a react js beginner?

[@KanishkaMrunal]

no

[@AvikNayak_]

What benefit does supabase have over firebase?

[@RoadsideCoder]

Its open source

[@ganeshmaganti3175]

Hi bro, Can you make a video for Google authentication with MongoDB?

[@RoadsideCoder]

I will!

[@CodeDaily365Days]

Password is not secured. Data breach. Google warning ⚠️

[@RoadsideCoder]

haha

[@AvikNayak_]

Hash it before saving

[@RoadsideCoder]

It is automatically hashed

[@Soulhighlights1]

That means your using week password like test

[@arpittiwari9999]

I am searching for job for that suggest 3 project which help me to get job

[@vaibhavmane5758]

Bhai test case ka bhi banao

[@RoadsideCoder]

soon 👍

[@bablugupta2119]

When we share the shortened link with the someone it asks them to login

[@RoadsideCoder]

Make sure the Row level security for SELECT in urls table is for all users.

[@mehul205]

Hey can you make a video on supabase vs firebase

[@RoadsideCoder]

Sure

[@mehul205]

@@RoadsideCoder Thank you :)

[@kevinpatel123]

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🫶

[@RoadsideCoder]

Thanks man! Great to hear!

[@jhonsnow534]

🛐🛐🛐

[@AbhishekSingh-pl2yg]

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

[@RoadsideCoder]

Ok , I will!

[@mohdkhaleeq7468]

Can i build this project for resume.

[@RoadsideCoder]

yes

[@afaqahmad8918]

leaving bookmark
56:15

[@KanishkaMrunal]

why r u not go with tsx rather jsx

[@RoadsideCoder]

Because the logic remains the same, its just the type. Typescript is same as Javascript.

[@beingaiiitian4559]

1:32:08

[@manish.kumar..]

timestamp : 28:00

[@shashwatshrey9248]

7:30 Supabase

[@shashwatshrey9248]

23:00 made with

[@shashwatshrey9248]

40:20 Supabase auth