cosmic-application
initate the project to build a to do application with single page design and minimal design
Comments (0)
Sign in to leave a comment
Project Tasks12
Implement LandingHero for Landing
As a frontend developer, implement the LandingHero section for the Landing page. This section renders a full 3D interactive hero using @react-three/fiber Canvas with OrbitControls and PerspectiveCamera from @react-three/drei. It uses TASK_DATA (22+ task objects with id, title, desc, status) to populate 3D star/task nodes in the scene. State hooks include useState for interaction state and useRef for canvas/object refs. useFrame drives per-frame animations (orbit, float, glow pulses). useMemo optimizes geometry/material creation. framer-motion AnimatePresence wraps overlay UI elements with entrance animations. The section imports THREE directly for custom geometry and materials. CSS handles the hero container sizing, perspective depth cues, and responsive scaling. This is a root section — depends_on is empty.
Implement AddTaskPanel for Landing
As a frontend developer, implement the AddTaskPanel section for the Landing page. The section renders an `atp-section` with two parallax layers (`atp-parallax-bg` with atp-nebula-1/2 and `atp-parallax-mid` with five `atp-star` divs) driven by a CSS `--scroll` custom property. The `atp-panel` uses framer-motion `whileInView` entrance animation (opacity 0→1, y 30→0, cubic-ease, once:true). State includes `taskText` (controlled input), `submitted` (boolean for success flash, auto-reset after 900ms), and `tasks` array (local list). A magnetic button effect uses `useMotionValue`/`useSpring` (stiffness 200, damping 20) on springX/springY tracking mouse proximity within 120px radius via `handleMouseMove`/`handleMouseLeave` callbacks. The `Plus` and `Sparkles` icons from lucide-react appear in the submit button. `handleSubmit` trims input, pushes to tasks array, triggers submitted flash, clears input and refocuses via `inputRef`. CSS handles the nebula gradients, star dot animations, and panel glassmorphism styling.
Implement TaskListGalaxy for Landing
As a frontend developer, implement the TaskListGalaxy section for the Landing page. The section uses a static TASKS array (6 tasks with id, title, desc, fullDesc, priority, date, category fields) and a STAR_DOTS array for decorative background positioning. State is managed with useState for selected/active task. framer-motion AnimatePresence drives task card entrance/exit animations and list reordering transitions. Icons from lucide-react — Star, ChevronRight, Calendar, Flag, Clock, Plus, Sparkles — are used across task card UI elements. Task cards support click interaction to expand/reveal fullDesc details. Priority badges render with conditional styling (high/medium/low). The section uses useRef and useEffect for scroll-based reveal or intersection observer. CSS (10849 chars) handles the galaxy-themed card grid, star dot decorations, priority color coding, and responsive stacking layout.
Implement TaskDetailModal for Landing
As a frontend developer, implement the TaskDetailModal section for the Landing page. The section features a `CosmicParticles` sub-component that renders a Canvas 2D animation with 40 dpr-aware particles (random radius 0.5–2px, hue 39 or 48, alpha 0.2–0.7, slow vx/vy drift with wraparound), drawing a linear gradient background on each frame tick via requestAnimationFrame with cleanup on unmount. The `TaskDetailModal` component manages state: `isOpen` (modal visibility), `isEditing` (inline description edit mode), `description`/`savedDescription` (controlled textarea via `textareaRef`), `showDeleteConfirm` (confirm overlay), and `isDeleted` (soft-delete state). `handleOpen` is gated by `isDeleted`. framer-motion AnimatePresence wraps the modal overlay and content panel with enter/exit transitions. The modal displays SAMPLE_TASK fields (title, description, status: 'active', created date). Edit mode activates a textarea, save commits to `savedDescription`, cancel reverts. Delete shows a confirmation step before setting `isDeleted`. CSS (10398 chars) styles the modal backdrop blur, card layout, cosmic particle canvas overlay, and edit/delete button states.
Implement LandingCTA for Landing
As a frontend developer, implement the LandingCTA section for the Landing page. The section renders with two parallax layers: `lcta-parallax-bg` (speed 0.2) and `lcta-parallax-mid` containing six `lcta-star` spans (speed 0.4), both driven by the CSS `--scroll` custom property. An animated SVG accent line uses two wave paths (`wavePath1`/`wavePath2`) with a `lcta-wave-grad` linearGradient (colors: #2C3E50 → #F39C12 → #E74C3C). The CTA button uses `btnRef` and a `spawnParticles` callback that reads the button's `getBoundingClientRect`, calculates center coords, and spawns 8 radial particles per click — each with randomized angle, distance (40–90px), size (4–10px), color from `['#F39C12','#E74C3C','#F1C40F','#2C3E50','#F39C12']`, and a unique auto-incrementing id from `particleIdRef`. Particles are added to state and removed after 900ms timeout. `showSuccess` state (boolean, resets after 2000ms) triggers an AnimatePresence success feedback element. framer-motion animates particle burst positions. CSS (4844 chars) handles the section background, star scatter, SVG wave animation, and button press states.
Task Database Models Migration
As a Backend Developer, define the SQLAlchemy ORM model for the Task entity and create the Alembic migration scripts. Task table schema: id (UUID primary key, auto-generated), title (VARCHAR 255, not null), description (TEXT, nullable), status (ENUM: active/completed, default: active), priority (ENUM: high/medium/low, default: medium), category (VARCHAR 100, nullable), created_at (DATETIME, auto-set), updated_at (DATETIME, auto-updated). Run initial migration and verify the schema applies cleanly against the MySQL/MariaDB container. Include seed data script with at least 6 sample tasks to support frontend TASK_DATA arrays used in LandingHero and TaskListGalaxy sections.
Setup Cosmic Theme Design System
As a Frontend Developer, set up the global design system and theme tokens for the cosmic-application. Define CSS custom properties and/or a theme config for all brand colors: --primary: #2C3E50, --primary-light: #34495E, --secondary: #E74C3C, --accent: #F39C12, --highlight: #F1C40F, --bg: #ECF0F1, --surface: rgba(255,255,255,0.9), --text: #2C3E50, --text-muted: #95A5A6, --border: rgba(44,62,80,0.2). Configure global CSS resets, base typography, and shared utility classes. Set up @react-three/fiber and @react-three/drei packages. Configure framer-motion and lucide-react as global dependencies. Ensure responsive base breakpoints are established for mobile/tablet/desktop.
Task CRUD API Endpoints
As a Backend Developer, implement the FastAPI REST endpoints for task management. Create the following routes: GET /api/tasks (list all tasks), POST /api/tasks (create task), GET /api/tasks/{id} (get single task), PUT /api/tasks/{id} (update task), DELETE /api/tasks/{id} (delete task). Each endpoint should return proper HTTP status codes and JSON responses. Task model fields: id (UUID), title (str), description (str), status (enum: active/completed), priority (enum: high/medium/low), category (str, optional), created_at (datetime), updated_at (datetime). Include CORS middleware configured for the frontend origin. Note: Frontend tasks (AddTaskPanel, TaskListGalaxy, TaskDetailModal) should depend on this task once implemented.
Integrate AddTaskPanel API
As a Tech Lead, verify the end-to-end integration between the AddTaskPanel frontend implementation and the Task CRUD API backend. Ensure the POST /api/tasks endpoint is called on task submission, API responses are handled properly (success/error states), the submitted task appears in the task list without a full page reload, and error feedback is shown to the user if the API call fails. Validate that the magnetic button submit flow correctly triggers the API call and the local tasks state is updated with the server-returned task object (including server-generated id and timestamps).
Integrate TaskListGalaxy API
As a Tech Lead, verify the end-to-end integration between the TaskListGalaxy frontend section and the Task CRUD API backend. Ensure GET /api/tasks is called on component mount and replaces the static TASKS array with live data from the database. Validate that task cards render correctly with server data fields (id, title, desc, fullDesc, priority, date, category), priority badge conditional styling works with API-returned priority values, and any loading/error states are gracefully handled in the galaxy card grid UI.
Integrate TaskDetailModal API
As a Tech Lead, verify the end-to-end integration between the TaskDetailModal frontend section and the Task CRUD API backend. Ensure that PUT /api/tasks/{id} is called when a user saves edits to a task description, DELETE /api/tasks/{id} is called on confirmed deletion, and the modal reflects the persisted state from the server. Validate that the soft-delete isDeleted state transitions correctly after a successful API deletion response, edit mode saves to the server (not just local savedDescription state), and error handling surfaces meaningful feedback within the modal UI.
Integrate LandingHero API
As a Tech Lead, verify the end-to-end integration between the LandingHero 3D frontend section and the Task CRUD API backend. Ensure GET /api/tasks is called to replace the static TASK_DATA array (22+ objects) with live task data from the server. Validate that 3D star/task nodes in the @react-three/fiber scene are correctly populated with server-returned task ids, titles, descriptions, and status values. Confirm that the scene remains performant with real data and that useMemo geometry optimizations still function correctly when task count varies dynamically.
Your Personal Task Galaxy
Navigate your tasks through an immersive cosmic interface. Each star is a task waiting to be explored — click, drag, and discover your productivity universe.
Launch a New Task
Add a star to your galaxy and watch your universe expand
Your Tasks, Your Universe
Every task is a star in your personal galaxy. Click to explore details, track progress, and navigate your work with clarity.
Create low-fidelity mockups for the main landing page hero section and feature grid layout.
Initialize the Python FastAPI project with Docker, database migrations, and CRUD endpoints.
Build an accessible form component with validation for adding new tasks to the list.
Add pytest test cases covering all task endpoints including edge cases and error handling.
Ensure all components adapt gracefully to screens from 320px to 1440px wide.
Set up automated testing and deployment workflow for continuous integration.
View Task Details
Click a star in the Task Galaxy above, or use the button below to preview the task detail modal.
Ready to build your task galaxy?
Add your first star and start managing tasks in a cosmic way.
No comments yet. Be the first!