RoadsideCoder
RoadsideCoder
  • 208
  • 8 402 156
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 -
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 Query - Full Tutorial 2024 🔥🔥
zhlédnutí 30KPřed 4 měsíci
React Query - Full Tutorial 2024 🔥🔥
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

Komentáře

  • @royz_1
    @royz_1 Před 11 hodinami

    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.

  • @manish.kumar..
    @manish.kumar.. Před 11 hodinami

    timestamp : 28:00

  • @shashwatshrey9248
    @shashwatshrey9248 Před 17 hodinami

    7:30 Supabase

  • @sashirkl
    @sashirkl Před 20 hodinami

    And this is how u make a concept more complex. instead of explaining usecontext .

  • @vaibhavmane5758
    @vaibhavmane5758 Před 23 hodinami

    Bhai test case ka bhi banao

  • @Infinite_Coding-mz2oj

    What a hidden GEM 😎😎😍😍

  • @ChandujobsApplications

    bro you should not use inbuilt functions for interviews

  • @afaqahmad8918
    @afaqahmad8918 Před dnem

    leaving bookmark 56:15

  • @afaqahmad8918
    @afaqahmad8918 Před dnem

    great project

  • @soumyadd7529
    @soumyadd7529 Před dnem

    He gives a shraap at the end - “Your code will get errors if you don’t subscribe” 😂

  • @FreezingTech
    @FreezingTech Před dnem

    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

  • @NikhilPatel-bq7ck
    @NikhilPatel-bq7ck Před dnem

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

  • @PRANAVMAPPOLI
    @PRANAVMAPPOLI Před dnem

    i will just say fuck off , if they ask this interviews 😂. Who the hell will remember all the dropzone drag handlers and all😾

  • @CodeWithObservations

    No need to write else

  • @user-wg5vc9ik1s
    @user-wg5vc9ik1s Před dnem

    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. 😊

    • @RoadsideCoder
      @RoadsideCoder Před dnem

      I think u need to work on ur basic javascript first, then u can follow this tutorial

  • @jaroslavfilo4420
    @jaroslavfilo4420 Před dnem

    Thank you very much. You helped me a LOT!

  • @pani3184
    @pani3184 Před dnem

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

  • @karthikeyan1996_
    @karthikeyan1996_ Před dnem

    Everybody is a bad ass until you refresh the page for real....then you would know where the contents of notes went

  • @user-gl7vl2kw8g
    @user-gl7vl2kw8g Před 2 dny

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

    • @RoadsideCoder
      @RoadsideCoder Před dnem

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

  • @PratibhaSharma-r3i
    @PratibhaSharma-r3i Před 2 dny

    color on progressbar not getting apllied wrote the same code

  • @PratibhaSharma-r3i
    @PratibhaSharma-r3i Před 2 dny

    color not getting applied although followed the same code

  • @user-ci2ne6gv6p
    @user-ci2ne6gv6p Před 2 dny

    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.

  • @user-ci2ne6gv6p
    @user-ci2ne6gv6p Před 2 dny

    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.

  • @user-ci2ne6gv6p
    @user-ci2ne6gv6p Před 2 dny

    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.

  • @diptamoymitra7486
    @diptamoymitra7486 Před 2 dny

    Please continue this type of tutorial ❤

  • @kevinpatel123
    @kevinpatel123 Před 2 dny

    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🫶

  • @guptasagar694
    @guptasagar694 Před 2 dny

    Cant understand a shit on Hamming Distance

  • @Akshat-vp5sg
    @Akshat-vp5sg Před 2 dny

    tere ko ye sab smajh kaise aa rha hai :) i want to learn all this things

    • @RoadsideCoder
      @RoadsideCoder Před 2 dny

      I have covered all the basics to advance here - roadsidecoder.com/course-details

  • @Raj-kc5xz
    @Raj-kc5xz Před 2 dny

    can i deployee this project free ??

  • @mehul205
    @mehul205 Před 2 dny

    Hey can you make a video on supabase vs firebase

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

  • @AvikNayak_
    @AvikNayak_ Před 2 dny

    What benefit does supabase have over firebase?

  • @rishabhbajpai648
    @rishabhbajpai648 Před 2 dny

    Hi, was this a live machine coding round? If it was, were you allowed to use internet ?

    • @RoadsideCoder
      @RoadsideCoder Před 2 dny

      Yes live, you can use internet for some things, ask the interviewer if he/she allows

  • @ganeshmaganti3175
    @ganeshmaganti3175 Před 2 dny

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

  • @arpittiwari9999
    @arpittiwari9999 Před 2 dny

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

  • @vipulgupta4125
    @vipulgupta4125 Před 2 dny

    Thats so great need more project like these.

  • @A1996ARP2075
    @A1996ARP2075 Před 2 dny

    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

  • @user-ko4pe5jp5v
    @user-ko4pe5jp5v Před 2 dny

    Thanks for making a project using these techstack

  • @bablugupta2119
    @bablugupta2119 Před 2 dny

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

    • @RoadsideCoder
      @RoadsideCoder Před 2 dny

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

  • @aryaaannn
    @aryaaannn Před 2 dny

    Even though I have created a new openAI account with new number I am still getting the same error of 'insufficient_quota' please help😥😥😟.

  • @manashanand9651
    @manashanand9651 Před 2 dny

    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 😂

  • @muhammadobaidullahkhan5887

    How did you made that cinematic showcase of project plz tell

  • @prateek_rohilla
    @prateek_rohilla Před 2 dny

    🔥🔥

  • @aditya-d-
    @aditya-d- Před 2 dny

    thnk for full stack, make more like this

  • @CodeDaily365Days
    @CodeDaily365Days Před 2 dny

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

  • @jhonsnow534
    @jhonsnow534 Před 2 dny

    🛐🛐🛐

  • @rishiraj2548
    @rishiraj2548 Před 2 dny

    💯

  • @mohammadabbas1623
    @mohammadabbas1623 Před 2 dny

    bro is back

  • @KrunalKRG
    @KrunalKRG Před 2 dny

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