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

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