project-07b4ce75
תבנה מחשבון
Comments (0)
Sign in to leave a comment
Project Tasks7
Implement Theme and Structure
As a Frontend Developer, I want to implement the color palette and design theme from the mock-design pages so that all application pages look exactly identical to the designed mockups. This includes setting up the color scheme (#F3F4F6 background, #FFFFFF surface, #1F2937 text, #3B82F6 accent, #9CA3AF muted), typography, global CSS variables, and removing any pages not required by the project (e.g., login, signup, welcome, dashboard pages that are not part of the calculator flow). Ensure responsive design foundations are in place for both desktop and mobile.
Implement Arithmetic API
As a Backend Developer, I want to implement a FastAPI backend that exposes endpoints for basic arithmetic operations (addition, subtraction, multiplication, division) so that the frontend Calculator page can perform calculations via API. Endpoints should handle: input validation, division by zero error responses with clear error messages, and return results in a format compatible with Greek locale numeric formatting. The API should be lightweight and respond within performance constraints.
Implement Calculation History API
As a Backend Developer, I want to implement a FastAPI endpoint to store and retrieve the last 5 calculations per session so that the frontend can display a history carousel. The endpoint should support saving a calculation result and fetching the most recent 5 entries. Use MySQL with Alembic migrations for persistence.
Build Calculator Page
As a Frontend Developer, I want to implement the Calculator page based on the existing JSX design (Calculator v2) so that users can perform addition, subtraction, multiplication, and division. The page should include: numeric and operator buttons with 3D press animations on click, a display area showing current input and result, a calculation history carousel at the bottom showing the last 5 calculations with smooth scrolling, a reset button to clear the calculator state, a light/dark mode toggle with fluid gradient transition animation, and an error state (e.g., division by zero) with shake animation and red highlight on the input field. Numeric formatting should follow Greek locale (commas as decimal separators, periods as thousand separators). The page is the central hub of the user flow — all actions (perform operations, view result, view history, reset, toggle theme) happen here.
Implement Greek Localization
As a Frontend Developer, I want to implement Greek language support and locale-specific numeric formatting so that the application defaults to Greek language and displays numbers using commas as decimal separators and periods as thousand separators (e.g., 1.000,50). This includes i18n setup for UI labels and error messages in Greek.
Integrate Calculator with Backend
As a Frontend Developer, I want to connect the Calculator page to the backend arithmetic and history APIs so that calculations are processed server-side and history is persisted. This includes wiring up API calls for each operation, displaying API error messages (e.g., division by zero) with the shake animation, and populating the history carousel from the history API response.
Implement Accessibility Compliance
As a Frontend Developer, I want to ensure the Calculator page meets WCAG 2.1 AA accessibility standards so that all users, including those with disabilities, can use the application. This includes proper ARIA labels on buttons and display elements, keyboard navigation support, sufficient color contrast ratios for both light and dark themes, and focus management.
No comments yet. Be the first!