A Free Fully Functional Blog in Angular and Firebase

Update 10/16/22 - I have retired my blog site. My new blog, Code.Build now uses Supabase as a backend. I archived the old code.

---

So, I've decided to release my source code on github for my Fireblog.io fully functional blog written in Angular, using Firestore as the database, and hosted on Cloud Run.

--- scroll down for screenshots, or Fireblog.io ---

I was originally hosted on Firebase Functions, but I wanted it to be a little bit faster, and the ng deploy to Firebase Functions also stopped working as expected. In fact, I wonder what the Angular Firebase Team is doing at all these days. The documentation for Angular Firebase 9 is still not up-to-date, and it seems like they are behind on updating to Angular 13 (to be fair, it has only been a few days at this point).

Before I get into anything, I have to recommend you check out Code.Build, as it is the reason I have become proficient in these technologies.

I have re-written this project from scratch 3 different times, which has helped me become proficient in Angular and in Firebase Technologies. To save you developers time, I think the code should be free.

What is it?

It is a fully functional blog. It DOES NOT need Firebase Functions. I use batches for counters, I have created my own client side search index, and I use too many observables when I should be using promises (I absolutely love Firestore's real time component, but it is not necessary for a faster app).

You will find some core Angular components you can copy and re-use, as I don't believe in re-inventing the wheel (as we have done thousands and thousands of times).

I also pulled the Firestore code out and put it into one place. This means, if you use a different database, you don't have to re-write the same code. I planned on making a Dgraph version, but I am probably going to switch from Angular in my next project.

I will list Features, and wanted features below.

What I learned

The number one problem with Firestore is hands down the lack of counters. I literally wrote a package to do everything in Firebase Functions, and I learned after 6 months, I hate Firebase Functions. All the code missing from Firestore that takes up your time is relational and counter related. Now I know on the Frontend it is just as bad. However, I wrote some reusable Functions which I have talked about in other posts to make your life a little easier. However, some things are just impossible in Firestore. I seriously hate noSQL in general, but not having counters is terrible. I also wrote some reusable Firestore Rules for counters. Everything is usually dealing with counters.

Features / Components / Reusable Code

• Login - / Forgot Password / Register / Passwordless / Login with Provider / Form Validation / Verify Email / Create Username
• Settings - / Profile / Username / Email / Password / Links / Delete Account
• Post Lists - New / Updated / Top (most hearted) / By Tag / By User / By Slug
• Create / Edit Post - Tags, Markdown, Images, Auto-save drafts to new collection
• Dashboard - Bookmarks, User Posts, Drafts
• Images - Upload Cover Images / Upload and Delete Images From Storage with Image Preview - it drives me crazy that dev.to wastes space for unused images, and does not allow you to go back if you forgot the url
• Angular Material - / Light / Dark Themes / Search Bar, Material Components, Navigation, Breadcrumbs, lots of material icons, skeleton loading components, paging, caching, snackbar, dialogs
• Bookmarks - Save a post, heart a post
• SEO - Meta tag generation, breadcrumbs (schema.org), SSR through Angular Universal, but I load just the SEO information on serverside to speed up the app, twitter cards, auto resize of images for twitter cards, seo friendly urls, auto redirects for renaming
• Mobile Friendly
• All Firebase code separate for reusablility
• lots of little stuff I forgot to mention here...

Bugs to Fix

• Don't like your own posts (I don't like how dev.to does this)
• Save theme to userDoc, not just localStorage
• Login with Apple (hard to test, not sure problem here)
• Put totalPosts and Posts in one switchMap for cleaner code
• Clean up SCSS
• Create rules for Tags and Tags counters (would need to limit to 1-5 since can't do loops)
• Delete User Account, Delete All Posts, likes etc?
• Create UserDoc rules for username, adding / creating
• Create rules for reading bookmarks

Possible Future Features

• Comments on Posts with Markdown and thumbs up / down - disable comments option
• Related Posts on Each Posts
• SEO - JSON-LD, sitemap, robots.txt
• Admin Section to add / delete users, edit properties using Firebase Remote Config and Firestore
• Internationalization - pull out my messages obj using ngx-translate

Probably not, but would be cool if I continued this project

• Notifications
• User Profile Page
• Follow tags, Follow users (don't get me started) - would use frontend solution and have limits
• Categories / Related Categories / Yahoo Style Subcategories - I prefer ontology these days
• Page Counts (Google Analytics)
• Image Dashboard (add images collection)
• Copy Code - this really needs to be done by ngx-markdown

How to use this

This is for advanced developers who already know Angular and Firestore basics.

• I honestly have not taken the time to deploy a copy of this from scratch. Edit your environments.ts with your firestore info, make sure you are using Firebase storage etc. Look in the console.log to create necessary indexes if you didn't. I am not sure what happens. I suspect this may be more valuable as a reference repository.

NOTE - You will not be able to create a posts on Fireblog.io, but you can view all other features. If you want an open blog like dev.to, you will need to change the default role when creating a user to "editor" in both Firestore Rules and in auth.services.

Also, IGNORE THE FUNCTIONS FOLDER - that was code from my old version that uses FB Functions.

To test all features in your environment, make sure to make sure to add { role: 'admin' } to your user firestore document after you first login.

Screenshots

What's Next?

If I come back to this project, I will make this a post series with updates.

I am going to put this project on hold and develop in SvelteKit, Hasura (or Dgraph), Firebase Auth, and Vercel. Most of my wasted time on this project was spent dealing with Firestore Rules (testing is terrible), Counters, and Relational items. We shall see the pros and cons of a new database and a Beta Framework (which scares me, but hopefully worth it). I love Angular, but Vercel is not good with Angular Universal, and I want to see what can be done with SvelteKit. If you know me, you know I hate react.

You will also see some new posts on Decentralized Technologies soon.

Let me know your experiences with this code here.

J