Creating something of your own is always specialβ€”and this blog is exactly that for me. I wanted a platform where I could not only write but also showcase my skills, design choices, and tech stack preferences. So, here's a behind-the-scenes look at how I built this very blog you're reading!


🧰 Tech Stack I Used

This project was a great exercise in combining a clean frontend with a powerful yet lightweight backend. Here's what powers the platform:

  • Frontend: HTML, CSS, Bootstrap, and JavaScript
  • Backend: Flask (Python)
  • Database: Firebase Realtime Database
  • Hosting: Vercel (Yes, you can host Flask projects on Vercel with a few tweaks!)
  • Content Format: Markdown β€” for smooth and elegant blog writing ✍️

✨ Key Features

Though I kept the MVP (Minimum Viable Product) minimal to focus on the core functionality, here’s what it currently supports:

  • βœ… User Authentication β€” Secure login & signup system
  • βœ… Markdown-Based Blog Editor β€” Easily write formatted posts
  • βœ… Fully Responsive UI β€” Looks great on desktop and mobile
  • βœ… Smooth Animations β€” Subtle transitions to keep things fresh

🎯 Why I Built It

I’ve always wanted a custom space to share what I build, learn, and explore in tech. Instead of relying on Medium or Hashnode, I wanted a fully self-owned platform β€” something I could tweak, expand, and even break (and fix!).


πŸ›  The Development Process

I started with basic wireframing, then moved on to building the frontend using Bootstrap for layout and responsiveness. Once the UI looked good, I integrated it with Flask to serve dynamic content and handle routes. Firebase served as my database since it's easy to connect with and doesn't require heavy configuration.

The Markdown integration lets me write blogs with formatting power and simplicity, without needing a WYSIWYG editor.


🧩 Challenges I Faced

  • Integrating Firebase with Flask: It took some effort to figure out the authentication and data structure, especially without using a traditional SQL database.
  • Markdown Rendering: Making sure blog posts render correctly and securely required sanitizing input and using the right parser.
  • Responsive Design: I had to tweak several Bootstrap elements manually to make everything look good on both desktop and mobile.

πŸš€ Deployment

Though Flask isn’t natively supported on Vercel, I managed to make it work with a custom vercel.json and some clever configuration. The result? Fast, serverless hosting with seamless CI/CD.


🧠 What I Learned

  • Working with Flask and Firebase together is fun but a bit unconventional.
  • Clean design and responsiveness matter more than flashy features.
  • Building something from scratch gives you full control β€” and full responsibility!

πŸ‘€ What’s Next?

  • βœ… Comments and reactions on posts
  • βœ… Admin dashboard for post management
  • βœ… Blog categories and tags
  • βœ… Theme switcher (dark/light mode)

This is just the beginning β€” more features are coming as I continue improving the platform. Thanks for reading this far, and stay tuned for more posts (like this one)!


Developed by Khan Faisal β€” exploring, building, and sharing one line of code at a time.