Create a tool to tag and archive screenshots

Here is a complete plan and implementation for a “Screenshot Tag & Archive Tool”, ideal for organizing and managing screenshots with tagging, search, and archiving capabilities.

🔧 Tool Name: ScreenshotTagger

🌟 Key Features:

• Upload screenshots

• Add and edit tags

• Automatically extract metadata (timestamp, resolution)

• Search by tags, date, filename

• Archive old screenshots by date or tags

• Download or view archived screenshots

🖥️ Tech Stack:

• Frontend: React + Tailwind CSS

• Backend: Node.js (Express)

• Database: SQLite or MongoDB (for storing metadata and tags)

• File Storage: Local filesystem or AWS S3

🧱 React Frontend Code (Minimal MVP)

This is the React code for the UI that includes upload, tagging, listing, and search.

tsx
CopyEdit
// type: code/react
export default function ScreenshotTagger() {
  const [screenshots, setScreenshots] = useState([]);
  const [file, setFile] = useState(null);
  const [tags, setTags] = useState("");
  const [search, setSearch] = useState("");

  const uploadScreenshot = async () => {
    if (!file) return;
    const formData = new FormData();
    formData.append("file", file);
    formData.append("tags", tags);
    await fetch("/api/upload", { method: "POST", body: formData });
    setFile(null);
    setTags("");
    fetchScreenshots();
  };

  const fetchScreenshots = async () => {
    const res = await fetch("/api/screenshots?search=" + search);
    const data = await res.json();
    setScreenshots(data);
  };

  useEffect(() => {
    fetchScreenshots();
  }, [search]);

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Screenshot Tagger</h1>
      <div className="flex gap-2 mb-4">
        <input
          type="file"
          onChange={(e) => setFile(e.target.files?.[0] || null)}
          className="border p-2"
        />
        <input
          type="text"
          placeholder="tags (comma separated)"
          value={tags}
          onChange={(e) => setTags(e.target.value)}
          className="border p-2 flex-1"
        />
        <button onClick={uploadScreenshot} className="bg-blue-500 text-white p-2 rounded">
          Upload
        </button>
      </div>
      <input
        type="text"
        placeholder="Search by tag or name..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="border p-2 w-full mb-4"
      />
      <div className="grid grid-cols-2 gap-4">
        {screenshots.map((s) => (
          <div key={s.id} className="border rounded p-2 shadow">
            <img src={`/uploads/${s.filename}`} alt="" className="w-full rounded mb-2" />
            <p className="text-sm text-gray-500">{s.tags.join(", ")}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

🧩 Backend API (Express.js)

js
CopyEdit
const express = require("express");
const multer = require("multer");
const fs = require("fs");
const path = require("path");
const app = express();
const PORT = 3001;

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, "public/uploads"),
  filename: (req, file, cb) => cb(null, Date.now() + "-" + file.originalname),
});
const upload = multer({ storage });

let db = []; // Replace with persistent DB in production

app.use(express.static("public"));
app.use(express.json());

app.post("/api/upload", upload.single("file"), (req, res) => {
  const { tags } = req.body;
  db.push({
    id: Date.now(),
    filename: req.file.filename,
    tags: tags.split(",").map((t) => t.trim()),
    uploadedAt: new Date(),
  });
  res.sendStatus(200);
});

app.get("/api/screenshots", (req, res) => {
  const { search = "" } = req.query;
  const result = db.filter(
    (s) =>
      s.filename.includes(search) ||
      s.tags.some((t) => t.toLowerCase().includes(search.toLowerCase()))
  );
  res.json(result);
});

app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

📁 Directory Structure

pgsql
CopyEdit
/screenshot-tagger
│
├── public/
│   └── uploads/
├── backend/
│   └── index.js
├── frontend/
│   └── App.tsx
└── package.json

🧠 Future Improvements

• Add AI-based auto-tagging using image classification

• Archive older screenshots in ZIP files

• Enable tag editing or deletion

• User accounts with separate screenshot libraries

• Cloud storage support (e.g., Amazon S3 or Firebase)

Would you like this as a single deployable app with Docker or separated by frontend/backend projects?