This bounty involves building out a static settings page for a web application, replacing a placeholder with actionable account controls. It requires front-end development to display mock data for account, notification, security, and billing preferences, matching existing styles without changing API behavior. The scope is limited to a single `page.tsx` file and associated styles.
A starter prompt for Claude Code, what you'll need, and how to reach them.
You are an expert React/Next.js and Tailwind CSS developer. The goal is to implement a static settings page for a web application, replacing an existing placeholder. Fork the `SecureBananaLabs/bug-bounty` repository. Locate `apps/web/app/settings/page.tsx`. Your task is to replace the current placeholder content with a detailed settings overview that includes sections for 'Account / profile', 'Notifications', 'Security', and 'Billing / payout preferences'. Each section should display static mock data and incorporate 'status chips' and 'next-action controls' as appropriate. Ensure the new UI strictly adheres to the existing frontend styles found in the repository, maintaining consistency. The implementation must NOT change any backend or API behavior; use client-side mock data only. Focus solely on the specified `page.tsx` file and any necessary shared page styles. Prioritize a clean, modular component structure using React and Tailwind CSS. The MVP is a visually complete, static settings page with all four specified sections and mock data. Verify by ensuring the new page renders correctly in isolation and matches the existing application's aesthetic.
The operator could reach developers interested in contributing to open-source projects or bug bounties by showcasing their ability to quickly deliver front-end tasks, potentially cross-selling 'forge-kit' for automating their own project delivery.
Bounty (amount on the issue). ## Bug The `/settings` route currently shows a placeholder instead of useful account controls. Users should be able to see a clear, static overview of account/profile, notification, security, and billing or payout preferences. ## Impact - The settings route currently feels unfinished. - Users cannot quickly inspect account visibility, notification preferences, security posture, or billing/payout defaults. - Important account state is not scannable from the settings page. ## Expected behavior The `/settings` page should render a static but actionable settings overview matching the existing frontend style. It should include sections for: - Account / profile - Notifications - Security - Billing / payout preferences The implementation should use mock data only and should not change API behavior. ## Scope - Replace the placeholder settings card with a useful static settings overview. - Add status chips and next-action controls. - Keep the change scoped to `apps/web/app/settings/page.tsx` and shared page styles only if needed. - Do not change backend/API behavior. This issue is limited only to the creator of this issue. This means only the issue author can a
Standard for any GitHub-based development.
Standard Next.js development environment.
Core skill for Next.js 16 App Router development.
Standard for styling in the operator's stack.
Comment directly on GitHub issue #2822 (if permitted as the author, otherwise this bounty cannot be taken) and open a draft Pull Request referencing the issue.
“As the designated author for this bounty, I've developed a working prototype of the static settings page per the specifications in issue #2822. Here's a link to my draft PR for early review, demonstrating the correct styling and mock data implementation.”
Open the original ↗