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

Published: 23 June 2024
on channel: RoadsideCoder

47,722

1.4k

Use This Link to Buy affordable Hosting from Hostinger: https://www.hostg.xyz/SHF7G
Please use my coupon code and get an additional 10% discount: ROADSIDECODER
➡️ My Frontend Interview Course - https://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 Coding Interview Que...

➡️ Source Code - https://github.com/piyush-eon/url-sho...
➡️ Book a mentorship call with me - https://topmate.io/roadsidecoder

👤 Join the RoadsideCoder Community Discord -
  / discord

🔗 MERN Stack Chat App Tutorial -
   • MERN Stack Chat App with Socket.IO Tu...

🔗 Complete Data Structures and Algorithms with JS Course -    • Data Structures and Algorithms in Jav...

🔗 JS Interview Series -
   • Javascript Interview Questions ( Var,...

🔗 Cars24 Interview Experience -
   • Frontend Interview Experience (Cars24...

🔗 Unacademy Interview Experience -
   • Frontend Interview Experience (Unacad...

🔗 Tazorpay Interview Experience -
   • Frontend Interview Experience (TazorP...

🔗 React Beginner's Project Tutorials -
   • React JS Project Tutorials 🔥🔥

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

Watch video Full Stack React JS Project ( URL Shortener ) - with Tailwind CSS, Supabase, Shadcn UI Tutorial 🔥🔥 online without registration, duration hours minute second in high quality. This video was added by user RoadsideCoder 23 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 47,722 once and liked it 1.4 thousand people.

269