How I Built a Full-Featured Social Network for $0 using Firebase and GitHub Pages
Building a social network usually sounds expensive. You need servers, databases, file storage, and a complex deployment pipeline. AWS bills can pile up fast.
But what if I told you that you can build a secure, scalable forum with user profiles, image uploads, and live notifications entirely for free?
I recently built BabaForum, a fully functional social app that runs on GitHub Pages (frontend) and Google Firebase (backend). It costs $0/month to run, handles 50,000 reads a day for free, and lives in a single HTML file.
Here is how I did it.
The Stack: Simplicity is King
I didn't want to deal with npm install, Webpack configurations, or Docker containers. I wanted to code on my phone and see results instantly.
Frontend: React (loaded via CDN), Tailwind CSS (via CDN).
Backend: Firebase Firestore (NoSQL Database).
Auth: Firebase Authentication (Google Sign-In).
Hosting: GitHub Pages (Static & Free).
The Secret: Serverless Architecture
The magic lies in treating the website as a "Static App."
GitHub Pages hosts the HTML/JS file. It effectively acts as a dumb delivery truck. It doesn't know who logged in or what a "post" is.
The Browser downloads the app and spins up React.
React talks directly to Firebase to fetch data, log users in, and send posts.
There is no "Middleman" server to pay for.
Key Features & How They Work
1. Authentication
Instead of building a login form and hashing passwords (security nightmare), I used Firebase Auth.
Javascript:
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider);
Two lines of code, and I have secure Google Sign-in.
2. The Database (Firestore)
Firestore is a document-based database. It's incredibly fast.
Topics are documents in a topics collection.
Replies are documents in a replies collection.
Profiles are documents in a users collection.
To make it "Real-time," I used Firestore's onSnapshot listener. This means if User A posts a comment in Germany, User B in the USA sees it appear instantly without refreshing the page.
3. Image Uploads (The "No-Storage" Hack)
Firebase Cloud Storage has a free tier, but it requires a credit card for verification in some regions. I wanted this project to be accessible to anyone, anywhere, without a card.
The Solution: Base64 Compression.
When a user uploads an image, I use a robust Canvas script to:
Resize the image to max 800px.
Compress the quality to 60%.
Convert it to a Base64 string.
I save this string directly into the text post in the database. Is it efficient for a million users? No. Is it perfect for a free hobby forum? Absolutely. It keeps everything in one place and requires zero configuration.
The "Gotchas" (Lessons Learned)
Building this wasn't without headaches. Here are the two biggest challenges I solved:
1. The "Security" Panic
GitHub's bots instantly flagged my repository because I committed my Firebase API Keys.
The Fix: I learned that Firebase keys are meant to be public (like a mailing address). The real security is in Firestore Security Rules. I wrote rules that say: "Only allow deleting a post if request.auth.uid == resource.data.authorId." Now, even if you have my key, you can't wipe my database.
2. Component Ordering
Because I was writing everything in a single file (no build step), JavaScript execution order mattered. If I defined the App component before the Navbar component, the whole screen went black. I learned to structure my code strictly: Helpers -> Components -> Views -> App.
The Result
The final product, BabaForum, is a sleek, glassmorphism-styled social hub.
User Profiles: Bios, follower counts, and post history.
Social Graph: Follow/Unfollow functionality.
Notifications: Alerts when someone replies or follows you.
Admin Panel: A secret dashboard where I can prune old posts and clean up the database.
Try it Yourself
You can check out the live demo here. Feel free to post a "Hello" in the General section!
👉 Live Demo: https://babanymous.github.io/forum/
If you are looking for a sign to build that side project, this is it. You don't need a budget. You just need an idea and a little bit of JavaScript.
Happy Coding!
Top comments (0)