**Live Demo: **https://mehulk05.github.io/Blog-Book/

Github:https://github.com/mehulk05/Blog-Book

I previously developed a blog app in Angular and Firebase (Live Demo) but it had limited features and didn’t allow me to edit blogs once they were published. It also only allowed the admin to publish blogs which was quite limiting. Due to this I decided to develop another blog app just like Medium that has CRUD operation allowing all users to register and write blogs, comment on and like blogs, and mark their blogs public or private. The idea is that users can use my app like their personal diary. Also, I have added a Rich Text Editor (like Medium) to edit the text formatting in the blog app.

Complete Demo

Complete Demo

Tools and Technologies

• Technology: HTML, Bootstrap, CSS, Angular-9, Firebase
• Database: Firebase(RealTime Database) .

The Features

• CRUD Operations
• Authentication (Email /password and Google login)
• Verification of mail and Password recovery
• Like/Unlike the post
• Comment On posts
• Public and private options to mark their blog public and private. If the post is private then the only user can see his post after logging in
• User can view other users’ profiles and their blog
• A search filter to search the blog by title or author-name
• It has featured post and latest post section
• Rich Text Editor like Medium(WYSIWYG)

What It Covers

This project covers all fundamentals of Angular:

• Cross component communication
• Components, Template, and DataBinding
• Form validation
• HttpClient
• Animations
• Dependency injection
• Routing and navigation
• Service workers
• Pipes
• CRUD operations
• Guards etc.

Getting Started

1. Let’s get started by cloning the source code and we will cover some of the above features in this part.

git clone https://github.com/mehulk05/Blog-Book.git

Navigate to the project directory and install the required dependencies.

cd BlogBook
npm install

After doing this next step is to setup Firebase. Follow this. Angular + Firebase Tutorial — Angular + Firebase + Typescript — Step by step tutorial or follow this and set up your firebase rules

Now Let’s begin with CRUD Operation, How I created my Service files to create a post.

1. Create or Add your first Post to Firebase

 createPost(value: any) {
	    this.postdata = {
	      title: value.title,
	      nameToSearch: value.title.toLowerCase(),
	      desc: value.desc,
	      category: value.category,
	      subcategory: value.subcategory,
	      name: value.name,
	      created_date: this.ucrud.currentDate,
	      imgurl: this.ucrud.downloadURL,
	      privacy: value.privacy,
	      uid: this.id,
	      uname: this.uname,
	    }

	 this.http.post(
	          `https://write-your-heart-out-b338b.firebaseio.com/post/public.json`,this.postdata  )
	          .subscribe(responseData => {
	            this.router.navigate(['']);
	            this.showSuccess();
	          }, err => {
	              console.log(err)    
	          });

#javascript #google #blog #firebase #angular