As a frontend developer, implement the Header section for the Home page. This section renders a retro CRT-terminal-styled header using `framer-motion` animations and a custom typewriter effect. Key implementation details: (1) `useState` manages `typedTitle` which is incrementally built via a `setInterval` in `useEffect` at 80ms per character, spelling out 'retro-application'; (2) `isTyping` boolean drives conditional rendering of a blinking `hdr-cursor` span and a `motion.div` underline that scales from 0 to 1 on `scaleX` once typing completes; (3) Four decorative CRT frame corner divs (`hdr-frame-corner--tl/tr/bl/br`) are absolutely positioned for the terminal-frame aesthetic; (4) A `motion.span` prompt symbol `'>_'` fades in with opacity animation; (5) The `motion.h1` title fades in with a 0.1s delay; (6) A status bar on the right includes a `/Home` nav link, a spring-animated `hdr-status-dot`, and a delayed fade-in `hdr-status-text` showing 'online'; (7) Import `Header.css` (4296 chars) which handles the retro/CRT visual theme, layout, and cursor blink keyframes. This is a root layout section with no cross-page dependencies.
As a Backend Developer, define the SQLite database schema and SQLAlchemy model for the Task entity. Fields: id (UUID or integer PK), title (string, required), completed (boolean, default false), created_at (datetime). Initialize the database on startup using SQLAlchemy's create_all. Add seed data script for development. Ensure the database file is persisted via Docker volume mount.
As a Frontend Developer, configure the global design system for the retro-application. Create a CSS custom properties file (or equivalent) defining all color tokens from the SRD: --primary: #2A9D8F, --primary-light: #A8DADC, --secondary: #E76F51, --accent: #F4A261, --highlight: #E9C46A, --bg: #F1FAEE, --surface: rgba(255,255,255,0.9), --text: #264653, --text-muted: #6D6875, --border: rgba(38,70,83,0.2). Configure a pixelated/retro monospace font (e.g. via Google Fonts or local asset). Set up global base styles including CRT green-on-black terminal palette for the signature design concept. Install and configure framer-motion and react-icons as shared dependencies.
As a Backend Developer, implement the FastAPI REST endpoints for task management. Include: POST /tasks (create task), GET /tasks (list all tasks), PATCH /tasks/{id} (update task, e.g. mark complete), DELETE /tasks/{id} (delete task). Use SQLite via SQLAlchemy ORM. Return JSON responses with task id, title, completed status, and created_at timestamp. Enable CORS for frontend origin. Note: Frontend section tasks (1b549ff4-c442-40cc-8391-b26bf688c076 and future task sections) should depend on this API being available.
As a Frontend Developer, implement the Task List section for the Home page. Render all tasks fetched from the backend GET /tasks endpoint as styled terminal-line rows. Each task row should display: task title with typewriter-style reveal animation (framer-motion), a click handler to mark complete (triggering a strikethrough/fade-out animation), and a delete button with a retro icon (react-icons). Completed tasks fade out with a CRT-screen dissolve effect. Use local React state (or a simple state manager) to hold the task list and sync with API responses. Note: depends on temp-backend-tasks-api for data.
As a Frontend Developer, implement the Add Task input section for the Home page. Render a retro terminal-style input prompt (e.g. '> _' cursor) where the user types a new task and submits via Enter or a CTA button. On submit, call POST /tasks backend endpoint, optimistically add the task to the list, and animate its appearance with a typewriter effect (framer-motion). Include keyboard click sound feedback using the Web Audio API or an audio asset as described in the Signature Design Concept. Note: depends on temp-backend-tasks-api.
As a Frontend Developer, implement the Task Filter section for the Home page (per user flow: Home: Filter Tasks). Render retro-styled toggle buttons or tabs for All / Active / Completed filters. Filtering is applied client-side on the in-memory task list. Use framer-motion for animated tab indicator transitions. Highlight active filter with --accent color token. Note: depends on temp-frontend-task-list for the task list state.
As a Tech Lead, verify the end-to-end integration between the Home page frontend task management implementation and the Tasks CRUD backend API. Ensure: task list loads correctly from GET /tasks on mount, new tasks created via POST /tasks appear in the UI with correct animations, marking complete via PATCH /tasks/{id} updates UI state and persists, deleting via DELETE /tasks/{id} removes task from UI, and error states are handled gracefully. Confirm CORS is correctly configured and API base URL is wired up in the frontend environment config. Note: this task depends on temp-backend-tasks-api, temp-frontend-task-list, temp-frontend-add-task.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!