Building a portfolio website is every developer's rite of passage. It's not just about showing your skills — it's about experimenting, breaking things, fixing them, and learning along the way. Recently, I built and hosted my portfolio website on Firebase Hosting, and in the process, I discovered what I like to call Vibecoding.

👉 Live link: https://portfolio-website-99a6d.web.app/

⚠️ Note: The site is still a work-in-progress and not yet mobile-optimized. Responsiveness is coming soon!

🎵 What is Vibecoding?

Vibecoding is my way of describing how I coded this project:

Sitting with my laptop, headphones on, playlist running, and just vibing with the flow of code.
It's not about perfect planning; it's about getting into the rhythm, fixing issues as they come, and letting creativity drive the process.
Some developers call it "flow state," but I like "vibecoding" because it feels more fun and personal.

When you vibecode, you don't wait for the perfect roadmap. You start building, deploy often, learn from errors, and let the vibe guide you.

⚡ The Bolt.new Experience

Here's the surprising part: I don't even know JavaScript, TypeScript, or Java. My background is in Python, SQL, and C++ — yet I still managed to build this portfolio.

How? Thanks to Bolt.new, a tool that made creating this React + Vite project a lot easier. Bolt allowed me to skip a lot of boilerplate setup and directly start experimenting with frontend code.

This shows that you don't always need to master every language to ship something useful. Sometimes, the right tools bridge the gap.

🚀 Hosting Portfolio on Firebase

1. Building the Project

Since I used React + Vite, the production build step was simple:

npm run build

This creates a dist folder with optimized files ready for deployment.

2. Firebase Setup

1. Install Firebase CLI globally:

npm install -g firebase-tools

2. Login to Firebase:

firebase login

3. Initialize hosting in the project directory:

firebase init hosting

Select your Firebase project
Set dist as the public directory
Choose yes for single-page app config

3. Deploying to Live

firebase deploy

And boom 💥 — my portfolio was live at

👉 https://portfolio-website-99a6d.web.app/

🛠️ Common Errors & Fixes

Along the way, I faced multiple errors. Here's how I solved them:

❌ Error: No currently active project

Error: No currently active project.

✅ Fix: Run

firebase use --add

and select your Firebase project.

❌ Error: Firestore API disabled (403)

Cloud Firestore API has not been used in project ...

✅ Fix: Go to

👉 Enable Firestore API

and enable the API, then redeploy.

❌ Deprecation Warnings (like `node-domexception`)

These are safe to ignore in most cases. Just make sure you're on a recent Node.js version.

📊 Monitoring the Website

Deployment isn't the end. I also explored monitoring options:

Firebase Performance Monitoring – to track response times and usage.
UptimeRobot – free tool to ping my website every 5 minutes.
Sentry – optional for tracking runtime errors.

This ensures that if something breaks, I know before users do.

📈 SEO Considerations

Since this is a portfolio, discoverability matters. Some steps I applied:

Added meta tags (title, description, keywords) inside index.html
Deployed on Firebase with HTTPS (Google ranks secure sites higher)
Plan to add a sitemap.xml and robots.txt for better crawling

Right now, my site isn't mobile-oriented, so SEO isn't perfect — but once responsiveness is fixed, search engines will rank it better.

💡 Lessons from Vibecoding + Firebase

Start messy, refine later. Vibecoding helps you begin without overthinking.
Tools > knowledge sometimes. Bolt.new helped me code in a stack I didn't even know.
Deployment is half the battle. Use Firebase for quick hosting wins.
Errors are part of the process. Every warning taught me something new.
Monitoring matters. A live site without uptime monitoring is risky.
SEO is ongoing. Don't ignore metadata and responsiveness.

🎯 Final Thoughts

Building this portfolio wasn't about perfection — it was about momentum. Vibecoding gave me the mindset to push forward, Bolt.new gave me the starting boost, Firebase gave me the platform to deploy fast, and monitoring gave me peace of mind.

The journey continues: I still need to make my portfolio mobile-friendly and add CI/CD pipelines so updates go live automatically after each GitHub push.

But hey, that's the fun of vibecoding — the vibe evolves with you. ✨

👨‍💻 If you're a developer building your portfolio, I highly recommend vibecoding your way into Firebase Hosting. Deploy fast, fix as you go, and keep vibing.

StackFeed

🚀 From Python to Portfolio: How I Vibecoded My First Website Without Knowing JavaScript