crimson-todo
build a to-do with single page and minimal design
Comments (0)
Sign in to leave a comment
Project Tasks13
Implement Header for Home
As a frontend developer, implement the Header section for the Home page. Uses useState for logoColor and timeLabel, initialized via getTimeOfDayColor() and getTimeLabel() helpers that map hours to crimson (#D32F2F morning), amber-crimson (#E64A19 afternoon), amber (#F57C00 evening), or purple (#8E24AA night). Two useEffects: one setInterval every 60000ms to refresh time-based color, one scroll listener that blends the base color toward warmer tones proportionally as the user scrolls to 800px. The logo renders an animated SVG checkbox using motion.path with pathLength animation (0→1, 0.6s easeInOut) for the checkmark body and tick, colored by the dynamic logoColor. This component may already exist from a previous page — verify before creating a new file.
Task CRUD API Endpoints
As a Backend Developer, implement the FastAPI REST endpoints for task management: POST /tasks (create task with title, priority, done=false), GET /tasks (list all tasks), PATCH /tasks/{id} (update task: title, priority, done, position_x, position_y), DELETE /tasks/{id} (delete task). Include request/response Pydantic models and HTTP error handling. These endpoints support TaskInput, TaskCanvas, ActiveTasksSection, CompletedTasksSection, and EmptyState frontend sections.
Task Database Model Migration
As a Backend Developer, define the SQLAlchemy Task model with fields: id (UUID or auto-increment int), title (varchar 500), priority (enum: high/medium/low, default medium), done (boolean, default false), position_x (float, nullable, for canvas drag position), position_y (float, nullable), created_at (datetime), updated_at (datetime). Create an Alembic migration script to initialize the tasks table in MySQL/MariaDB.
Implement HomeHero for Home
As a frontend developer, implement the HomeHero section for the Home page. Renders a @react-three/fiber Canvas with two sub-components: ParticleField (25 instanced sphere meshes with random positions, drift animations, and colors from #D32F2F/#FF6659/#1976D2/#FFC107 palette using instancedBufferAttribute) and LineField (8 line primitives). ParticleField uses useMemo to generate particle descriptors (x, y, z, speed, size, phase, driftSpeed, color), a THREE.Object3D dummy for matrix transforms, and useFrame to animate drift (sin/cos), parallax offset from scrollY prop, and pulse scaling each frame. instancedMesh args [null, null, 25] with sphereGeometry and meshBasicMaterial at 0.6 opacity. Wraps hero headline and subtext with framer-motion reveal animations.
Implement TaskCanvas for Home
As a frontend developer, implement the TaskCanvas section for the Home page. Uses useState for tasks (initialTasks with 6 entries: id, title, desc, priority, done, related[]), positions (from getInitialPositions() placing tasks in a 3-column grid with GRID_SIZE=40px spacing), hoveredId, and selectedId. StickyNote sub-component uses useMotionValue (x, y), useTransform for scale (1.05 on drag), handleDrag with snapToGrid() (rounds to nearest 40px) relative to canvasRef bounds, and handleDragEnd to commit position. D3 renders SVG connection lines between related tasks (task.related[] array) as curved paths overlaid on the canvas. Completed tasks show with 50% opacity. Toggle, delete actions update task state. Responsive: NOTE_W_MOBILE=160px vs NOTE_W_DESKTOP=200px, canvas scrollable on mobile.
Implement TaskInput for Home
As a frontend developer, implement the TaskInput section for the Home page. Uses useState for inputValue, isFocused, particles (array of burst particle objects), and successFlash. useRef for inputRef and particleIdRef. spawnParticles useCallback spawns 8 particles with radial angle distribution (Math.PI*2*i/count), random distance 30-65px, colors from amber/gold palette (#FFC107, #FFD54F, #FFCA28 etc.), and clears after 700ms. handleAdd fires spawnParticles, sets successFlash for 400ms, clears input, and refocuses inputRef. handleKeyDown triggers handleAdd on Enter. AnimatePresence renders particle bursts as absolutely positioned spans. Two parallax decorative layers: ti-deco-bg (translateY at -0.3x scroll) with two gradient orbs, ti-deco-mid (translateY at -0.5x scroll) with two horizontal lines. Card gains ti-card--focused class on input focus.
Implement ActiveTasksSection for Home
As a frontend developer, implement the ActiveTasksSection for the Home page. Uses useState for tasks (INITIAL_TASKS: 8 entries with id, name, date, priority, done), sortKey ('date'|'priority'), and hoveredSlice. useMemo sorts tasks by PRIORITY_ORDER ({high:0, medium:1, low:2}) or date. PriorityDonut sub-component uses useRef for svgRef and renders a D3 donut chart: d3.pie() with padAngle 0.04, d3.arc() with innerRadius*0.6 and outerRadius*0.88, cornerRadius 3, arcHover expands by ±4px on mouse events. D3 selectAll/enter pattern draws path slices colored by PRIORITY_COLORS (#D32F2F, #FFC107, #1976D2). Transition tasks to done on checkbox toggle with AnimatePresence exit animations. Sort buttons toggle between Date and Priority. Each task row shows name, date badge, priority dot, and done toggle.
Implement CompletedTasksSection for Home
As a frontend developer, implement the CompletedTasksSection for the Home page. Uses useState for isOpen (collapsed/expanded) and tasks (completedTasks array of 5 items). Toggle header button sets aria-expanded and animates cts-chevron-wrap rotation (0→180deg, 0.3s). AnimatePresence wraps the task list with listVariants (staggerChildren: 0.05, delayChildren: 0.05 open; staggerChildren: 0.03, staggerDirection: -1 closed). Each task item uses itemVariants (opacity+x slide). StrikethroughText sub-component renders task text with motion.span cts-strike-line animating width from 0% to 100% (0.4s, delay 0.15s). handleUndo and handleDelete filter tasks by id. Two parallax decorative layers: cts-deco-bg at -0.3x scroll, cts-deco-mid at -0.5x scroll.
Implement EmptyState for Home
As a frontend developer, implement the EmptyState section for the Home page. Uses useScroll() to track scrollY and a useEffect subscribing to scrollY.on('change') to set arrowOpacity (fades from 1 to min 0.3 as scroll reaches 600px). Renders two parallax layers: es-bg-layer at -0.3x scroll with two gradient orbs, es-mid-layer at -0.15x scroll with 5 dot elements. The icon group animates in with scale 0.7→1 (0.6s). Two SVG paths render via motion.path: clipboard body (checkboxPath, pathLength 0→1, 0.8s, opacity to 0.5) and clipboard clip (clipPath). Additional animated lines emptyLine1 and emptyLine2. A pencil SVG animates via pencilBodyPath, pencilLine1, pencilLine2. ChevronUp icon from lucide-react fades with arrowOpacity. Shows encouraging message when no tasks exist.
Implement HowItWorks for Home
As a frontend developer, implement the HowItWorks section for the Home page. Uses useRef for sectionRef and useInView with {once: true, margin: '-60px'} to trigger entrance animations. Three steps array with Move, CheckCircle, BarChart2 icons from lucide-react. Section header (hiw-label with hiw-label-dot, hiw-title, hiw-subtitle) animates in with opacity 0→1 and y 16→0 (0.5s easeOut) when isInView. Step cards (hiw-card) stagger with delay: 0.2 + index*0.1, y 24→0. Each card renders hiw-badge (step number), hiw-icon-wrap with the Lucide icon, hiw-step-title, and hiw-step-desc. Two parallax decorative layers: hiw-bg-layer at -0.2x scroll, hiw-mid-layer at -0.45x scroll with three hiw-mid-orb elements.
Implement Footer for Home
As a frontend developer, implement the Footer section for the Home page. Renders ftr-links nav with three FooterLinkAnimated components (GitHub → https://github.com, Docs → /docs, Feedback → /feedback). FooterLinkAnimated uses useState for hovered, animates anchor color between #1976D2 and #D32F2F (0.2s), and animates ftr-link-underline scaleX 0→1 on hover (0.3s easeOut). ftr-socials renders Github, BookOpen, MessageCircle icons from lucide-react as motion.a elements with whileHover scale 1.15 and whileTap scale 0.9 (spring stiffness 400, damping 15). External hrefs open in _blank with noopener noreferrer. This component may already exist from a previous page — verify before creating a new file.
Frontend API Client Setup
As a Frontend Developer, create a shared API client module (src/api/tasks.js or tasks.ts) wrapping fetch/axios calls to the FastAPI backend. Implement: createTask(title, priority), fetchTasks(), updateTask(id, fields), deleteTask(id). Include base URL configuration via environment variable (VITE_API_URL or REACT_APP_API_URL). Export typed response models. This module will be imported by TaskInput, TaskCanvas, ActiveTasksSection, CompletedTasksSection, and EmptyState sections. NOTE: This task should depend on backend_tasks_api and backend_db_model once those are complete.
Integrate Task CRUD End-to-End
As a Tech Lead, verify the end-to-end integration between the frontend task sections (TaskInput, TaskCanvas, ActiveTasksSection, CompletedTasksSection, EmptyState) and the backend Task CRUD API. Ensure: tasks added via TaskInput appear in ActiveTasksSection and TaskCanvas fetched from the API; marking done updates done=true via PATCH; deleting calls DELETE endpoint and removes from all sections; canvas drag position saves position_x/position_y via PATCH; EmptyState is shown correctly when GET /tasks returns an empty list. Confirm API error states are handled gracefully in the UI.
No comments yet. Be the first!