Build a “just shipped” tracker

Here’s a guide to building a “Just Shipped” Tracker — a system for showcasing newly released features, updates, or products. This is useful for SaaS platforms, product teams, or websites that want to highlight recent changes dynamically.

Components of a “Just Shipped” Tracker

1. Frontend UI (React + Tailwind)

A clean UI component displaying the latest releases.

2. Backend (Node.js/Express or Firebase)

Manages shipping data, timestamps, and storage.

3. Database (MongoDB, Firebase Firestore, or Supabase)

Stores shipped updates with timestamps, tags, and descriptions.

4. Optional Admin Dashboard

To submit new updates without touching code.

Feature Set

• Title of feature/release

• Short description

• Date shipped

• Tags or categories (e.g., Bugfix, New Feature)

• Visual indicators (e.g., “NEW” badge for 7 days)

• API or CMS integration for dynamic updates

• Optional: search/filter by date or tag

Sample Code for Frontend (React + Tailwind)

jsx
CopyEdit
import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const JustShipped = () => {
  const [updates, setUpdates] = useState([]);

  useEffect(() => {
    fetch("/api/just-shipped")
      .then((res) => res.json())
      .then((data) => setUpdates(data));
  }, []);

  const isNew = (dateStr) => {
    const date = new Date(dateStr);
    const now = new Date();
    const diff = (now - date) / (1000 * 60 * 60 * 24); // days
    return diff < 7;
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {updates.map((update) => (
        <Card key={update.id} className="rounded-2xl shadow p-4">
          <CardContent>
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-lg font-semibold">{update.title}</h3>
              {isNew(update.date) && <Badge className="bg-green-500">NEW</Badge>}
            </div>
            <p className="text-sm text-gray-700 mb-2">{update.description}</p>
            <div className="text-xs text-gray-500">
              {new Date(update.date).toLocaleDateString()}
              {" • "}
              {update.tags.map((tag) => (
                <Badge key={tag} className="ml-1">{tag}</Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

export default JustShipped;

Sample API Response (JSON)

json
CopyEdit
[
  {
    "id": "1",
    "title": "Dark Mode Released",
    "description": "Users can now toggle dark mode in settings.",
    "date": "2025-05-15T10:00:00Z",
    "tags": ["Feature", "UI"]
  },
  {
    "id": "2",
    "title": "Improved Billing Dashboard",
    "description": "Redesigned dashboard with easier access to invoices.",
    "date": "2025-05-12T09:30:00Z",
    "tags": ["UX", "Improvement"]
  }
]

Backend API Route Example (Node.js + Express)

js
CopyEdit
app.get('/api/just-shipped', (req, res) => {
  const updates = [
    {
      id: "1",
      title: "Dark Mode Released",
      description: "Users can now toggle dark mode in settings.",
      date: "2025-05-15T10:00:00Z",
      tags: ["Feature", "UI"]
    },
    // Add more updates
  ];
  res.json(updates);
});

Optional: Admin Dashboard to Add Updates

Use tools like:

• Sanity CMS

• Firebase + React Admin UI

• Notion API + Automation

• Airtable + API

Styling Tips

• Use animation (framer-motion) to fade in new items.

• Highlight recent updates using color or animation.

• Keep the layout minimal with enough white space.

• Use icons or emojis for categories (🚀 Feature, 🛠️ Fix, 🎨 UI).

Deployment

• Host backend on Vercel, Netlify, or your Node server

• Connect to a real-time database (Firebase/Supabase) for instant updates

• Use cron jobs or GitHub Actions to fetch from GitHub Releases/Commits

This tracker helps you communicate changes effectively and increases user awareness of ongoing development. Let me know if you’d like this customized as a plugin, widget, or static page.