filmov
tv
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:
🚀Live:
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:
🌎 Find Me Here:
#programming
👨💻Code:
[link code]
🔗Source:
🚀Live:
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:
🌎 Find Me Here:
#programming
1:29:52
Full Stack Image Gallery App Tutorial | React, Firebase, Firestore
0:11:29
DALL-E: A Full Stack OpenAI Image Gallery App
0:10:53
This is how I like to do image uploads on my full stack apps
2:12:08
Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone
3:25:45
Unlocking Next.js 14's Power: Build a Full-Stack Photo App with Supabase & Tailwind!
0:39:24
Full Stack Unsplash Image Gallery App with React and Node and CSS Grid
1:01:13
Photo Gallery MERN App | How To Handle File Upload In MERN App
5:50:47
Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
1:21:31
Build a Photo Gallery With React & Firebase
4:43:39
Build and Deploy a Modern Full Stack Social Media App | FULL COURSE
1:14:38
React Photo Gallery App Tutorial from Scratch | Use React, Node to upload, view and search images
0:56:42
Build an AI Image Analyzer Full-stack App! | Image-to-text GPT-4o Model
0:02:09
Around the World: A Full-Stack Photo App
1:29:59
Build your own AI image Generation App using MERN | MERN Stack Project | GeeksforGeeks
0:08:57
Build a Full Stack Image Generation App (Node.js + Leap AI)
0:38:56
React & Tailwind CSS Image Gallery
0:50:44
Ultimate Guide to Cloudinary Image/Video Uploads in MERN Stack | Step-by-Step Tutorial
0:25:09
How to Upload and Display Images using Multer in the MERN stack | Upload Images in React JS and Node
3:03:12
From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)
0:03:51
SnapsApp: Full Stack Photo Sharing App Demo ReactJs
1:40:59
How to Build a Photo Gallery With MERN STACK and framer-motion in hindi beginner guide 📸📸🖼️🖼️...
1:11:10
Build A MERN Stack Image Gallery App| Drag N Drop Images | Image Upload on Cloudinary
8:40:34
Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023
0:26:08
Build An AI Image Generator App In React Using OpenAI - Like DALL-E Image Generation App
Комментарии