Timeline Creator

A lightweight web app for building clean, visual timelines. Add events, rearrange your story, drop in images, and mark key dates—all in a simple, editing-is-viewing interface. No clutter, no extra screens, just a smooth timeline you can shape in real time 🎞️

Code Preview

Features

  • 🧩 Inline editing → the creation and view page are the same. Click any item to edit it.
  • 📍 Points & marks → points for full events (title, description, image), marks for quick labels like years or timestamps.
  • 🖼️ Drag & drop images → drop images anywhere to create new points or replace existing ones instantly.
  • 📁 Timeline manager → create, switch, clone, or delete timelines through a compact top-left menu.
  • 📤 Import/export → download your timeline as JSON and reload it later.
  • 🖱️ Simple controls → hover + click for points, Shift + click for marks; extremely lightweight workflow.
  • ⚠️ Desktop-first → mobile support is limited (intentionally kept simple for now).

My Role

  • Built the full application solo, designing a minimal real-time editing system where the timeline view doubles as the editor.
  • Implemented the data model for points, marks, timeline grouping, cloning, and import/export via JSON.
  • Developed drag-and-drop image handling to seamlessly attach visuals to events or create new points.
  • Created a clean, responsive UI with dynamic controls, hover detection, and an intuitive layout focused on speed and clarity.
  • Handled state management, timeline persistence, and all user interactions with a focus on simplicity and fluid UX.