Set up the global design system including color tokens, typography, spacing, and component library based on the SRD color palette (primary: #1E3A8A, secondary: #F97316, accent: #10B981, etc.). Configure Tailwind or CSS variables for consistent theming across all pages.
Initialize the React frontend project with all required dependencies: @react-three/fiber, @react-three/drei for 3D rendering, a charting/plotting library (e.g., Recharts or D3.js), routing (React Router), state management, and export utilities (jsPDF, html2canvas). Configure project structure, ESLint, and Prettier.
Initialize the FastAPI backend project structure with Python environment, dependencies (FastAPI, SQLAlchemy, Alembic, PyMySQL/aiomysql, Pydantic, python-jose for JWT, passlib for hashing). Configure project layout, CORS middleware, environment variable management (.env), and Alembic for migrations.
Set up a CI/CD pipeline (e.g., GitHub Actions) for the project. Include: lint and test jobs for frontend and backend, Docker image build and push to registry, automated deployment to Kubernetes staging on merge to main. Configure environment-specific secrets for staging and production.
Define SQLAlchemy ORM models for core entities: User (id, email, hashed_password, created_at, updated_at), PlotConfiguration (id, user_id, name, config_json, created_at, updated_at). Generate Alembic migration scripts and seed scripts for development data. Database: MySQL/MariaDB.
Set up global state management (React Context or Zustand) for the frontend application. Manage: authenticated user state, current plot configuration, saved plots list, active trigonometric functions, and UI preferences. Provide hooks and context providers to be wrapped at the app root. Note: depends on T002 (frontend scaffolding).
Implement authentication middleware for FastAPI using JWT tokens. Include token generation on login, token validation middleware, refresh token logic, and dependency injection for protected routes. Ensure password hashing with bcrypt via passlib. Note: basic login endpoints are already done; this task focuses on the reusable middleware layer and security utilities.
Implement GET /api/v1/resources endpoint returning a list of educational resources (title, description, category, content_url, thumbnail_url). Optionally seed the database with initial educational content about sine, cosine, tangent, and other trig functions. Support filtering by category/function type via query params.
Implement the Landing page (v2) with the immersive 3D trigonometric landscape using @react-three/fiber and @react-three/drei. Include dynamic floating islands for each trig function, hover animations showing function graphs, parallax scrolling layers, CTA buttons for Register/Login, and responsive design matching the SRD color theme.
Implement the Signup page with a user registration form: email, password, confirm password fields with validation. On submit, call POST /api/v1/auth/register, handle success (redirect to dashboard) and error states. Apply theme styling. Note: depends on T006 (User Registration API) for full functionality.
Implement the Login page with email/password form, validation, JWT token storage on success, and redirect to dashboard. Handle error states (invalid credentials). Apply theme styling. Note: depends on existing auth login endpoint for full functionality.
Implement the Dashboard page showing the user's recent plots, quick-access to functions, and navigation to Plotter and Resources. Fetch saved configurations from GET /api/v1/plots. Display function cards for Student (View Functions), Educator (Prepare Lesson), and Professional (View Projects) use cases. Note: depends on T007 (Plot Configurations API).
Implement the core Plotter page with: function selector (sin, cos, tan + variants), parameter sliders (amplitude, frequency, phase, vertical shift), range/scale controls, overlay support for multiple functions, interactive zoom/pan on the plot canvas, save configuration button, and export button. Use a plotting library (e.g., D3.js or Recharts). Static interaction model per SRD. Note: depends on T007 (Plot Config API) and T008 (Export API).
Implement the Export page/modal that allows users to select export format (PNG image or PDF), preview the plot, and trigger download. Calls POST /api/v1/export with the current plot configuration and handles file download via blob response. Note: depends on T008 (Plot Export API).
Implement the SavedPlots page showing a list/grid of the user's saved plot configurations with name, preview thumbnail, creation date, and actions (load, rename, delete). Fetches from GET /api/v1/plots. Allows loading a config into the Plotter. Note: depends on T007 (Plot Configurations API).
Implement the Resources page displaying educational content about trigonometric functions. Fetches from GET /api/v1/resources. Shows articles, tutorials, and visual guides organized by category. Supports browsing and filtering by function type (sine, cosine, tangent). Note: depends on T009 (Educational Resources API).
Implement POST /api/v1/auth/register endpoint. Accepts email and password, validates input with Pydantic, hashes password, stores user in DB, returns JWT access token. Include duplicate email handling and proper HTTP error responses.
Implement CRUD endpoints for plot configurations: POST /api/v1/plots (save config), GET /api/v1/plots (list user configs), GET /api/v1/plots/{id} (load config), PUT /api/v1/plots/{id} (update config), DELETE /api/v1/plots/{id} (delete config). All endpoints require JWT auth. Config payload includes function list, range, scale, overlay settings serialized as JSON.
Implement POST /api/v1/export endpoint that accepts a plot configuration payload and returns an exportable format (PDF or image). Use a server-side rendering approach (e.g., matplotlib or reportlab) to generate the file. Support both image (PNG) and PDF export formats as specified in SRD. Return file as a binary response with appropriate Content-Type headers.
As a Tech Lead, verify the end-to-end integration between the Resources frontend page (T018) and the Educational Resources API (T009). Ensure content is correctly fetched, filtered by category, and rendered with proper loading and error states.
As a Tech Lead, verify the end-to-end integration between the Signup frontend page (T012) and the User Registration API (T006). Ensure form submission correctly calls POST /api/v1/auth/register, JWT token is stored in state, user is redirected to dashboard on success, and validation/error messages display properly.
As a Tech Lead, verify the end-to-end integration between the Dashboard/SavedPlots frontend pages (T014, T017) and the Plot Configurations API (T007). Ensure saved plots are correctly fetched, displayed, and that load/delete actions work as expected end-to-end.
As a Tech Lead, verify the end-to-end integration between the Plotter page (T015) and the Plot Configurations API (T007). Ensure saving a configuration from the Plotter correctly POSTs to the API, loading a configuration from SavedPlots correctly populates the Plotter state, and all overlay/parameter settings are persisted faithfully.
As a Tech Lead, verify the end-to-end integration between the Export page/modal (T016) and the Plot Export API (T008). Ensure the current plot configuration is correctly sent to POST /api/v1/export, the returned file blob is handled properly, and the download (PNG or PDF) works in the browser.
No comments yet. Be the first!