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

00:01 Create a full stack URL shortener app with ReactJS, Tailwind CSS, Supabase, and Shadcn UI 02:00 Implemented production grade features like analytics and dashboard using Tailwind CSS, Supabase, Shadcn UI. 06:04 Setting up Tailwind CSS, Supabase, and Shadcn UI 08:06 Setting up project with API key and URL for Supabase integration 12:14 Setting up unique custom URLs and creating a table for click tracking. 14:11 How to secure hosting and domain for your app 17:57 Creating routes using the browser router function 20:00 Setting up different pages and routes using React Router 24:04 Creating a new component for header with logo and banner 26:01 Implement programmatic navigation using useNavigate from React Router DOM 29:48 Building the landing page with Shadcn UI components 31:43 Setting up UI components in React 35:37 Customizing button styles and accordion component 37:32 Using useState to manage URL state in React 41:34 Handling search parameters in the URL and showing a prompt to login 43:34 Creating API for Login and Sign Up 47:30 Installing React Spinners and yep Library for input validation 49:34 Implementing a loading indicator and error handling 53:37 Validation logic for email and password input fields 55:32 Creating a custom hook for handling API calls 59:08 Using fetch hook and Supabase for API calls 1:01:04 Setting up Superbase URL 1:05:01 Setting up context API in React with create context and provider 1:07:15 Implementing user authentication and session management 1:11:07 Creating user profile with file storage and database interaction 1:13:09 Creating an API for signing up users with a profile picture 1:17:09 Updating sign up flow and file uploading functionality. 1:19:09 Implementing authentication logic for redirecting users to appropriate routes based on login status 1:23:10 Implementing User Profile and Logout Functionality 1:25:25 Implementing local storage and fixing UI errors 1:29:16 Adding dummy data for testing purposes 1:31:21 Setting up policies and APIs for QR code functionality 1:35:38 Rendering stats and user-created links 1:37:39 Setting up UI elements for link creation 1:41:50 Implementing search functionality and error handling in the project 1:43:47 Making data dynamic for URLs and clicks 1:47:59 Setting up environment variables for URL handling 1:49:53 Customizing UI elements and adding functionality to URL shortener project 1:53:54 Creating logic for deleting URLs 1:56:00 Creating URL functionality for dashboard 1:59:58 Creating API for URL shortening 2:01:56 Show popup with long URL pre-filled when user lands on homepage 2:05:50 Creating form state and schema 2:07:31 Setting up form values and handling URL changes 2:11:41 Handling loading state and form validation 2:13:36 Implementing error handling and API call in the URL shortener form 2:17:52 Creating an API to store user stats like device location 2:19:42 Fetching long URL and storing clicks in the database 2:23:48 Created new APIs for fetching URL details and click stats. 2:25:52 Building the URL shortener page 2:29:54 Adding buttons and QR code to the Link Card 2:31:57 Implementing conditional rendering for fetching and displaying stats. 2:36:04 Cumulating location data for multiple cities 2:38:01 Creating city count data from stats array 2:42:05 Mapping data and rendering in a chart 2:43:56 Building a complete URL shortener project with React JS, Tailwind CSS, Supabase, and Shadcn UI. 2:47:39 Setting up and testing the React app functionality

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

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

very underrated channel, this channel need more subs 🔥

Thats so great need more project like these.

Thanks for making a project using these techstack

bro is back

Please continue this type of tutorial ❤

What a hidden GEM 😎😎😍😍

I dont think so anybody will be able to watch this project whole and complete it but still I am doing

Amazing video waiting for more!

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

Great Teaching Piyush

Good video and want part 2

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 😂

Thanks man, helped a lot

Great

Can someone please tell me how to deploy this project in vercel? Please help me if anyone has completed it.

thnk for full stack, make more like this

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🫶

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

When will you explain JWT authentication and authorisation technique & Redux OR Redux Toolkit on any React Application or project so that we can learn the concept????

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

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

Brother please make the second part of this video. ❤

great project

Damn Bro your killing the content

Nice ❤

How did you made that cinematic showcase of project plz tell

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

failed to fetch when creating table in Supabase ... please help

Are you writing js or ts in your day to day at work ?

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

can you recommend any source to deploy this in vercel or netlify

🔥🔥

1000 Likes done Waiting for Part 2

Can i follow this along as a react js beginner?

What benefit does supabase have over firebase?

💯

❤❤thnxxx sir

What's up bro I have a question for you Did you write all this offhead or used some resources? If you wrote it off head or used resources can you share how you did it? Cause those are m*dd JavaScript right there bro...

Do i have to host it before it works?

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

timestamp : 28:00

ist day 00:31:13 00:44:39

leaving bookmark 56:15

Make video with material ui

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

Bhai test case ka bhi banao

Hey can you make a video on supabase vs firebase

Can i build this project for resume.

2:21:02

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

if i dont want to buy the domain ,this project when deployed on neltify didnt work. can you provide some way out to make it work

why r u not go with tsx rather jsx

7:30 Supabase

🛐🛐🛐

Who completed this project?

1:32:08