Building a URL Shortener MERN Stack App with React TypeScript & Tailwind CSS Ep.2

In this episode we will build our the Frontend part of our URL shortener app using React, Typescript and Tailwind css. We will do the API integration which we built in the previous episode so if you have missed that then I recommend you to check that out. ⭐️ Episode 1 : https://youtu.be/sKq-aSrnZog ⭐️ Episode 2 : https://youtu.be/GOp0gH3zE9s Node.js: The Complete Guide to Build Backend Projects [2023]🔥 Link - https://www.dipeshmalvia.com/courses/Nodejs-Zero-to-Hero ⭐️ Support my channel⭐️ https://www.buymeacoffee.com/dipeshmalvia ⭐️ Full Source Code ⭐️ https://buymeacoffee.com/dipeshmalvia/e/267940 ⭐️ Node.js for beginners Playlist ⭐️ https://youtube.com/playlist?list=PLTP3E5bPW796_icZanMqhdg7i0Cl7Y51F 🔥 Video contents... ENJOY 👇 0:00:00 - Outro 0:00:27 - Demo 0:02:20 - Project Setup using VITE 0:06:03 - Adding Tailwind css to Project 0:08:35 - Header & Footer Component 0:14:40 - Adding Container Component 0:16:37 - Adding Form component 0:26:40 - Form Handling 0:28:36 - Axios API integration - Create Short URL 0:33:02 - Adding Data Table Component 0:37:06 - Axios API integration Fetch Short URLs 0:42:28 - Render Data Table List 0:46:46 - Adding Icons using Heroicons 0:47:47 - Copy clipboard feature 0:50:28 - Delete Short URL 0:52:38 - Re-render Container Component 0:58:14 - Sort Data in MongoDB 1:00:18 - Outro ⭐️ Crash Courses ⭐️ 🔗 Nodejs Crash Course - https://youtu.be/H9M02of22z4 🔗 React Crash Course - https://youtu.be/0riHps91AzE 🔗 JavaScript Crash Course - https://youtu.be/sptS-bgg8Ro 🔗 HTML5 Crash Course in 1 Hour - https://youtu.be/Aj3QFsmsagc 🔗 CSS Crash Course in 1 Hour - https://youtu.be/nYsk_U_A_lc 🔗 Social Medias 🔗 Twitter: https://twitter.com/IMDmalvia Facebook: https://www.facebook.com/programmingwithdipesh Instagram: https://www.instagram.com/dipeshmalvia LinkedIn: https://www.linkedin.com/in/dmalvia/ ⭐️ Tags ⭐️ - Node.js URL Shortener Backend: MongoDB + TypeScript Deep Dive - Node.js API Development: URL Shortener Backend Using TypeScript and MongoDB - Building Scalable APIs: URL Shortener App with Node.js, MongoDB, and TypeScript - Hands-On Tutorial: Building a URL Shortener Backend with Node.js, MongoDB, and TypeScript ⭐️ Hashtags ⭐️ #react #typescript #mernstack #projects #beginners Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.