sapphire-quero

byStephany Caroline Sevulski

quero criar um app extrai a identidade visual (paleta de cores com Hex, fonte(s), elementos gráficos isolados, fundo limpo e uma descrição do estilo) de uma imagem q eu importar

Landing
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks

20
#1

Setup Database Schema

To Do

Design and implement the database schema for storing images and analysis results.

AI 70%
Human 30%
High Priority
2 days
Data Engineer
#4

Implement Authentication

To Do

Set up authentication and JWT generation for user access control.

AI 50%
Human 50%
Medium Priority
1 day
Backend Developer
#8

Setup CI/CD Pipeline

To Do

Implement CI/CD pipeline for automated testing and deployment.

AI 40%
Human 60%
Medium Priority
2 days
DevOps Engineer
#9

Implement Navbar for Landing Page

To Do

As a frontend developer, implement the Navbar section for the Landing page. This includes a responsive navigation bar with animated SVG logo paths using `motion` for path animations. The Navbar should handle scroll events to toggle a 'scrolled' state, and a menu toggle button that animates the opening and closing of navigation links. Ensure links to restricted pages are conditionally shown based on user persona. Page access: shared by all personas (Regular User).

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#2

Create Image Upload API

To Do

Develop API endpoints for image upload and storage, accessible by Regular Users.

Depends on:#1
Waiting for dependencies
AI 60%
Human 40%
High Priority
1.5 days
Backend Developer
#3

Create Image Analysis API

To Do

Develop API endpoints for processing images and returning visual identity elements.

Depends on:#1
Waiting for dependencies
AI 65%
Human 35%
High Priority
2.5 days
Backend Developer
#5

Setup RBAC Middleware

To Do

Implement role-based access control middleware for API authorization.

Depends on:#4
Waiting for dependencies
AI 50%
Human 50%
Medium Priority
1 day
Backend Developer
#10

Implement LandingHeroHeadline for Landing Page

To Do

As a frontend developer, implement the LandingHeroHeadline section for the Landing page. This section features animated text using `motion` where each word of the headline appears with a spring animation. The section also includes a subtitle with a fade-in animation. Ensure the animations are smooth and performant. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#11

Implement LandingHeroAnimation for Landing Page

To Do

As a frontend developer, implement the LandingHeroAnimation section for the Landing page. This section includes a complex SVG animation demonstrating visual identity extraction with phases controlled by state. It uses `motion` for animations and `useInView` to trigger animations when the section is visible. Ensure the animation is responsive and accessible. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 85%
Human 15%
High Priority
2 days
Frontend Developer
#12

Implement LandingFeatureGrid for Landing Page

To Do

As a frontend developer, implement the LandingFeatureGrid section for the Landing page. This section displays a grid of features with animated cards using `motion`. Each card includes an icon, title, and description, and animations are triggered when the section comes into view. Ensure the grid is responsive and accessible. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#13

Implement LandingFeatureDetails for Landing Page

To Do

As a frontend developer, implement the LandingFeatureDetails component for the Landing page. This component is used within the LandingFeatureGrid to display detailed information about each feature. It includes animated icons and text using `motion`. Ensure the component is reusable and animations are smooth. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#14

Implement LandingCTA for Landing Page

To Do

As a frontend developer, implement the LandingCTA section for the Landing page. This section includes a call-to-action with animated buttons using `motion`. The primary button links to the Upload page, and the secondary button scrolls to the features section. Ensure the buttons are responsive and accessible. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#15

Implement Footer for Landing Page

To Do

As a frontend developer, implement the Footer section for the Landing page. This includes animated SVG logo paths and navigation links using `motion`. Ensure the footer is responsive and links to restricted pages are conditionally shown based on user persona. Page access: shared by all personas (Regular User).

Depends on:#9
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#6

Setup API Client

To Do

Develop a shared API client for frontend to interact with backend services.

Depends on:#3#2
Waiting for dependencies
AI 60%
Human 40%
Medium Priority
1 day
Frontend Developer
#7

Integration Tests for APIs

To Do

Develop integration tests for image upload and analysis APIs.

Depends on:#2#3
Waiting for dependencies
AI 50%
Human 50%
High Priority
1.5 days
QA Engineer
#17

Create Font Identification API

To Do

Develop API endpoints for identifying fonts used in the imported image. Ensure the API can accurately detect and return font information.

Depends on:#2
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#18

Create Graphic Elements API

To Do

Develop API endpoints for isolating graphic elements from the imported image. Ensure the API can accurately detect and return graphic elements.

Depends on:#2
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#19

Create Clean Background API

To Do

Develop API endpoints for generating a clean background from the imported image. Ensure the API can accurately process and return a clean background.

Depends on:#2
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#20

Create Style Description API

To Do

Develop API endpoints for providing a style description based on the imported image. Ensure the API can accurately generate and return a style description.

Depends on:#2
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#16

Integrate Image Analysis

To Do

As a Tech Lead, verify the end-to-end integration between the Image Analysis frontend implementation and the Image Analysis backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Depends on:#6#3
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
2 days
Tech Lead
Landing design preview
Landing: View Info
Landing: Import Image
Upload: Select Image
Processing: Analyze Image
Results: View Color Palette
Results: View Fonts
Results: View Graphic Elements
Results: View Clean Background
Results: View Style Description
Results: Export Element
Landing design preview
Landing: View Info
Landing: Import Image
Upload: Select Image
Processing: Analyze Image
Results: View Color Palette
Results: View Fonts
Results: View Graphic Elements
Results: View Clean Background
Results: View Style Description
Results: Export Element