magma-earth

As a frontend developer, I want to implement the Login page so that registered users and admins can sign in to access their dashboards. The page should follow the magma-earth storybook theme with coral accent buttons, sand beige background, bilingual (AR/EN) labels, an email + password form, validation feedback, and links to Signup. On success, users are routed to Dashboard; admins to Admin Dashboard per the user flow diagrams.

As a frontend developer, I want to implement the full Homepage page based on the existing JSX design (v2) so that guests and users experience the interactive storybook landing. The page includes: NavBar (sticky, dark charcoal), Hero (100vh animated Earth + child illustration, coral CTAs), StoryIntro (pull-quote, page-curl shadow), ThemeHighlights (3 animated pillar cards), InteractivePreview (open-book carousel with 3D page flip), HowItWorks (3-step dashed connector flow), FeaturedStories (3-col responsive card grid with page-curl corners), CommunityVoices (testimonial strip), EducationalResources (2-col layout), CallToAction (dark bookend with glowing orb), Footer (4-col grid). Users navigate from Homepage → Story, Resources, Signup, Login per the Guest and User flows.

As a frontend developer, I want to implement the Educational Resources page so that guests and users can access content about war, poverty, environment, and humanitarian issues. The page should display topic categories (War & Peace, Poverty, Environment) as clickable olive-green pills, resource cards with titles, descriptions, and coral view-links, and support bilingual display. Entry points: Story → Resources, Dashboard → Resources per user flows.

As a frontend developer, I want to implement the Story reading page so that guests and users can read interactive stories inspired by the Earth-child dialogue. The page should render a full story with illustrated sections, animated page-turn transitions, Arabic + English bilingual text, a progress indicator, a link to the Forum for discussion, and related story suggestions. Entry points: Homepage FeaturedStories → Story, Dashboard → Story per user flows.

As a frontend developer, I want to implement the Signup / Create Account page so that guests can register to become users. The page should include name, email, password, and language preference fields with bilingual (AR/EN) support, a coral primary CTA button, and a link back to Login. On successful registration, users are routed to Dashboard. Follows the storybook theme and the Guest flow: Homepage → Register Prompt → Signup.

As a frontend developer, I want to implement Arabic and English internationalization (i18n) across all pages so that users can switch languages seamlessly. Set up i18next or React context-based translation, RTL layout support for Arabic (direction: rtl, appropriate font), a language toggle (AR | EN) in the NavBar and Footer, and persist the user's preference in localStorage. All static strings on every page must be translatable.

As a frontend developer, I want to implement the Admin Dashboard page so that admins have an overview hub to access Content Manager, Moderation, and Forum management. The page should display summary stats (pending submissions, active stories, flagged content), quick-nav cards to each admin area, and follow the magma-earth theme with deep charcoal tones. Entry point: Login → Admin Dashboard per Admin flow.

As a frontend developer, I want to implement the user Dashboard page so that logged-in users can browse stories, navigate to Contribute, Resources, and Forum. The page should display a personalized welcome, a story browsing grid with category filters, quick-links to Contribute a story and access Resources, and a sidebar or top nav consistent with the magma-earth theme. This is the post-login hub per the User flow: Login → Dashboard → Story / Contribute / Resources.

As a frontend developer, I want to implement the Community Forum page so that users can join discussions linked to stories and global topics. The page should list discussion threads with topic tags, author avatars, reply counts, and timestamps in a bilingual layout. Users can navigate to a thread from the Story page. Admins can moderate from the Forum per the Admin flow: Admin Dashboard → Forum: Moderate Discussions.

As a frontend developer, I want to implement the Moderation page so that admins can review and approve or reject user-submitted content. The page should display a queue of pending submissions with story preview, author info, category tag, approve/reject buttons with confirmation, and a reason-for-rejection text field. Entry point: Admin Dashboard → Moderation per Admin flow.

As a frontend developer, I want to implement the Content Manager page so that admins can manage stories and educational modules. The page should include a story list table with filters (category, status, language), edit/delete actions, an inline edit module view, and a create-new story form. Entry point: Admin Dashboard → Content Manager per Admin flow.

As a frontend developer, I want to implement the Contribute page so that logged-in users can submit their own stories to the platform. The page should include a story title field (AR/EN), category selector, rich text body editor, illustration upload, and a coral Submit button. Submitted stories go into a pending moderation queue. Entry point: Dashboard → Contribute per User flow.

As a backend developer, I want to implement the Stories REST API using FastAPI so that the frontend can fetch, create, update, and delete stories. Endpoints: GET /stories (list with filters), GET /stories/{id} (single story), POST /stories (create, auth required), PUT /stories/{id} (update, admin), DELETE /stories/{id} (admin). Include pagination, category filtering, and bilingual field support (title_ar, title_en, body_ar, body_en). Uses MySQL/MariaDB via Alembic migrations.

As a backend developer, I want to implement the Moderation API using FastAPI so that admins can approve or reject submitted stories. Endpoints: GET /moderation/pending, POST /moderation/{id}/approve, POST /moderation/{id}/reject (with reason payload). Only accessible to admin-role users. Returns updated submission status.

As an AI engineer, I want to integrate the LiteLLM router with GPT-5.2 and Claude 4.5 Opus so that the platform can offer an AI-assisted story writing helper on the Contribute page and context-aware reading hints on the Story page. Set up LiteLLM routing logic: GPT-5.2 for conversational/creative responses, Claude for structured/academic text. Expose a POST /ai/assist endpoint from FastAPI. Connect the frontend Contribute page to this endpoint for inline suggestions.

As a backend developer, I want to implement the Forum/Discussions API using FastAPI so that users can create, read, and reply to discussion threads. Endpoints: GET /forum/threads, GET /forum/threads/{id}, POST /forum/threads (auth), POST /forum/threads/{id}/replies (auth), DELETE /forum/threads/{id} (admin). Supports bilingual content and links threads to story IDs.