ocean-system

Develop Alembic migrations for the initial database schema setup.

Develop the authentication API using FastAPI, including login, registration, and JWT token generation.

Create API endpoints for flowchart creation, editing, and exporting functionalities.

As a frontend developer, implement the Navbar section for the Register page. This component includes a logo, a hamburger menu for mobile navigation, and links to various pages such as Homepage, Editing, Dashboard, Login, and Register. The 'Register' link should be styled as a call-to-action. Ensure that the menu state is managed using the useState hook to toggle the menu open and closed. Note that links to restricted pages like Dashboard should be conditionally shown based on user persona. This component may already exist from the Homepage. Page access: shared by all personas (General User, Registered User).

Develop the API endpoints for user registration, including validation and error handling. Ensure secure password storage using bcrypt and return appropriate responses for success and failure cases.

Develop the API endpoints for user login, including JWT token generation and validation. Ensure secure password verification and return appropriate responses for success and failure cases.

Develop the API endpoints for exporting flowcharts in jpg, png, and svg formats. Ensure the export process is efficient and handles large flowcharts without performance issues.

Develop the API endpoints for managing user accounts, including updating user information and handling account settings. Ensure secure access and proper validation.

Implement necessary database indexes to optimize query performance for user and flowchart data retrieval.

Define and implement a data retention policy for user and flowchart data, ensuring compliance with privacy and security standards.

Implement RBAC for the application to manage access to different pages based on user roles.

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

Test the authentication flow including login and registration for both general and registered users.

Test the flowchart API endpoints for creation, editing, and exporting functionalities.

As a frontend developer, implement the RegisterHero section for the Register page. This section features a visually appealing background with animated orbs and glows, and includes a headline inviting users to create an OceanFlow account. The section should be styled to highlight the 'Dive In' accent and provide a welcoming introduction to the registration process. Ensure the design is responsive and visually consistent across devices. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the RegisterForm section for the Register page. This form includes fields for full name, email, password, confirm password, and a checkbox to agree to terms. Implement form validation to ensure all fields are correctly filled, passwords match, and terms are agreed to before submission. Use the useState hook to manage form state and errors. Simulate an API call on form submission and handle success and error states appropriately. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the Footer section for the Register page. This component includes branding elements, product and account links, and copyright information. Ensure that links to restricted pages like Dashboard are conditionally shown based on user persona. This component may already exist from the Homepage. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the LoginForm section for the Login page. This form includes fields for email and password, with state hooks to manage their values. It features a toggle for showing/hiding the password and handles form submission with validation and simulated API call. The form displays error messages and redirects to the Dashboard upon successful login. Ensure the form is accessible to both General and Registered Users. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the LoginSocialAuth section for the Login page. This component provides buttons for social login options, such as Google and GitHub, with handlers to simulate OAuth provider redirection. Ensure the component is styled according to the design and accessible to both General and Registered Users. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingShapeTools section for the Editing page. This component provides a set of drawing tools such as Select, Rectangle, Circle, Diamond, Connector, and Text. Each tool is represented by a button with an icon and label, and the active tool is highlighted. The component uses props to manage the active tool state and handle tool selection. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingCanvas section for the Editing page. This component provides an interactive canvas for drawing shapes and connectors. It supports panning, zooming, and shape manipulation through mouse events. The component uses useRef and useState hooks to manage canvas interactions and state, including dragging shapes and handling zoom levels. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingStatusBar section for the Editing page. This component displays the number of selected shapes, the current zoom level, and the canvas coordinates. It uses props to receive the necessary data and renders it in a simple status bar format. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingColorPanel section for the Editing page. This component allows users to change the fill and stroke colors of selected shapes. It includes preset color swatches and a custom color picker. The component uses useState to manage color states and updates the selected shape's colors via props. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingTextPanel section for the Editing page. This component allows users to edit text properties of selected shapes, including content, font size, font family, and text alignment. It uses useState to manage text-related states and updates the selected shape's text properties via props. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingExportDialog section for the Editing page. This component provides a modal dialog for selecting export formats (PNG, JPG, SVG) for flowcharts. It includes buttons for each format and handles dialog close events. The component uses props to manage format selection and dialog visibility. Page access: shared by all personas (General User, Registered User).

As a frontend developer, implement the EditingExportOptions section for the Editing page. This component provides options for customizing export settings such as quality, scale, background inclusion, text as paths, and metadata inclusion. It uses useState to manage these settings and triggers the download process via props. Page access: shared by all personas (General User, Registered User).

Test the flowchart export API endpoints for exporting functionalities in jpg, png, and svg formats.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This section includes a sidebar with navigation items such as 'My Flowcharts', 'Shared with me', 'Trash', and 'Settings'. It features a profile display with avatar and user information, a close button with SVG icon, and quick action buttons for creating a new flowchart and importing. Ensure that the sidebar visibility toggles based on the 'isOpen' prop and that the 'onClose' function is triggered when the close button is clicked. This section is accessible only to Registered Users. Page access: Registered User only.

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

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

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

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This section includes a header with a menu toggle button that triggers the 'onMenuToggle' function, a title 'My Flowcharts', a search input with an SVG icon, and action buttons for filtering and creating new flowcharts. Ensure the header is styled according to the design and is accessible only to Registered Users. Page access: Registered User only.

As a frontend developer, implement the DashboardStats section for the Dashboard page. This section displays statistical cards with information such as 'Total Flowcharts', 'Total Exports', and 'Disk Space Used'. Each card includes an icon, value, label, and a progress bar for disk space usage. Ensure the stats are styled with accent colors and are accessible only to Registered Users. Page access: Registered User only.

As a frontend developer, implement the DashboardFlowcharts section for the Dashboard page. This section displays a list of flowchart cards, each with a thumbnail, title, creation and modification dates, and an action menu toggle. Implement state management for toggling the action menu using 'useState'. Ensure the flowcharts are styled according to the design and are accessible only to Registered Users. Page access: Registered User only.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. This section lists recent activities with icons, descriptions, and timestamps. Each activity item includes an icon with a background color and a description of the action taken. Ensure the recent activity list is styled according to the design and is accessible only to Registered Users. Page access: Registered User only.