• 1. Setup Project Structure (Frontend):

  • 1.1. Initialize a new React application.
  • 1.2. Setup routing for the different pages in your app (e.g., Dashboard, Create Model, other pages, etc.).
  • 1.3. Setup a global state management solution (like Redux or MobX) if necessary.

• 2. User Authentication (Frontend):

  • 2.1. Create UI for user registration and login.
  • 2.2. Implement functionality to make GraphQL mutations for user registration and login. done?
  • 2.3. Implement client-side session management. done?

• 3. Data Selection UI (Frontend):

  • 3.1. Create a UI component for users to select data for their model.
  • 3.2. Store user's data selection in local state.

• 4. Feature Selection and Creation UI (Frontend):

  • 4.1. Create a UI component for users to select or create new features using Python snippets.
  • 4.2. Implement a code editor for users to write Python snippets.
  • 4.3. Store user's feature selection and created features in local state.

• 5. Model Selection UI (Frontend):

  • 5.1. Create a UI component for users to select a machine learning model for training.
  • 5.2. Store user's model selection in local state.

• 6. Training Session Configuration UI (Frontend):

  • 6.1. Create a UI component for users to configure their training session (e.g., device, machine). need small changes.
  • 6.2. Store user's training session configuration in local state.

• 7. Create Training Session (Frontend):

  • 7.1. Once the user finishes their setup, generate a JSON configuration from the local state.
  • 7.2. Implement functionality to make a GraphQL mutation to start a training session with the JSON configuration.

• 8. Results Display and Model Export UI (Frontend):

  • 8.1. Create a UI component to display training results.
  • 8.2. Implement functionality to make a GraphQL query to fetch training results.
  • 8.3. Create a UI component for users to export their models.
  • 8.4. Implement functionality to make a GraphQL mutation to export models.

• 9. Setup Testing (Frontend):

  • 9.1. Setup a testing framework (like Jest).
  • 9.2. Write unit tests for your components.
  • 9.3. Write integration tests for your app.

• 10. Implement Error Handling (Frontend):

  • 10.1. Implement error boundary components to catch errors in your React component tree.
  • 10.2. Display error messages to users in case of GraphQL errors.

• 11. Responsive Design and Accessibility (Frontend):

  • 11.1. Implement responsive design for various screen sizes.
  • 11.2. Make sure your app is accessible to all users (e.g., those with disabilities).

• 12. Admin Role and Permissions (Frontend):

  • 12.1. Implement admin user identification (recognizing an admin user after login).
  • 12.2. Hide/Show admin specific features based on the user role.

• 13. Admin Editable Content (Frontend):

  • 13.1. Identify the components that need to be editable by the admin.
  • 13.2. Implement edit buttons visible only to the admin on those components.
  • 13.3. Store updates from admin edits in local state, and include in the GraphQL mutation when saving.

• 14. Admin Specific Pages (Frontend):

  • 14.1. Create admin specific pages (like 'Users', 'Admin Dashboard').
  • 14.2. Add these pages to the sidebar menu, visible only to the admin.

#trello link https://trello.com/b/pnX4LXfx/deeptrade-product-board

#Figma link https://www.figma.com/file/2VP8rCyYAbU7T9bkrX5UD6/Deeptrade-Dashboard?t=EMtk6xay3LdiZypy-0