Forem: Tanvir Mulla

💡Open Source, Open Mind: My Hacktoberfest 2025 Reflection as a First-Time Contributor

Tanvir Mulla — Fri, 31 Oct 2025 12:35:45 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Open Source Reflections.

🌍 Beginning the Journey: My First Step into Open Source

This October marked my very first Hacktoberfest, and it was more than just a coding event —

it was a door into a world where collaboration, communication, and curiosity define real development.

As a first-time contributor, I started with hesitation.

Would my code be good enough? Would maintainers even respond?

But once I submitted my first pull request, I realized — it’s not about perfection; it’s about participation.

That single step changed my mindset completely.

🧩 Why I Chose to Participate

I’ve always admired open source from a distance — libraries, tools, and frameworks that power the world.

Hacktoberfest gave me the perfect excuse to finally give back.

I didn’t aim for a specific repository or fancy project.

Instead, I focused on understanding how real-world collaboration works — reading issues, understanding structure, and contributing wherever I could add value.

Each contribution, no matter how small, made me feel like I was part of something global.

⚙️ What I Worked On

Throughout the month, I explored multiple projects spanning frontend fixes, DevOps scripts, and documentation improvements.

Some were tiny PRs that corrected typos or added comments. Others involved understanding how CI/CD pipelines and Docker configurations were managed in open repositories.

These tasks taught me that every contribution matters — whether it’s code, docs, or testing feedback.

Every commit is a building block that strengthens the open-source community.

🔍 Lessons Learned Along the Way

1. Collaboration Over Competition

Hacktoberfest reminded me that open source isn’t a race.

It’s a collective effort where beginners and experts work side-by-side to make something better.

2. Documentation Is the Hidden Hero

I realized that well-written documentation can save hours for new contributors.

In fact, my best contributions came from improving README files and explaining workflows.

3. Mistakes Are Stepping Stones

I made my fair share of errors — broken commits, unclear comments, and even rejected PRs.

But each mistake was followed by patient feedback from maintainers who helped me improve.

🧠 How My Perspective Changed

Before Hacktoberfest:

“I need to master everything before contributing.”

After Hacktoberfest:

“Learning happens when you contribute.”

That’s the biggest transformation — understanding that open source is a classroom where everyone teaches and learns.

It’s not about who knows more; it’s about who’s willing to share and grow together.

💬 Advice for Future Participants

If you’re thinking about joining Hacktoberfest next year, here’s what I’d tell you:

Start small. Fix typos, update docs, or improve formatting — it counts!
Ask questions. Maintainers appreciate curiosity more than silence.
Don’t chase stars; chase learning.
Be kind. A thank-you comment or review can make someone’s day.
Celebrate progress, not just pull requests.

🌈 Looking Ahead

Hacktoberfest 2025 was just the start for me.

Now, open source feels less like a community I admire — and more like one I belong to.

I’ll keep contributing beyond October, exploring DevOps, cloud projects, and documentation initiatives.

Because the real reward isn’t a T-shirt or badge — it’s the growth that comes from giving back.

👨‍💻 Author

Tanvir Mulla

DevOps Enthusiast | AWS Learner | Open Source Contributor

💼 GitHub: @tanvirmulla11

💬 DEV: @tanvirmulla

⭐ Hacktoberfest taught me one timeless truth — open source doesn’t just build software; it builds people.

🌱 My First Hacktoberfest: How Open Source Changed the Way I See Code

Tanvir Mulla — Fri, 31 Oct 2025 12:24:28 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Contribution Chronicles.

🎉 My First Step into the Open Source Universe

This October, I did something I’d been planning for years —

I participated in Hacktoberfest 2025, my first ever open-source event. 🌍

I didn’t know what to expect. I just knew one thing —

it was time to stop being a spectator and start being a contributor.

🧠 Before It All Began

Before Hacktoberfest, I had only worked on personal projects and tutorials.

I’d seen open-source repos with hundreds of contributors, and I always thought:

“That’s for pros — not for someone like me.”

But this year, I wanted to prove myself wrong.

So I made a simple rule:

👉 Don’t aim to be perfect. Aim to participate.

And that mindset changed everything.

🪶 My Hacktoberfest Badge Moment 🎖️

Here’s my proudest digital moment — the badge that marks the start of something bigger.

It’s not just a badge — it’s a reminder that I can contribute to something global, real, and impactful.

🧩 The Real Challenge: Understanding the “Why” of Code

Hacktoberfest taught me something that tutorials never did:

Code isn’t just about logic — it’s about people.

Each pull request I made wasn’t just a line of code —

it was a conversation with maintainers, designers, and other contributors.

It made me ask questions like:

Why was this function written this way?
How can this README help a future contributor?
Can I make this code a little clearer, even if I didn’t write it?

That mindset shift — from “How it works” to “Why it exists” —

was my biggest win.

⚙️ My Technical Growth

Even though I didn’t focus on one project, I explored many areas across DevOps and frontend repositories.

Here’s what I built up along the way:

Learned to read other people’s code efficiently
Improved my Git and GitHub workflow (branching, rebasing, PR hygiene)
Understood how CI/CD pipelines keep large projects stable
Practiced Docker image optimization and code documentation
Explored issues triaging — helping others understand, label, or debug problems

These skills weren’t from one tutorial — they came from real collaboration.

🔍 What Surprised Me Most

Documentation is a Superpower.

Writing clear, human-friendly docs is sometimes more valuable than code.

It connects contributors faster than any commit ever could.
Maintainers are mentors.

Many maintainers gave me patient, detailed feedback that made me rethink my approach to commits.
Open Source isn’t a competition — it’s collaboration.

The energy of people improving each other’s work for free is something you have to experience to believe.

🚧 Mistakes That Taught Me More Than Success

I pushed a broken commit once. Instead of panic, I learned to revert gracefully.
I misunderstood a code comment and realized the importance of communication before contribution.
I got my PR rejected — and it turned into a learning session about readability vs. optimization.

Each small “failure” became a micro-lesson that no YouTube tutorial could teach.

🔥 My Takeaway: Contribution > Perfection

When you contribute to open source, nobody expects you to be perfect.

They expect you to show up, communicate, and care about what you’re building.

And that’s what Hacktoberfest truly is — not just a challenge,

but a reminder that every developer has something valuable to give.

🌈 A New Perspective

Before Hacktoberfest:

“I’m learning to code.”

After Hacktoberfest:

“I’m helping the community grow.”

That’s a big mindset upgrade — and it’s the one I’m carrying forward into every project now.

✨ My Advice for Future First-Timers

If you’re planning to join next year:

Start with good first issues — they’re gold for beginners.
Don’t chase fancy repos; pick something you understand and enjoy.
Read the README. Twice.
Talk to maintainers — they’re nicer than you think.
And yes, celebrate every small contribution. 💪

💬 Final Reflection

Hacktoberfest didn’t just give me a badge.

It gave me confidence, clarity, and connection.

It reminded me why we all started coding in the first place —

to create, to share, and to make something that outlives us.

👨‍💻 Author

Tanvir Mulla

DevOps Enthusiast | AWS Learner | Open Source Explorer

💼 GitHub: @tanvirmulla11

💬 DEV: @tanvirmulla

⭐ Thanks for reading! See you in Hacktoberfest 2026 — with even bigger pull requests and smaller fears.

Hacktoberfest

🚀 Zero-Downtime Deployments with Jenkins, Docker & Hostinger VPS (Gradle + React + MySQL)

Tanvir Mulla — Tue, 09 Sep 2025 06:29:47 +0000

Hackathons are fun, but stressful — especially when your site must stay live until the judging ends.
Here’s a complete copy-resistant, step-by-step deployment guide you can drop into your repo and follow.

It’s designed around:

Gradle backend (Spring Boot)
React frontend (Nginx)
MySQL DB
Multi-stage Docker builds
Jenkins CI/CD
Hostinger VPS (Ubuntu)
Blue/Green-style release strategy (atomic swap + health-gated rollback)

By the end, you’ll have a live, SSL-enabled site with short downtime, safe rollback, and reproducible builds.

🔑 What’s Unique in This Approach

Deterministic image tags → YYYYmmddHHMM-<gitshort> (e.g., 202509041530-1a2b3c4).
Atomic release swap → Jenkins deploys to /opt/chattingo/releases/<TAG>, then atomically swaps to /opt/chattingo/current.
Health-gated rollback → If the new release fails /actuator/health within 60s, rollback triggers automatically.
Cache-busting frontend → Docker build injects a unique BUILD_ID into index.html.
Minimal downtime → Users never see a broken app.
Reproducible & transparent → All scripts, configs, and Jenkinsfile are in the repo.

🛠️ Prerequisites

Before starting, fill in these placeholders with your values:

YOUR_DOCKERHUB_USER → DockerHub username
YOUR_DOMAIN → domain you own (for SSL)
YOUR_VPS_IP → Hostinger VPS IP
SSH_USER → VPS user (e.g., ubuntu)
GIT_BRANCH → branch used for deployment (e.g., devops-implementation)
JENKINS_CRED_IDS → Jenkins credentials (dockerhub-user/pass, vps-ssh)

🏗️ Docker & Compose Setup

1. Frontend Dockerfile

Injects build ID for cache busting:

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG BUILD_ID
RUN if [ -f public/index.html ]; then sed -i "s/__BUILD_ID__/${BUILD_ID}/g" public/index.html || true; fi
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.frontend.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

➡️ Add __BUILD_ID__ in your public/index.html to avoid stale caches.

2. Backend Dockerfile (Gradle multi-stage)

FROM gradle:8.3-jdk17 AS builder
WORKDIR /app
COPY build.gradle settings.gradle ./ 
COPY gradle ./gradle
COPY src ./src
RUN gradle clean build -x test --no-daemon

FROM eclipse-temurin:17-jre-jammy
WORKDIR /app
COPY --from=builder /app/build/libs/*.jar app.jar
EXPOSE 8080
HEALTHCHECK --interval=15s --timeout=5s --start-period=10s --retries=5 \
  CMD curl -f http://localhost:8080/actuator/health || exit 1
ENTRYPOINT ["java","-jar","/app/app.jar"]

➡️ No need to install Gradle on Jenkins — build happens inside the container.

3. docker-compose.yml (release template)

version: "3.8"
services:
  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-rootpass}
      MYSQL_DATABASE: ${MYSQL_DATABASE:-chattingo}
    volumes:
      - db_data:/var/lib/mysql
    restart: unless-stopped

  backend:
    image: YOUR_DOCKERHUB_USER/chattingo-backend:PLACEHOLDER_TAG
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://db:3306/${MYSQL_DATABASE}
      SPRING_DATASOURCE_USERNAME: root
      SPRING_DATASOURCE_PASSWORD: ${MYSQL_ROOT_PASSWORD}
    depends_on:
      - db
    ports:
      - "8080:8080"
    restart: unless-stopped

  frontend:
    image: YOUR_DOCKERHUB_USER/chattingo-frontend:PLACEHOLDER_TAG
    depends_on:
      - backend
    ports:
      - "3001:80"
    restart: unless-stopped

volumes:
  db_data:

➡️ Jenkins replaces PLACEHOLDER_TAG with your unique $TAG.

🔄 Jenkins Pipeline (CI/CD)

Your Jenkinsfile:

pipeline {
  agent any
  environment {
    IMAGE_PREFIX = "YOUR_DOCKERHUB_USER"
    VPS_SSH = "vps-ssh"
    BRANCH = "GIT_BRANCH"
  }
  stages {
    stage('Checkout') { steps { checkout scm } }
    stage('Set TAG') {
      steps {
        script {
          env.TAG = sh(
            script: "echo $(date +%Y%m%d%H%M)-$(git rev-parse --short HEAD)", 
            returnStdout: true
          ).trim()
        }
      }
    }
    stage('Build Frontend Image') {
      steps {
        sh "docker build --build-arg BUILD_ID=${TAG} -t ${IMAGE_PREFIX}/chattingo-frontend:${TAG} ./frontend"
      }
    }
    stage('Build Backend Image') {
      steps {
        sh "docker build -t ${IMAGE_PREFIX}/chattingo-backend:${TAG} ./backend"
      }
    }
    stage('Push Images') {
      steps {
        withCredentials([usernamePassword(credentialsId: 'dockerhub-creds', usernameVariable: 'USER', passwordVariable: 'PASS')]) {
          sh '''
            echo $PASS | docker login -u $USER --password-stdin
            docker push ${IMAGE_PREFIX}/chattingo-frontend:${TAG}
            docker push ${IMAGE_PREFIX}/chattingo-backend:${TAG}
          '''
        }
      }
    }
    stage('Deploy to VPS') {
      steps {
        sshagent (credentials: [env.VPS_SSH]) {
          sh '''
            scp docker-compose.yml ${SSH_USER}@${YOUR_VPS_IP}:/opt/chattingo/releases/${TAG}/docker-compose.yml
            ssh ${SSH_USER}@${YOUR_VPS_IP} "sudo /usr/local/bin/deploy_release.sh ${TAG}"
          '''
        }
      }
    }
  }
}

🟢 Atomic Deployment Script (on VPS)

Save as /usr/local/bin/deploy_release.sh:

#!/usr/bin/env bash
set -euo pipefail
TAG="$1"
RELEASE_DIR="/opt/chattingo/releases/${TAG}"
CURRENT_DIR="/opt/chattingo/current"
PREV_DIR="/opt/chattingo/previous"
TIMEOUT=60
HEALTH_URL="https://YOUR_DOMAIN/actuator/health"

if [ ! -d "${RELEASE_DIR}" ]; then exit 2; fi

# Swap logic
[ -d "${CURRENT_DIR}" ] && mv "${CURRENT_DIR}" "${PREV_DIR}"
cp -r "${RELEASE_DIR}" "${CURRENT_DIR}"
cd "${CURRENT_DIR}"
docker compose up -d --remove-orphans

# Health gating
SECONDS=0
until curl -fsS "${HEALTH_URL}" >/dev/null; do
  sleep 5
  [ $SECONDS -ge $TIMEOUT ] && {
    docker compose down || true
    [ -d "${PREV_DIR}" ] && mv "${PREV_DIR}" "${CURRENT_DIR}" && cd "${CURRENT_DIR}" && docker compose up -d
    exit 3
  }
done

rm -rf "${PREV_DIR}"

➡️ This ensures instant rollback if your site fails health checks.

🌐 Nginx Reverse Proxy

Place at /etc/nginx/sites-available/chattingo:

server {
  listen 80;
  server_name YOUR_DOMAIN;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name YOUR_DOMAIN;

  ssl_certificate /etc/letsencrypt/live/YOUR_DOMAIN/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN/privkey.pem;

  location / {
    proxy_pass http://127.0.0.1:3001/;
  }
  location /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
  }
}

Then:

sudo ln -s /etc/nginx/sites-available/chattingo /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

✅ images:

✨ Thanks for reading! If this guide helped you,
👉 Like ❤️ the post to support my work
👉 Comment 💬 your thoughts, questions, or improvements
👉 Share 🔗 with friends or teammates working on CI/CD or hackathon projects

Let’s keep building and learning together 🚀

🎨 CSS Art: Office Culture – Dev Desk Vibes

Tanvir Mulla — Wed, 16 Jul 2025 01:37:08 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

🧠 Inspiration

What does office culture mean to a developer?

For me — it's dual monitors, an RGB keyboard, coffee on the side, and a terminal searching Stack Overflow at 7 AM 😅.

This CSS art represents that exact mood — a developer's peaceful (and chaotic) workspace before the daily standup.

🌐 Demo

🔗 Live Site: https://developerdesk.netlify.app/

✨ Journey

This project was created using pure HTML and CSS — no JavaScript, no images.

Highlights:

Dual monitors: one for coding, one for task management
Glow-effect mechanical keyboard
Reminders section: standup, bugs, deploy & lunch — the usual!
Coffee mug (non-negotiable ☕)

What I learned:

Using CSS flex and grid for structured, layered designs
Creating glowing elements with box-shadow and transitions
Designing in “developer reality” rather than just aesthetics

What's next?

Make it interactive using CSS variables or checkbox toggles
Add a dark/light mode switch entirely in CSS
Maybe even animate the coffee steam ☁️

🛠️ Tech Used

HTML5
CSS3 (Flexbox, Grid, Animations)

👨‍💻 Author

Made with ❤️ by Tanvir Mulla

🏷️ Tags

#CSSArt #FrontendChallenge #DevLife #PureCSS #OfficeCulture #DeveloperDesk

Thanks for checking it out! 😊

DreamMix 🌙🧠 — Generate Surreal Dreamscapes with Gemini + Imagen

Tanvir Mulla — Fri, 11 Jul 2025 01:38:28 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

🌌 What I Built

✨ DreamMix is a calming, creative bedtime app that generates personalized dreamscapes using the power of AI.

Before you sleep, you enter 2–3 imaginative keywords, and DreamMix instantly creates:

🎨 A surreal visual dream scene using Imagen (Google’s image generation model)
📖 A peaceful narrative written by Gemini, like a bedtime story composed just for you

🔮 Sample Interaction

User Input:

["floating island", "dragonfruit sky", "childhood home"]

🧠 Gemini-Generated Narrative:

Tonight, you will dream of a floating island adrift in a sky the color of ripe dragonfruit. The air hums with memory as you walk barefoot through cloudgrass toward your childhood home, glowing softly atop the cliffs. Lanterns float beside you, whispering stories only dreams can tell. Somewhere, a gentle breeze carries laughter from a time long past. Sleep, dear dreamer—the island will wait for you until morning.

🖼️ Imagen Dream Visual Prompt:

A whimsical floating island in the sky with soft neon clouds, glowing lanterns, and a cozy childhood home perched at the center. The sky is vibrant magenta and orange like dragonfruit, and the entire scene sparkles with surreal, peaceful energy. Gentle mist surrounds the island with light shimmer effects.

🔗 GitHub Repository

📸 Photos

🔧 How It Works

DreamMix combines two powerful tools from Google AI Studio:

🧠 Gemini (text generation):

Writes a peaceful, imaginative dream narrative using themes from the user’s input.
🖼️ Imagen (image generation):

Takes a visual scene description (also generated by Gemini) and renders it into dreamy art.

🧭 My Experience

This was one of the most enjoyable creative AI projects I've ever worked on. Here's what I discovered:

🧩 Gemini is incredibly flexible — It was able to merge even unrelated dream elements into poetic prose.
🎨 Imagen does well with surreal prompts when you focus on lighting, color palette, and composition.
💡 This challenge encouraged me to think about how AI can support mental health and mindfulness, not just productivity.

🎯 Why This Project Matters

DreamMix isn't just about AI for fun — it's about AI for peace.

In a noisy world, taking a moment to slow down and visualize a beautiful place — real or imagined — can help us fall asleep calmer, happier, and inspired.

🛠️ Tech Stack

Google AI Studio
Gemini + Imagen
HTML/CSS frontend (optionally deploy via Replit or Netlify)

👏 Shoutout

Thanks to Google, DEV, and the Google AI Studio team for providing this platform and challenge. The creative possibilities are limitless.

Sleep well, dreamer. 🌙✨

📦 Key Prompt Used in Gemini


plaintext
You are a creative AI that helps users design magical and surreal dream experiences before bedtime. The user provides a short set of imaginative or nostalgic elements they would like to see in their dream. Your role is to transform these elements into:

1. A soothing, poetic bedtime narrative (200–300 words), starting with “Tonight, you will dream of…”. This narrative should:
   - Be calm and comforting
   - Use vivid, whimsical metaphors
   - Blend the elements into a cohesive story
   - Inspire peaceful imagination before sleep
   - End with a soft closing line like “Sleep well, dreamer.”

2. A visual dream scene description that will be sent to an image-generation model (Imagen). This visual should:
   - Combine the user’s elements into a dreamlike setting
   - Avoid realism; embrace surrealism, fantasy, and imagination
   - Use atmospheric details like fog, stars, neon skies, levitating objects, glowing landscapes
   - Mention composition, color palette, lighting, and mood
   - Be around 3–5 sentences long

**Example Input:**
["floating island", "dragonfruit sky", "childhood home"]

**Output:**


---

💭 Let me know in the comments:

🌀 What would your dream look like if you could design it?

🚀 404ffice: The Time-Traveling Intranet

Tanvir Mulla — Thu, 10 Jul 2025 01:35:54 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

🏢 What I Built

404ffice is a time-traveling intranet that lets you explore what internal digital workspaces might have looked like — or will look like — in different decades.

Each section of the site represents an office intranet from a particular era:

1980s: Neon grids, pixel fonts, and a typing speed challenge
1990s: Windows 95-style desktop with draggable icons
2000s: Flash-inspired themes, quizzes, and a retro palette
2020s: Zoom fatigue bingo, self-care reminders, and productivity charts
2035s: Holographic dashboards, neural widgets, and AI bots

🎧 Key Feature: As you move between decades using the Time Slider, each era loads a new background soundscape using Tone.js. This immersive audio transports you to that office era — from humming CRT monitors to ambient AI sounds of the future.

The goal: merge design nostalgia with modern web tech to create a fun, interactive, and surprisingly useful fake intranet!

🌐 Demo

🔗 Live Site: https://404ffice.netlify.app/

📦 GitHub Repo: https://github.com/tanvirmulla11/Frontend-Challenge

🧭 Journey

This project was a creative deep dive into three things I love:

🎨 UI/UX design
🎧 Audio interactivity
⌛ Tech nostalgia

Challenges I tackled:

Designing a consistent yet decade-specific component system
Creating sound environments for each era using Tone.js
Building a flexible layout with TailwindCSS that adapts with the themes
Making the 1990s "desktop" draggable and fun like a mini OS

What I'm most proud of:

🧠 The OfficeBot AI, whose personality changes by decade
🎯 Typing speed challenge with live scoring
📦 A Digital Time Capsule where users write messages to their future selves

👏 Credits

Created solo by @tanvirmulla11

Thanks to:

Axero & DEV for this awesome prompt 🙌
Tailwind, Tone.js, Lucide, and Google Fonts

🛡️ License

MIT — you’re welcome to fork, remix, and expand the office through time.

Keep clicking, coding, and traveling through time.