Full Stack Image Gallery App Tutorial | React, Firebase, Firestore скачать в хорошем качестве

Full Stack Image Gallery App Tutorial | React, Firebase, Firestore

Check out MiniTool MovieMaker: https://bit.ly/4hKFA9A In this full-stack tutorial, you'll learn how to create an impressive Image Gallery App using React, Firebase, Firestore, and Tailwind CSS. Follow along as we dive into the world of authentication, storage, and data management. Discover how to implement user authentication with Firebase Auth, leverage Firebase Storage to store images, and utilize Firestore for data storage. We'll also explore creating a beautiful user interface using Tailwind CSS with DaisyUI. Additionally, you'll master the art of protected and public routes and learn how to navigate with the latest version of React Router (v6). 👨‍💻Code: [link code] 🔗Source: [Vite] https://vitejs.dev/guide [Firebase] https://console.firebase.google.com [Firebase Docs] https://firebase.google.com/docs [DaisyUI] https://daisyui.com/ [Tailwind CSS] https://tailwindcss.com/ [uuid] https://www.npmjs.com/package/uuid 🚀Live: https://image-pro.vercel.app/ Timestamps: 0:00 - Intro 00:07 - Demo 03:49 - Setup React with Vite 05:22 - Install and Setup Tailwind CSS & daisyUI 07:18 - Setup react-router-dom & create Pages 18:37 - Setup firebase 20:24 - Create AuthContext 31:26 - Create PublicRoute & PrivateRoute 36:14 - Signup Functionality 46:50 - Create useStorage Hooks 1:06:28 - Store Data to Firestore Database 1:13:40 - Create useFirestore Hooks 1:24:09 - Show Images in ImageGallery 1:26:35 - Done 🔥 👋🏻Contact Me: https://canddev.vercel.app/ 🌎 Find Me Here: Instagram :   / candra_kriswinarto   GitHub: https://github.com/candraKriswinarto/ Linkedin:   / candra-kriswinarto   #programming