ArcFlow: A Visual Project Timeline Application

Project Overview

ArcFlow is a full-stack, single-page application built on a modern, robust tech stack. It represents the entire project lifecycle as a beautiful, interactive arc instead of traditional Gantt charts, allowing for intuitive visualization of project timelines, progress, and key dates.

Core Features

• Interactive Arc Visualization: Clickable nodes on the arc timeline to view and edit milestone and event details.
• Hierarchical Structure: Projects are composed of Milestones, which in turn contain Tasks, providing a clear, organized structure.
• Event Annotations: Add special "Event" markers for important dates that aren't tasks, like a "Project Kick-off" or "Client Demo."
• Task Management: Includes task name, description, priority (High, Medium, Low), status (To Do, In Progress, Done), and dependencies.
• Real-time Playback Story: Animate the project's progression along the arc, highlighting milestones and tasks as they occur.
• Project Dashboard: A toggleable dashboard provides a statistical overview, including progress, time elapsed, and a pie chart of tasks by status.
• Filtering: The view can be filtered by task priority and status to focus on what matters most.
• Image Export: Export the current arc visualization as a high-resolution PNG image.
• Secure User Authentication: Full authentication with Firebase, supporting Google Sign-In and email/password.
• Persistent Data Storage: All data is securely stored in Firestore with robust security rules.

Technical Architecture

• Frontend Framework: Next.js 15 (App Router), React & TypeScript
• UI Components: ShadCN/UI
• Styling: Tailwind CSS
• Backend & Database: Firebase (Authentication, Firestore)
• Visualization: Custom-built interactive SVG component in React
• Image Export: `html2canvas` library
• State Management: React Hooks (useState, useEffect, useMemo) & Context API
• Icons: `lucide-react`