Forem: Sufal Thakre

🛠️Building a Simple File Organizer CLI Using Node.js

Sufal Thakre — Thu, 29 Jan 2026 05:44:51 +0000

When working daily on my system, my Downloads folder keeps getting messy — images, PDFs, videos, code files, all mixed together. Manually organizing them again and again felt unnecessary.

So, as part of an assignment (and also to solve my own problem), I decided to build a simple command-line utility using Node.js.

❓ The Problem

Files from browsers, tools, and apps pile up quickly
Finding the right file becomes time-consuming
Manually creating folders and moving files is repetitive

I wanted a small, reusable tool that could do this automatically.

💡 The Solution

I built a Node.js CLI tool that:

Takes a folder path as input
Reads all files in that folder
Categorizes them based on file extensions
Creates folders like:
- Images
- Documents
- Videos
- Audio
- Code
- Archives
Moves files into the correct folders safely

It uses only Node.js standard libraries — no external dependencies.

⚙️ Tech Stack

Node.js
JavaScript (ES Modules)
fs module for file operations
path module for path handling
Command-line arguments via process.argv

▶️ How to Run the Tool

npm install
npm start -- "/path/to/your/folder"

Example:

npm start -- "~/Downloads"

The tool converts the path to an absolute path, validates it, and then starts organizing files.

🧠 Design Decisions

Used synchronous file operations for clarity and simplicity
Converted relative paths to absolute paths to avoid errors
Stored only necessary data in memory
Focused on clean and readable logic
Built as a CLI tool to keep it lightweight and fast

🎥 Demo Video

I also recorded a short demo video explaining:

The problem
How the tool works
My design choices

📹 Video:

📦 Source Code

GitHub Repository:
👉 https://github.com/Sufalthakre18/file-organizer-cli

🚀 What I Learned

Working with the filesystem in Node.js
Handling paths correctly across systems
Writing CLI-based tools
Thinking about real-world usability instead of just features

🙌 Feedback Welcome

This is a simple project, but it solved a real problem for me.
I’d love feedback, suggestions, or ideas to improve it further.

Thanks for reading!

Building GigFlow: A Real-Time Freelance Marketplace with Secure Hiring Logic

Sufal Thakre — Fri, 16 Jan 2026 06:35:56 +0000

Modern marketplaces aren’t just about CRUD APIs — they’re about correctness, trust, and real-time feedback. In this post, I’ll walk through how I built GigFlow, a full-stack freelance marketplace where clients can post jobs, freelancers can bid, and hiring happens atomically and in real time.

Demo Video:

This project focuses heavily on:

Secure authentication
Correct hiring logic
Preventing race conditions
Real-time updates using Socket.io

🚀 What is GigFlow?

GigFlow is a mini freelance marketplace where:

Any authenticated user can post a gig (client role)
Any user can bid on gigs (freelancer role)
A client can hire exactly one freelancer per gig
All other bids are automatically rejected
The hired freelancer gets a real-time notification

The core challenge wasn’t the UI — it was ensuring data integrity and correctness under concurrency.

🧱 Tech Stack

Frontend

React (Vite)
Tailwind CSS
Context API for state management
Socket.io Client
Fetch API with credentials

Backend

Node.js + Express
MongoDB + Mongoose
JWT Authentication (HttpOnly cookies)
Socket.io
MongoDB Transactions

Deployment

Frontend: Vercel
Backend: Render
Database: MongoDB Atlas

🔐 Authentication (JWT + HttpOnly Cookies)

Authentication is handled using JWT stored in HttpOnly cookies, which:

Prevents access from JavaScript (XSS-safe)
Works cleanly with credentials: "include"

Each request:

Verifies the JWT
Attaches the authenticated user to req.user

This enables role-less design — users can act as both client and freelancer without separate accounts.

📦 Core Data Models

User

{
  name,
  email,
  password
}

Gig

{
  title,
  description,
  budget,
  ownerId,
  status: "open" | "assigned",
  assignedTo
}

Bid

{
  gigId,
  freelancerId,
  message,
  price,
  status: "pending" | "hired" | "rejected"
}

🧠 The Hiring Problem (The Hard Part)

The most important rule:

Only one freelancer can be hired for a gig — ever.

Edge case:

Two clients (or two tabs) click Hire at the same time
Without protection, two bids could be marked as hired

This is where many systems fail.

🔒 Solving Race Conditions with MongoDB Transactions

The hire logic is wrapped inside a MongoDB session + transaction.

High-level flow:

Start a session
Check if the gig is still open
Update gig → assigned
Mark selected bid → hired
Mark all other bids → rejected
Commit transaction

If any step fails, everything rolls back.

This guarantees:

Exactly one hired freelancer
No partial or inconsistent state

⚡ Real-Time Updates with Socket.io

Once a freelancer is hired:

The backend emits a hired event to that freelancer’s socket room
The freelancer’s dashboard updates instantly

No polling. No refresh. Instant feedback.

🖥️ Frontend Flow

Client

Create gig
View bids
Click Hire
Gig becomes assigned

Freelancer

Submit bids
Track bid status
Receive real-time hire notification

State is kept minimal and predictable using Context API.

🌍 Deployment Lessons

Backend (Render)

Environment variables must be explicitly set
CORS must allow the deployed frontend domain
Socket.io needs the same CORS config as Express

Frontend (Vercel)

API base URL must point to deployed backend
Fetch requests must include credentials

🧪 What This Project Demonstrates

Correct API design
Secure authentication
Transactional integrity
Real-time communication
Production deployment awareness

This is not a “todo app” — it’s a system designed to behave correctly under pressure.

🔗 Links

Live App: https://account-manager-vite.vercel.app/
GitHub Repo: https://github.com/Sufalthakre18/gigflow-fullstack-marketplace
Home page :

🧠 Final Thoughts

The hardest part of full-stack development isn’t writing code — it’s making sure the system behaves correctly when multiple things happen at once.

GigFlow was built with that principle in mind.

Build a Modern Weather Forecast App with JavaScript & Tailwind

Sufal Thakre — Thu, 27 Nov 2025 00:05:51 +0000

A small, real-world project to practice APIs, responsive UI, and frontend polish.

Demo Video

I built a modern, responsive Weather Forecast App using Vanilla JavaScript and Tailwind CSS, powered by the Open-Meteo API. It supports city search, geolocation, a 5-day forecast, animated UI, a °C/°F toggle (today only), and recent searches saved to localStorage. This article shows why and how I built it, the core code, setup steps, and lessons learned.

Why build this

Small projects let you practice real problems: async API calls, data normalization, UI updates, responsive layout, and error handling. I wanted a project that looks polished and is practical — useful for a portfolio and for learning frontend fundamentals.

What it does (features)

Search weather by city name (geocoding)
Use browser geolocation to get local weather
Show current temperature, humidity, wind speed and weather description
5-day forecast with icons, min/max temps, wind & humidity
°C / °F toggle (applies to today's temperature)
Recent searches saved to localStorage
Animated backgrounds (sunny, rainy, cloudy, stormy, snowy)
Small SVG area charts for wind & humidity
Graceful error handling with a custom popup (no alert())

Tech stack

JavaScript (ES6+)
Tailwind CSS
Open-Meteo API (no API key required)
Static HTML/CSS/JS (no build tools required)

How it works (data flow)

User searches city → geocoding API returns latitude & longitude.
Use lat/lon to fetch forecast and current weather from Open-Meteo.
Normalize fields, update DOM with current and daily data.
Save city to recent searches (localStorage).
Handle errors, show popup, and keep UI responsive.

Key code snippets

Robust fetch with timeout & validation

async function fetchWeatherData(lat, lon, locationName) {

  let params = new URLSearchParams({
    latitude: lat,
    longitude: lon,
    current: 'temperature_2m,relative_humidity_2m,wind_speed_10m,weathercode',
    daily: 'temperature_2m_max,temperature_2m_min,weathercode,wind_speed_10m_max,relative_humidity_2m_mean',
    temperature_unit: 'celsius',
    timezone: 'auto',
    forecast_days: 5
  })

  try {
    const weather = await fetch(`${WEATHER_URL}?${params}`)
    if (!weather.ok) {
      throw new Error(`Weather API error: ${weather.status} ${weather.statusText}`);
    }
    const data = await weather.json();

    // Current weather section updation in UI
    let currentTemp = 0;
    const interval = setInterval(() => {
      currentTemp++;
      currentTemperatur.innerHTML = `${currentTemp}<span class="text-4xl md:text-6xl">${data.current_units.temperature_2m}</span>`;
      if (currentTemp >= Math.round(data.current.temperature_2m)) clearInterval(interval);
    }, 50);
    locationDisplay.textContent = locationName
    humidityLevel.textContent = `${data.current.relative_humidity_2m}%`
    windSpeed.textContent = `${data.current.wind_speed_10m}km/h`
    weatherCondition.textContent = `${weatherMap[data.current.weathercode].h1 || 'unknown'}`
    weatherDescription.textContent = `${weatherMap[data.current.weathercode].h2 || "No data available"}`
    weatherExplanation.textContent = `${weatherMap[data.current.weathercode].p || ""}`
    rawTemp = data.current.temperature_2m;


    // 5 days forecast updation
    forecastCard.forEach((cards, index) => {
      if (index < 5) {
        const minTemp = Math.round(data.daily.temperature_2m_min[index]);
        const minTempUnit = data.daily_units.temperature_2m_min
        const maxTemp = Math.round(data.daily.temperature_2m_max[index]);
        const maxTempUnit = data.daily_units.temperature_2m_max
        const wind = data.daily.wind_speed_10m_max[index];
        const humidity = data.daily.relative_humidity_2m_mean[index];
        const date = new Date(data.daily.time[index]);
        const dayName = date.toLocaleDateString('en-US', { weekday: 'long' });

        // weather code for cloude icons 
        const weathericon = getCloudIcon(data.daily.weathercode[index])
        cards.innerHTML = `<h3 class="text-xs md:text-sm text-white/60 mb-1">${dayName}</h3>
          <h2 class="text-xs mb-2 md:mb-3 text-white/50">${data.daily.time[index]}</h2>
          <i class="fas fa-${weathericon} text-3xl md:text-4xl lg:text-5xl my-2 md:my-3" style="text-shadow: 0 0 20px rgba(255,255,255,0.5)"></i>
          <div class="flex justify-around text-sm mt-2">
              <span><i class="fas fa-thermometer-half mr-1"></i>${minTemp}${minTempUnit}- ${maxTemp}${maxTempUnit}</span>
              <span><i class="fas fa-wind mr-1"></i>${wind}km/h</span>
              <span><i class="fas fa-droplet mr-1"></i>${humidity}%</span>
          </div>`
      }
    })

    changeWeatherBackground(data.current.weathercode);
    updateGraphs(data.current.wind_speed_10m, data.current.relative_humidity_2m);
    locationBtn.innerHTML = '<i class="fas fa-location-arrow mr-2"></i>Use My Location';

    // Extreme temp alerts
    if (Math.round(data.current.temperature_2m) > 40) showError('Extreme Heat Alert: Temperature above 40°C! Stay hydrated and avoid direct sun.');
    if (Math.round(data.current.temperature_2m) < 5) showError('Extreme Cold Alert: Temperature below 5°C! Dress warmly and limit outdoor exposure.');


  } catch (error) {
    console.error('Weather fetch failed:', error);
    showError('Failed to load weather. Check internet or try again later.');
  }

}

Temperature toggle (today only)

// toggle button for c/f
let rawTemp = 0, unit = '°C';
document.getElementById('toggleUnit').onclick = () => {
  unit = unit === '°C' ? '°F' : '°C';
  const t = unit === '°C' ? Math.round(rawTemp) : Math.round(rawTemp * 9/5 + 32);
  currentTemperatur.innerHTML = `${t}<span class="text-4xl md:text-6xl">${unit}</span>`;
  this.textContent = unit;
};

Challenges & lessons

API fields sometimes vary — defensive data normalization was needed.
Animations caused repaint issues on low-end devices — solved with layers and reduced blur.
Geolocation permission errors must be handled gracefully for a good UX.

I Built a Full-Stack Student Registration System with Vanilla JS + Tailwind in Just 7 Days (and Made It Fully Responsive)

Sufal Thakre — Wed, 19 Nov 2025 15:43:37 +0000

“A little progress each day adds up to big results.”

Last week I finished Internshala’s Developing Interactive Websites with JavaScript course and decided the final assignment wasn’t going to be just another “submit and forget” project.

So I took the basic requirement and turned it into a complete CRUD web app with validation, localStorage persistence, responsive design, and clean code.

Live Demo → https://student-registration-system-one-sandy.vercel.app/index.html

GitHub Repo → https://github.com/Sufalthakre18/Student-Registration-System

(Star it if you like it ⭐)

What I Built – Student Registration System

A modern, fully responsive student management system where you can:

Register new students with full form validation
View all students in a scrollable table
Edit & Delete records with confirmation
Everything persists using localStorage (no backend needed)

Features I’m Proud Of

Feature	Implementation
Form validation (real-time)	Custom regex + instant error messages
No duplicate Student IDs	Checked against localStorage array
Inline editing	Click → edit → save/cancel without page reload
Auto scrollbar after 5+ records	Pure JS height detection
100% responsive (mobile-first)	Tailwind breakpoints: ≤640px → 641-1024px → ≥1025px
Clean separation of concerns	Separate files for utils, validation, UI logic

Tech Stack (All Vanilla – No Frameworks)

HTML5 + Semantic tags
Tailwind CSS (via CDN – production ready)
Vanilla JavaScript (ES6+) – classes, modules, async-like flow
localStorage for persistence

Screenshot

What I Learned (The Real Wins)

Deep DOM manipulation without jQuery or React
Writing reusable validation functions
Managing state manually with localStorage
Mobile-first responsive design with Tailwind
How to structure a bigger vanilla JS project so it doesn’t become spaghetti

This was my final project for Internshala’s course, but I went way beyond the requirements because I wanted something I could proudly show in interviews.

Certificate for proof ↓

If you’re learning JavaScript in 2025, fork this repo and try adding dark mode or search/filter – PRs welcome!

Let me know in the comments what feature you’d add next!

javascript #webdev #tailwindcss #100DaysOfCode #beginners #fullstack #vanillajs #internshala

— Sufal Thakre

Building in public | Nov 2025

Building my Personal Portfolio with Tailwind CSS

Sufal Thakre — Tue, 21 Oct 2025 03:47:51 +0000

A single-page, responsive portfolio built during Internshala (Course 2) using semantic HTML, Tailwind CSS, and vanilla JS. Features: day/night toggle, animated skill bars, interactive project cards, and a contact form. Live demo: https://my-portfolio-pearl-xi-96.vercel.app/

Live demo

https://my-portfolio-pearl-xi-96.vercel.app/

Why I built this

I built and published my Personal Portfolio as part of Internshala (Course 2) to create a clean, responsive single-page site that demonstrates my frontend skills, attention to micro-interactions, and UI sensibility. The goal was to ship a polished product that recruiters and engineers can browse quickly.

Tech stack

HTML5 (semantic)
Tailwind CSS (utility-first styling)
JavaScript (vanilla for interactivity)
Font Awesome + Google Fonts (Poppins)

What I built — highlights

🌓 Day / Night theme toggle with persistent preference (localStorage)
📱 Responsive layouts tuned for desktop, tablet (iPad Mini), and mobile (Samsung Galaxy S8+)
✨ CSS animations & transitions for micro-interactions (buttons, cards, headings)
🎯 Interactive project cards with hover transforms & live preview / GitHub links
📊 Animated skill bars that animate into view on scroll
📧 Contact form with basic validation
🏆 Certifications section (including my Internshala certificate)

Responsive & accessibility notes

I prioritized semantic HTML (<header>, <main>, <section>, <footer>) for screen readers and SEO.
Navigation includes skip links and ARIA attributes where necessary.
The design adapts with Tailwind responsive utilities — md:flex, lg:grid, etc. — and I manually tested key breakpoints.

Deployment

Deployed on Vercel for fast static hosting and quick previews. Zero-config deployment makes iterative changes simple.

What I learned

Tailwind significantly speeds up layout tasks and keeps styling consistent.
Micro-interactions (transitions, hover states) add polish but should be performant and accessible.
Building a portfolio is as much about storytelling and UX as it is about code.

What’s next

Add project case studies (problem → approach → code → result)
Add light analytics to understand which projects visitors view
Consider a React-based rewrite for reusable components

I built this portfolio during Internshala (Course 2) to showcase my UI & frontend skills. I’m actively looking for Frontend / UI Developer roles (remote or hybrid). If you’re hiring or know someone who is, I’d love to connect — DM me or check the resume and live demo on the site:

🔗 https://my-portfolio-pearl-xi-96.vercel.app/

portfolio, webdev, frontend, tailwindcss, javascript, internshala

🚀 Building a Portfolio Clone with HTML, CSS, JavaScript, and GSAP

Sufal Thakre — Sat, 27 Sep 2025 02:49:44 +0000

I’m currently learning Full-Stack Development, and as part of my journey I built a portfolio clone project to sharpen my HTML, CSS, and JavaScript skills.

This project was a great way to understand the basics of structure, styling, and animation in modern web development.

source code

Sufalthakre18 / javascript_projects

Portfolio Website Frontend Clone

🔗 Live Demo

Check out the live version here:
Live Site

Overview

A sleek, modern portfolio website built with HTML, CSS, and JavaScript. This project demonstrates front-end development skills through clean design, interactive elements, and smooth animations. It's a clone inspired by professional portfolios, featuring sections for hero/intro, skills/projects/certifications, about me, subscribe, and footer. Perfect for showcasing as a personal site or resume piece.

Features

Custom Mouse Cursor: A small white circle that follows the mouse with subtle scaling effects for a dynamic feel.
Page Load Animations: Elements like the nav, headings, and footer fade in and slide into place on load.
Interactive Hover Effects: Hover over skills/projects/certifications to reveal and animate images with fade, movement, and rotation.
Responsive Menu: Click "MENU" to toggle a dropdown navigation with smooth transitions.
Minimalist Design: Dark theme with uppercase typography, no…

View on GitHub

Live demo

🔨** What I built**

A simple portfolio clone that includes a navbar, headings, about section, and footer.
Smooth animations for text, navbar, and footer on page load.
A custom mouse follower that scales dynamically as you move.
Interactive project sections where hovering shows an image with rotation.

🎯** Why I used GSAP**

I wanted to move beyond static layouts and try animations. While CSS transitions are useful, GSAP (GreenSock Animation Platform) gave me:
More control over easing and timing
Sequenced animations with timelines
Smooth hover and cursor effects

📚 What I learned

Structuring a webpage with semantic HTML
Styling layouts and typography with CSS
Adding interactivity with JavaScript event listeners
Using GSAP for smooth animations and transitions
Importance of writing a clean, maintainable project structure

💡 Key Takeaways

Building small projects like this is helping me strengthen my front-end skills before diving deeper into back-end and full-stack development. Every project teaches me something new — whether it’s handling animations, making layouts responsive, or improving my code organization.

🙌 Feedback welcome!

I’m learning step by step, and I’d love your feedback on this project. How can I make the animations smoother or the design cleaner?

webdev #javascript #html #css #gsap #frontend

I just finished a beginner project combining a BMI calculator, a live clock, and a GitHub profile card using the GitHub API.

Sufal Thakre — Tue, 23 Sep 2025 16:49:08 +0000

Github Profile Card using API (beginner)

Small web project made by me to learn DOM, fetch API and a bit of CSS.
It shows a Github profile card (avatar, followers, repos, link) and also
includes a simple BMI calculator and a live clock. Made to practice real stuff.

What it does

Fetches GitHub user data from https://api.github.com/users/<username> using fetch.
Displays: avatar, name, bio, followers, public repos, following and a link to the GitHub profile.
Has a small BMI calculator (height in cm, weight in kg).
Shows your local time with a live clock.

Here my code :-
GitHub