![RoadsideCoder](/img/default-banner.jpg)
- 208
- 8 402 156
RoadsideCoder
India
Registrace 25. 06. 2020
Interview Preparation, Web Development and Competitive Programming / Coding Tutorials.
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 -
czcams.com/play/PLKhlp2qtUcSYQojD5G-ElgHezoCyq2Hgo.html
➡️ Source Code - github.com/piyush-eon/url-shortener
➡️ Book a mentorship call with me - topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
discord.gg/2ecgDwx5EE
🔗 MERN Stack Chat App Tutorial -
czcams.com/play/PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf.html
🔗 Complete Data Structures and Algorithms with JS Course - czcams.com/play/PLKhlp2qtUcSZtJefDThsXcsAbRBCSTgW4.html
🔗 JS Interview Series -
czcams.com/video/oUWRxJ19gfE/video.html
🔗 Cars24 Interview Experience -
czcams.com/video/vxggZffOqek/video.html
🔗 Unacademy Interview Experience -
czcams.com/video/abbdJ4Yfm54/video.html
🔗 Tazorpay Interview Experience -
czcams.com/video/q-ylRxSxGcY/video.html
🔗 React Beginner's Project Tutorials -
czcams.com/play/PLKhlp2qtUcSa_rX7glmB7HyFsEOEQa0Uk.html
#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 -
czcams.com/channels/IPZVAwDGa-A4ZJxCBvXRuQ.htmljoin
Special Thanks to our members -
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 -
czcams.com/play/PLKhlp2qtUcSYQojD5G-ElgHezoCyq2Hgo.html
➡️ Source Code - github.com/piyush-eon/url-shortener
➡️ Book a mentorship call with me - topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
discord.gg/2ecgDwx5EE
🔗 MERN Stack Chat App Tutorial -
czcams.com/play/PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf.html
🔗 Complete Data Structures and Algorithms with JS Course - czcams.com/play/PLKhlp2qtUcSZtJefDThsXcsAbRBCSTgW4.html
🔗 JS Interview Series -
czcams.com/video/oUWRxJ19gfE/video.html
🔗 Cars24 Interview Experience -
czcams.com/video/vxggZffOqek/video.html
🔗 Unacademy Interview Experience -
czcams.com/video/abbdJ4Yfm54/video.html
🔗 Tazorpay Interview Experience -
czcams.com/video/q-ylRxSxGcY/video.html
🔗 React Beginner's Project Tutorials -
czcams.com/play/PLKhlp2qtUcSa_rX7glmB7HyFsEOEQa0Uk.html
#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 -
czcams.com/channels/IPZVAwDGa-A4ZJxCBvXRuQ.htmljoin
Special Thanks to our members -
zhlédnutí: 11 052
Video
AI Driven Portfolio with Next JS and Vector Embeddings 🔥🔥
zhlédnutí 7KPřed dnem
🔴 Build now with Astra DB: dtsx.io/RodesideCoder ➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% off) 🟪 My Instagram - roadsidecoder Build an AI Driven Portfolio App with NextJS and Tailwind CSS. We will learn advance AI Technologies like vector embedding and vector databases along with how to work with Open AI's APIs. This is an amazing projec...
Frontend System Design Questions ( Autosuggestion / Typeahead ) - HLD, LLD, Interview Experience 🔥🔥
zhlédnutí 17KPřed 21 dnem
➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% off) 🟪 My Instagram - roadsidecoder ➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder Frontend System Design Question on building a Scalable Autosuggestion or Typeahead Component will be discussed in this video along with Requirement gathering, HLD, LLD and Optimisations on ...
Frontend System Design Questions ( Toast Component ) - HLD, LLD, Interview Experience, etc 🔥🔥
zhlédnutí 15KPřed měsícem
➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% off) 🟪 My Instagram - roadsidecoder ➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder Frontend System Design Question on building a Scalable Toast or Notification Component will be discussed in this video along with Requirement gathering, HLD, LLD and Optimisations on this. ...
GIPHY Clone with React JS and Tailwind CSS Tutorial 2024 🔥🔥
zhlédnutí 8KPřed měsícem
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 GIPHY Clone App in React JS 18 with Tailwind CSS. This is an amazing project for your resume which will impress recruiters a lot and showcase your skillset...
7 Mistakes Most Junior React developers make
zhlédnutí 13KPřed měsícem
➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% Discount) 🟪 My Instagram - roadsidecoder ➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder Let's discuss 7 Mistakes that a lot of junior as well as senior developers make while coding in React JS. We will also discuss the best practices to follow instead of these mistakes. 🔗...
React JS Interview Questions ( Tic Tac Toe ) - Frontend Machine Coding Interview Experience
zhlédnutí 13KPřed 2 měsíci
React JS Interview Questions ( Tic Tac Toe ) - Frontend Machine Coding Interview Experience
Javascript Interview Questions ( 12 Polyfills ) - Promise(), Memoize(), Bind(), Reduce(), Map() etc🔥
zhlédnutí 15KPřed 2 měsíci
Javascript Interview Questions ( 12 Polyfills ) - Promise(), Memoize(), Bind(), Reduce(), Map() etc🔥
React JS Interview Questions ( Drag and Drop Notes ) - Frontend Machine Coding Interview Experience
zhlédnutí 19KPřed 2 měsíci
React JS Interview Questions ( Drag and Drop Notes ) - Frontend Machine Coding Interview Experience
Currency Converter with React JS and Tailwind CSS - Full Tutorial 2024 🔥🔥
zhlédnutí 10KPřed 2 měsíci
Currency Converter with React JS and Tailwind CSS - Full Tutorial 2024 🔥🔥
React JS Interview Questions ( Selectable Grid ) - Frontend Machine Coding Interview Experience
zhlédnutí 20KPřed 3 měsíci
React JS Interview Questions ( Selectable Grid ) - Frontend Machine Coding Interview Experience
Build an AI Object Detector with Next js 14, Tailwind CSS, Tensorflow, React | Full Tutorial 2024 🔥🔥
zhlédnutí 10KPřed 3 měsíci
Build an AI Object Detector with Next js 14, Tailwind CSS, Tensorflow, React | Full Tutorial 2024 🔥🔥
React JS Interview Questions ( Quiz App ) - Frontend Machine Coding Interview Experience
zhlédnutí 19KPřed 3 měsíci
React JS Interview Questions ( Quiz App ) - Frontend Machine Coding Interview Experience
Watch this before joining my Frontend Interview Prep Course 👀
zhlédnutí 10KPřed 3 měsíci
Watch this before joining my Frontend Interview Prep Course 👀
Complete Frontend Interview Course - Machine Coding, React JS, Performance, JavaScript and More!
zhlédnutí 29KPřed 3 měsíci
Complete Frontend Interview Course - Machine Coding, React JS, Performance, JavaScript and More!
React JS Interview Questions ( useThrottle Hook ) - Frontend Machine Coding Interview Experience
zhlédnutí 10KPřed 4 měsíci
React JS Interview Questions ( useThrottle Hook ) - Frontend Machine Coding Interview Experience
React Form Validations ( with YUP ) - Full Tutorial 2024 🔥🔥
zhlédnutí 25KPřed 4 měsíci
React Form Validations ( with YUP ) - Full Tutorial 2024 🔥🔥
React JS Interview Questions ( Stepper ) - Frontend Machine Coding Interview Experience
zhlédnutí 32KPřed 4 měsíci
React JS Interview Questions ( Stepper ) - Frontend Machine Coding Interview Experience
React JS Interview Questions ( Multi Select Search ) - Frontend Machine Coding Interview Experience
zhlédnutí 30KPřed 4 měsíci
React JS Interview Questions ( Multi Select Search ) - Frontend Machine Coding Interview Experience
Dockerize and Deploy React JS App in 15 Minutes 🔥🔥
zhlédnutí 42KPřed 5 měsíci
Dockerize and Deploy React JS App in 15 Minutes 🔥🔥
React JS Interview Questions ( OTP Login ) - Frontend Machine Coding Interview Experience
zhlédnutí 101KPřed 5 měsíci
React JS Interview Questions ( OTP Login ) - Frontend Machine Coding Interview Experience
React JS Interview Questions ( Breadcrumbs ) - Frontend Machine Coding Interview Experience
zhlédnutí 24KPřed 5 měsíci
React JS Interview Questions ( Breadcrumbs ) - Frontend Machine Coding Interview Experience
React JS Interview Questions ( Dark mode Light mode ) - Frontend Machine Coding Interview Experience
zhlédnutí 25KPřed 5 měsíci
React JS Interview Questions ( Dark mode Light mode ) - Frontend Machine Coding Interview Experience
React Multi Language App - i18next Tutorial with React JS
zhlédnutí 32KPřed 6 měsíci
React Multi Language App - i18next Tutorial with React JS
React JS Interview Questions ( useEffect Hook Polyfill ) - Frontend Coding Interview Experience
zhlédnutí 16KPřed 6 měsíci
React JS Interview Questions ( useEffect Hook Polyfill ) - Frontend Coding Interview Experience
React JS Interview Questions ( Job Board - GreatFrontEnd ) - Frontend Coding Interview Experience
zhlédnutí 13KPřed 6 měsíci
React JS Interview Questions ( Job Board - GreatFrontEnd ) - Frontend Coding Interview Experience
How to Debug Errors in Javascript and React JS 😲🔥
zhlédnutí 12KPřed 6 měsíci
How to Debug Errors in Javascript and React JS 😲🔥
React JS Interview Questions ( Like Button - GreatFrontEnd ) - Frontend Coding Interview Experience
zhlédnutí 15KPřed 6 měsíci
React JS Interview Questions ( Like Button - GreatFrontEnd ) - Frontend Coding Interview Experience
Data Structures in Javascript ( Doubly Linked List ) | Frontend DSA Interview Questions
zhlédnutí 3,9KPřed 7 měsíci
Data Structures in Javascript ( Doubly Linked List ) | Frontend DSA Interview Questions
Thats a very dumb interview question. I let people do google search when I take interviews. And even then, I would not ask them to do this.
timestamp : 28:00
7:30 Supabase
23:00 made with
And this is how u make a concept more complex. instead of explaining usecontext .
Bhai test case ka bhi banao
soon 👍
What a hidden GEM 😎😎😍😍
bro you should not use inbuilt functions for interviews
leaving bookmark 56:15
great project
Thanks
He gives a shraap at the end - “Your code will get errors if you don’t subscribe” 😂
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
It looks good but you won't have major control over UI what if form layouts demands totally diff layouts with 3 grid or dynamic fields validations such all cases this pattern will failed for sure. Telling from personal experience. Create custom input with needful props and use it where ever you need however you need. For filters, forms, etc..
i will just say fuck off , if they ask this interviews 😂. Who the hell will remember all the dropzone drag handlers and all😾
No need to write else
Sir you are not even explaining the logic. Because of these kinds of videos there are so many bad developers who thinks that they are good and feeling happy after copying code. Forget about implementation i bet most of them are not even getting the logic then what is the point of upload this kind of videos just give the code and go. 😊
I think u need to work on ur basic javascript first, then u can follow this tutorial
Thank you very much. You helped me a LOT!
You are welcome!
Thanks a lot for this amazing project tutorial, can we deploy in vercel or any free hosting sites
Yes, you can
Everybody is a bad ass until you refresh the page for real....then you would know where the contents of notes went
where did they went? 👀
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
color on progressbar not getting apllied wrote the same code
color not getting applied although followed the same code
Help me, please! I don't know why I have this error :< When I search for other users, it shows up as my own email, but when I click on message, I can still message other people as usual.
Help me, please! I don't know why I have this error :< When I search for other users, it shows up as my own email, but when I click on message, I can still message other people as usual.
Help me, please! I don't know why I have this error :< When I search for other users, it shows up as my own email, but when I click on message, I can still message other people as usual.
Great
Please continue this type of tutorial ❤
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!
Cant understand a shit on Hamming Distance
tere ko ye sab smajh kaise aa rha hai :) i want to learn all this things
I have covered all the basics to advance here - roadsidecoder.com/course-details
can i deployee this project free ??
yes
Hey can you make a video on supabase vs firebase
Sure
@@RoadsideCoder Thank you :)
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!
What benefit does supabase have over firebase?
Its open source
Hi, was this a live machine coding round? If it was, were you allowed to use internet ?
Yes live, you can use internet for some things, ask the interviewer if he/she allows
Hi bro, Can you make a video for Google authentication with MongoDB?
I will!
I am searching for job for that suggest 3 project which help me to get job
Thats so great need more project like these.
More Coming!
Best frontend CZcams 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 💖
Thanks for making a project using these techstack
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.
Even though I have created a new openAI account with new number I am still getting the same error of 'insufficient_quota' please help😥😥😟.
have u used new mobile and email?
@@RoadsideCoder Yes sir
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.
How did you made that cinematic showcase of project plz tell
Adobe Premiere Pro
🔥🔥
thnk for full stack, make more like this
More to come!
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
🛐🛐🛐
💯
bro is back
✌️
Is this beginner friendly Supabase used here Means did you explain the things
Yes everything - beginner friendly
@@RoadsideCoder thanks ❤️