Build a Blog Website - React and Firebase Tutorial

In this video I will show how to code a blog website using ReactJS and Firebase. We will also add authentication using google and many more...

React + Firebase Tutorial

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

Timestamps
00:00 | Demo
02:46 | Setting Up Firebase
10:50 | Setting Up Navigation
19:30 | Authentication
32:22 | Creating Blog Posts
51:54 | Displaying the Data

#reactjs #coding #firebase

[PedroTechnologies]

Hey everyone, I forgot to fix something in the video. In order to prevent infinite reads and in order for the delete to refresh after a post is deleted, you need to change the useffect in the home page to the following:
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postsCollectionRef);
=> ({ ...doc.data(), id: doc.id })));
};

getPosts();
}, [deletePost]);

[SpencerWhiteman]

Literally the best timing ever. I was just trying to figure out how I wanted to build my blog and you came in clutch, thank you so much Pedro!

[luispericchi]

I can't thank you enough man, this is a beautifully structured extremely clear tutorial. I hope your channel keeps growing!

[shinobi_coder]

Have been watching your entire firebase v9 videos. This really helps, although I'm a frontend dev who rarely stores authenticated users data and this is very handy as we don't have to deal with complex backend stuff. Since you have been teaching us about Firebase Firestore and Auth, what about including Firebase Cloud Function and Hosting for the next course? Really appreciate it Pedro ✌️

[erikacontrerasleal]

I only watched for 1 min and you have my like, I can't wait to build my blog, thanks a lot!

[turbofuture]

literally wanted to build a blog, you came at just the right time :)

[souvikguria]

52:35 do add an empty dependecy array in useEffect, just to avoid re-rendering of component from firebse in an infinite loop

[dvdcrnn]

With the code below, you prevent infinite loop and you won't have to reload to see the updated posts

const getPosts = async () => {
try {
const data = await getDocs(postsCollectionRef);
setPostLists(
data.docs.map((post) => ({
...post.data(),
id: post.id,
}))
);
} catch (err) {
console.log(err);
}
};

const deletePost = async (id) => {
const postDoc = doc(db, "posts", id);
await deleteDoc(postDoc);
getPosts();
};

useEffect(() => {
console.log("Effect called");
getPosts();
}, []);

[ankushchavhan]

I am very happy that your channel got me too early in my react learning in beginning 🥳

[johnpaulpineda]

I really love watching Pedro simply because, he's teaching very simple and understandable on a perspective of a beginner. :)

[aldolhitlercondensation]

Hey it's me again! I was looking for such a video on youtube and I saw you had one on it. I instantly told my friends that I'd be returning with a basic functioning knowledge of firebase react the next day. you have a way of keeping things short but to the point. I havent started watching the video yet but I know it'll be great! (hopefully no errors xd) but THANKS A TON!

[sunitvarada]

Error in /~/pages/Home.js (59:29)
Cannot read properties of undefined (reading 'name')
how to resolve this issue!

[nithinm]

Man, this is absolutely fabulous. I was thinking of every loopholes and you were instantly fixing it. Lots of respect 🔥🔥

[WillSmith-qtme]

Great job Pedro, useful Firebase video

[chinmayghule]

I'm doing the same project but with a few changes. The users have their own page where they can see all their blogs. The delete button isn't on the homepage but on the user's own page inside the blog content card. I'm also going to try to add a feature so that the users would be able to update their blogs. Also, if time permits, I would even like to add a feature to enable the users to add tags to their blogs, and a search bar on the home page so that the users would be able to search by title, tags, or blog authors.

[xXHelsingGamingXx]

Yep, I am the first to like comment and share! :-) Amazing video!

[tomasgilamoedo]

I was just needing this man, been looking for firebase good content but its really hard tho, Thxz a lot Pedro, really appreciated!

[infojr]

src\pages\Home.js
Line 16:6: React Hook useEffect has a missing dependency: 'postsCollectionRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps

[JoseCarlos-ymke]

At 56:37 in the map function, ...doc.data(), is that data( ) some firebase method? I don't really get it

[bilbo_gamers]

Thank you so much for making this! I haven't done any CSS to this yet but it looks SO COOL! I'm going to try and make a Kanban board with this. I have been studying backend stuff and object oriented languages for most of the time I've been studying CSC (and in university), and it's so great to finally be able to break into frontend. Thank you!