[FE] Create a quest wizard UI (6 steps)

[Kaylahray]

Description

Build Create a quest from [DESIGN] Create a quest wizard: overlay/panel, 6-step stepper (Basics → Eligibility → Tasks → Rewards → Schedule → Review & publish), draft/preview/publish, success modal. Client validation; publish may stub until Integration.

User Story

figma

As a Founder,
I want the full Create a quest flow,
so that I can define tasks, rewards, and schedule before publishing.

Requirements and Context

• Files: e.g. frontend/src/app/creator/quests/new/ + wizard step components
• Fields per design (type cards, task blocks, reward summary + fees, schedule, review)
• Footer: Back · Preview · Save as draft · Continue / Publish quest
• Exit creator · Saved · success modal (Close / View quest)
• Entry from Quests hub CTA

Suggested Implementation

// Wizard shell + steps + RHF/zod
// Save draft → POST /missions/drafts when auth ready
// Publish stub until INT

Acceptance Criteria

• All 6 steps with validation
• Rewards summary (required / available / remaining)
• Review + Publish success modal
• Linked from Quests hub

Submission Guidelines

• Branch: feat/fe-create-quest-wizard
• Depends on: [DESIGN] Create a quest wizard
• PR: feat(frontend): Create a quest 6-step wizard UI

[julianvillalba688]

Motivation & Relevant Experience:
I have extensive experience building complex, state-heavy multi-step forms and wizard interfaces in Next.js. I specialize in using react-hook-form paired with zod for rigorous, schema-driven client-side validation. I am highly comfortable managing shared form state across deeply nested stepper components, calculating real-time dynamic summaries (like the required rewards module), and ensuring a seamless, polished UX from draft creation to the final success modal.

Proposed Approach:

Architecture & Global State: I will scaffold the wizard shell under frontend/src/app/creator/quests/new/. I will leverage RHF's useFormContext combined with a comprehensive zod schema to manage the global state of the quest payload, ensuring data persists cleanly as the user navigates between the 6 steps.

Modular Step Implementation: I will break down the UI into 6 modular step components (Basics, Eligibility, Tasks, Rewards, Schedule, Review). For the Rewards step, I will implement real-time computed properties to dynamically display the summary of required, available, and remaining balances.

Navigation & Persistence: I will build the persistent wizard footer, handling dynamic routing and validation guards for "Back", "Preview", "Save as draft", and "Continue/Publish".

Modals & API Stubs: I will implement the entry CTA from the Quests hub and the final Publish Success modal. For data submission, I will create clean, typed asynchronous stubs for POST /missions/drafts and the publish action, ensuring the UI behaves perfectly and is ready for the backend integration phase.

I can deliver this fully validated, pixel-perfect wizard on the feat/fe-create-quest-wizard branch within 24 hours.

[Ezeh20]

Hi
I am a returning contributor. I have gone through this issue and I would like to work on it.

[grantfox-oss]

🦊 GrantFox — @Ezeh20 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #260)
2. Your PR will be reviewed by the Quid-proquo maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Ezeh20's PR #277 was approved and merged by @Kaylahray.

🏆 @Ezeh20: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (242 total points). Track your full progress on GrantFox.

👏 Great work, @Ezeh20! Keep contributing to Quid-proquo.