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

Опубликовано: 13 Февраль 2024
на канале: Dipesh Malvia
3,339
87

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 :    • Building a URL Shortener MERN Stack A...  
⭐️ Episode 2 :    • Building a URL Shortener MERN Stack A...  

Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - https://www.dipeshmalvia.com/courses/...

⭐️ Support my channel⭐️
https://www.buymeacoffee.com/dipeshma...

⭐️ Full Source Code ⭐️
https://buymeacoffee.com/dipeshmalvia...

⭐️ Node.js for beginners Playlist ⭐️
   • Node.js Tutorial For Beginners  

🔥 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 -    • Learn Node.js & Express with Project ...  
🔗 React Crash Course -    • Learn React JS with Project in 2 Hour...  
🔗 JavaScript Crash Course -    • JavaScript Tutorial for Beginners | J...  
🔗 HTML5 Crash Course in 1 Hour -    • HTML5 Crash Course for Absolute Begin...  
🔗 CSS Crash Course in 1 Hour -    • CSS Crash Course For Absolute Beginne...  

🔗 Social Medias 🔗
Twitter:   / imdmalvia  
Facebook:   / programmingwithdipesh  
Instagram:   / dipeshmalvia  
LinkedIn:   / 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.


Смотрите видео Building a URL Shortener MERN Stack App with React TypeScript & Tailwind CSS Ep.2 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Dipesh Malvia 13 Февраль 2024. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 3,339 раз и оно понравилось 87 посетителям.