Every morning, a video goes live on my YouTube channel. I didn't film it. I didn't edit it. My computer did all of it while I slept.

Here's the story of how I built Progress Bar of the Year - a fully automated YouTube Shorts channel that posts a daily update on how much of the current year has passed - and the surprisingly elegant tech stack behind it.

The Idea: Simple, But Strangely Satisfying

The premise couldn't be simpler: every day, a short video goes up showing what percentage of the year has elapsed, paired with a fun historical fact about something that happened on this same day in a previous year.

That's it.

But there's something almost meditative about watching the year tick forward - and something genuinely cool about a channel that runs itself. No burnout, no filming schedule, no editor. Just code, running quietly on a small computer in the corner.

The Tech Stack at a Glance

Let's break down each piece.

Step 1: The Math - How Much of the Year Has Passed?

What it does: Calculates today's date, the total days in the current year, and the percentage of the year that's gone by.

How it works: This is pure JavaScript - no libraries needed. The logic boils down to three things:

const now = new Date();
const startOfYear = new Date(now.getFullYear(), 0, 1);
const endOfYear = new Date(now.getFullYear() + 1, 0, 1);

const elapsed = now - startOfYear;
const total = endOfYear - startOfYear;
const percentage = ((elapsed / total) * 100).toFixed(2);

It also accounts for leap years automatically, since endOfYear - startOfYear will naturally be 366 days in a leap year.

Why this approach: JavaScript's Date object handles all the heavy lifting. There's no edge case to manually code - the language figures out whether it's February 28th or 29th, whether we're in a leap year, all of it. Simple and bulletproof.

Output: A number like 38.21 - meaning 38.21% of 2026 has already passed.

Step 2: The History Hook - Google Gemini API

What it does: Fetches a genuinely interesting historical event that happened on this exact calendar day in a previous year.

Why AI instead of a static database? A hardcoded database of historical facts would work - but it would be finite, brittle, and boring to maintain. The Gemini API gives us:

• An effectively unlimited and varied set of historical facts
• Natural language output ready to display on screen
• The ability to request facts in a specific format or tone

How it works: A prompt is sent to the Gemini API each day with the current month and day, asking for a notable historical event:

const prompt = `
  Give me one interesting historical event that happened on ${month} ${day} 
  in any previous year. Keep it to 1-2 sentences. Be specific with the year.
`;

const response = await gemini.generateContent(prompt);
const fact = response.text();

The API returns something like: "49 years ago on this day, the first public screening of Star Wars generated enormous excitement among audiences who had never seen anything like it."

Why this matters for the channel: It transforms what could be a dry statistics update into something actually worth watching. Every video has a little historical surprise baked in. It gives viewers a reason to come back — not just for the percentage, but for the story of the day.

Step 3: Video Generation - Remotion

What it does: Takes the percentage and the historical fact and renders them into a polished, animated MP4 video - entirely in code.

What is Remotion? Remotion is a framework that lets you write videos using React. Instead of opening Premiere Pro or After Effects, you define your video as a React component. Animations, timing, transitions - all written in TypeScript. Then you render it to an actual video file using Node.js.

Why Remotion over other tools?

• Full programmatic control - Every pixel, every animation, every timing decision is in code. No manual steps, no GUI.
• Consistent output - The same code produces the same visual style every single day, automatically.
• React-based - If you already know React, you're immediately productive.
• High quality - Remotion renders frame-by-frame at whatever resolution and framerate you specify. The output is a proper video file, not a screen recording.

What the video looks like: A dark, minimal design with:

• The year progress percentage in large type
• A smooth animated progress bar filling to the correct point
• Today's date
• The historical fact rendered as clean text below
• A short looping background animation for visual polish

The entire VideoTemplate.tsx component is just a React component with Remotion's <AbsoluteFill>, <spring>, and timing hooks to drive the animation.

export const VideoTemplate: React.FC<VideoProps> = ({ percentage, fact, date }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({ frame, fps, config: { damping: 200 } });

  return (
    <AbsoluteFill style={{ background: '#0f0f1a' }}>
      <ProgressBar width={progress * percentage} />
      <PercentageText value={percentage} />
      <HistoricalFact text={fact} />
    </AbsoluteFill>
  );
};

Once the component is ready, rendering is a single CLI command (or programmatic call):

npx remotion render VideoTemplate out/video.mp4

Step 4: Uploading to YouTube - YouTube Data API v3

What it does: Takes the rendered MP4 and automatically uploads it to the YouTube channel with a title, description, and the correct Shorts formatting - no human involvement.

How the YouTube Data API works: Google provides an official API for interacting with YouTube programmatically. After a one-time OAuth2 authentication setup (where you grant your app permission to upload to your channel), you can upload videos, set metadata, manage playlists, and more - all from code.

The upload flow:

const youtube = google.youtube({ version: 'v3', auth: oauth2Client });

await youtube.videos.insert({
  part: ['snippet', 'status'],
  requestBody: {
    snippet: {
      title: `Year Progress Update - ${formattedDate}`,
      description: `${percentage}% of ${year} has passed.\n\n${historicalFact}`,
      tags: ['yearProgress', 'motivation', 'history'],
      categoryId: '22',
    },
    status: {
      privacyStatus: 'public',
    },
  },
  media: {
    body: fs.createReadStream('out/video.mp4'),
  },
});

Making it a YouTube Short: YouTube Shorts are simply vertical videos (9:16 aspect ratio) under 60 seconds. Remotion renders the video at 1080×1920, and that's all YouTube needs to classify it as a Short - no special API flag required.

The token refresh problem: OAuth2 tokens expire. To keep the automation running forever without manually re-authenticating, the app stores refresh tokens in tokens.json and automatically refreshes the access token before each upload. This is the kind of detail that separates a weekend project from something that actually keeps running for months.

Step 5: The Bash Script - Gluing It All Together

What it does: run-daily.sh is the conductor. It runs once a day and orchestrates the entire pipeline end-to-end.

Why a bash script? The core logic is in Node.js/TypeScript, but crontab (which triggers the daily run) works at the OS level. A bash script acts as the perfect bridge - it can set up the environment, invoke Node, handle errors, and maintain a log.

What the script does, step by step:

#!/bin/bash

PROJECT_DIR="/Users/mdshuvo/yearlyprogress"
STATE_FILE="$PROJECT_DIR/last-upload-date.txt"
LOG_FILE="$PROJECT_DIR/log.txt"

TODAY=$(date +%Y-%m-%d)

# Read the last run date
if [ -f "$STATE_FILE" ]; then
  LAST_RUN=$(cat "$STATE_FILE")
else
  LAST_RUN=""
fi

# Skip if already ran today
if [ "$LAST_RUN" = "$TODAY" ]; then
  exit 0
fi

cd "$PROJECT_DIR" || exit 1

# Run the main script, append output to log
/Users/mdshuvo/.nvm/versions/node/... >> "$LOG_FILE" 2>&1

# Trim the log to keep only the last 2000 lines
if [ -f "$LOG_FILE" ]; then
  tail -n 2000 "$LOG_FILE" > "$LOG_FILE.tmp" && mv "$LOG_FILE.tmp" "$LOG_FILE"
fi

Key design decisions:

• Idempotency - The state file check ensures the script never accidentally uploads twice on the same day, even if crontab triggers it multiple times.
• Logging - All output is appended to log.txt for easy debugging if something goes wrong.
• Log trimming - The log is kept to 2,000 lines so it doesn't grow forever and fill up the disk.
• nvm path - The full path to the Node binary is specified, because crontab runs in a minimal environment that doesn't load your shell's .bashrc or .zshrc. This is a classic gotcha that trips up many automation projects.

Step 6: The Crontab - Set It and Forget It

What it does: Tells my computer(Mac mini) to run run-daily.sh automatically at a set time every day.

What is crontab? It's a Unix job scheduler built into macOS and Linux. You define a schedule using a simple syntax, point it at a script, and the OS handles the rest - forever, or until you delete the entry.

The crontab entry:

0 9 * * * /Users/mdshuvo/yearlyprogress/run-daily.sh

This runs the script at 9:00 AM every day. The five fields represent: minute, hour, day of month, month, day of week. Five stars with the first two set means "every day at 9:00."

The result: Every morning at 9 AM, without any human action, computer runs the script, generates the video, and uploads it to YouTube. By the time most people are having their morning coffee, the day's video is live.

What Makes This Project Special

Beyond the individual pieces, what's interesting here is how each layer is chosen for a specific reason:

• JavaScript for logic - Universal, fast to write, perfect for date manipulation and API calls.
• Gemini for content - Turns a static metric into a story worth watching.
• Remotion for video - Treats video like software, making it reproducible and automatable.
• YouTube Data API for distribution - The last mile, handled entirely in code.
• Bash for orchestration - Lightweight, reliable, and plays perfectly with crontab.
• crontab for scheduling - The simplest possible scheduler, built into the OS.

No overengineering. No cloud infrastructure to manage. No monthly bills for a complex pipeline. Just a small computer, some clever code, and a crontab entry.

What's Next?

A few directions this project could grow:

• Multiple languages - Generate the same video in Bengali, Spanish, French, etc. to reach broader audiences.
• Milestone alerts - Special videos at 25%, 50%, 75%, and 99% with more elaborate animations.
• Thumbnail generation - Use a canvas library or Puppeteer to auto-generate custom thumbnails.
• Analytics tracking - Pull view counts back from the YouTube API and log the growth over time.
• Multi-channel - Clone the pipeline for a "Day of the Year" or "Days Until New Year" variant.

Try It Yourself

All the core tools used are free or have generous free tiers:

• Remotion - Free for open-source and personal projects
• Google Gemini API - Free tier available
• YouTube Data API v3 - Free with a Google account

If you want to watch the year tick away one percentage point at a time, the channel is live at youtube.com/@ProgressOfYear. A new video drops every morning.

Built with JavaScript, Remotion, Gemini