DEV Community

Ahmed Kadiwala
Ahmed Kadiwala

Posted on

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

#webdev #portfolio #frontend #beginners

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
Enter fullscreen mode Exit fullscreen mode

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

2. Firebase Setup

 1. Install Firebase CLI globally:

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

 2. Login to Firebase:

firebase login
Enter fullscreen mode Exit fullscreen mode

 3. Initialize hosting in the project directory:

firebase init hosting
Enter fullscreen mode Exit fullscreen mode
  • Select your Firebase project
  • Set dist as the public directory
  • Choose yes for single-page app config

3. Deploying to Live 

firebase deploy
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

✅ Fix: Run

firebase use --add
Enter fullscreen mode Exit fullscreen mode

and select your Firebase project.

❌ Error: Firestore API disabled (403) 

Cloud Firestore API has not been used in project ...
Enter fullscreen mode Exit fullscreen mode

✅ 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

  1. Start messy, refine later. Vibecoding helps you begin without overthinking.
  2. Tools > knowledge sometimes. Bolt.new helped me code in a stack I didn't even know.
  3. Deployment is half the battle. Use Firebase for quick hosting wins.
  4. Errors are part of the process. Every warning taught me something new.
  5. Monitoring matters. A live site without uptime monitoring is risky.
  6. 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.

Top comments (1)

Collapse
 
zarajohnson profile image
Zara Johnson •

Love the vibecoding concept! Inspiring to see someone build a portfolio without knowing JS