Full Stack React JS Project ( URL Shortener ) - with Tailwind CSS, Supabase, Shadcn UI Tutorial 🔥🔥
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 -