This is a bounty to implement a static, actionable settings overview page for a web application. The task involves replacing a placeholder with sections for account, profile, notifications, security, and billing, using mock data and adhering to existing frontend styles. It's a well-defined UI task with clear scope.
A starter prompt for Claude Code, what you'll need, and how to reach them.
You are an expert Next.js 16 App Router, React 19, Tailwind v4, and TypeScript developer. Your task is to implement the specified GitHub bounty: SecureBananaLabs/bug-bounty issue #1810. The goal is to replace the placeholder settings card at `/settings` with a static, actionable settings overview page. This page should mirror the existing frontend style of the `apps/web` directory in the `SecureBananaLabs/bug-bounty` repository. Focus on the `apps/web/app/settings/page.tsx` file. Implement distinct sections for 'Account/Profile', 'Notifications', 'Security', and 'Payout/Billing Preferences'. Each section should display static mock data, status chips (e.g., 'Enabled', 'Not Configured', 'High'), and 'next-action' buttons (e.g., 'Manage Profile', 'Configure Alerts', 'Setup 2FA', 'Update Details'). Do NOT implement any actual API calls, state management, or backend logic; all data should be mocked directly within the component. Ensure the page is responsive and visually consistent with the rest of the application's UI. The solution must be contained within `apps/web/app/settings/page.tsx` and potentially shared styles if necessary, but strictly no changes outside the `apps/web` app. Use Next.js 16 App Router, React 19, Tailwind v4. Assume the project uses TypeScript. First, set up the project locally by forking and cloning the repo. Then, guide me through setting up the local development environment and implementing the page step-by-step. Provide the exact code for the `page.tsx` file, including mock data, and ensure it correctly uses Tailwind CSS for styling to match the existing design.
Bounty (amount on the issue). ## Bug The `/settings` route currently renders a single placeholder card instead of useful account controls. The page says account preferences, profile visibility, and security controls live there, but it does not expose any concrete settings, statuses, or next actions. ## Impact - Users can navigate to settings but cannot inspect profile visibility, notification preferences, security posture, or billing defaults. - The route feels unfinished compared with the rest of the marketplace shell. - Important account state is not scannable from the page. ## Expected behavior `/settings` should render a static but actionable settings overview matching the current frontend style, including account/profile, notifications, security, and payout/billing preference sections. It should use mock data only and avoid changing API behavior. ## Scope - Replace the placeholder settings card with a useful static settings overview. - Add status chips and next-action controls for account, notification, security, and billing/payout preferences. - Keep the change scoped to `apps/web/app/settings/page.tsx` and shared page styles if needed. This issue is limited only to the creat
Standard for any developer.
Standard development environment.
Required for cloning/forking repos.
Operator's core tech stack.
Create a new issue on the SecureBananaLabs/bug-bounty repository with the same contents as issue #1810, explicitly referring to issue #743 and #1810. Then, comment on your new issue to signal intent to work.
“I'm interested in working on the settings page bounty for SecureBananaLabs. I've created issue #[YOUR_NEW_ISSUE_NUMBER] to track my progress, as per your guidelines. I have extensive experience with Next.js and Tailwind CSS and can deliver a clean, static implementation of the settings overview quickly. I'll open a draft PR shortly with a working prototype.”
Open the original ↗