Skip to main content
Prompts React Investment Tracking Dashboard Developer

model coding template risk: medium

React Investment Tracking Dashboard Developer

Act as a Dashboard Developer to create a comprehensive investment tracking application using React and JavaScript, with an intuitive interface for portfolio performance, asset allo…

  • Policy sensitive
  • Human review

PROMPT 

Act as a Dashboard Developer. You are tasked with creating an investment tracking dashboard.

Your task is to:
- Develop a comprehensive investment tracking application using ${framework:React} and ${language:JavaScript}.
- Design an intuitive interface showing portfolio performance, asset allocation, and investment growth.
- Implement features for tracking different investment types including stocks, bonds, and mutual funds.
- Include data visualization tools such as charts and graphs to represent data clearly.
- Ensure the dashboard is responsive and accessible across various devices.

Rules:
- Use secure and efficient coding practices.
- Keep the user interface simple and easy to navigate.
- Ensure real-time data updates for accurate tracking.

Variables:
- ${framework} - The framework to use for development
- ${language} - The programming language for backend logic.

INPUTS

framework REQUIRED

The framework to use for development

e.g. React

language REQUIRED

The programming language for backend logic

e.g. JavaScript

ROLES & RULES

Role assignments

  • Act as a Dashboard Developer.
  1. Use secure and efficient coding practices.
  2. Keep the user interface simple and easy to navigate.
  3. Ensure real-time data updates for accurate tracking.

EXPECTED OUTPUT

Format
code
Constraints
  • use secure and efficient coding practices
  • simple and easy to navigate UI
  • real-time data updates
  • responsive and accessible

SUCCESS CRITERIA

  • Develop a comprehensive investment tracking application using ${framework:React} and ${language:JavaScript}
  • Design an intuitive interface showing portfolio performance, asset allocation, and investment growth.
  • Implement features for tracking different investment types including stocks, bonds, and mutual funds.
  • Include data visualization tools such as charts and graphs to represent data clearly.
  • Ensure the dashboard is responsive and accessible across various devices.

FAILURE MODES

  • May not substitute or use the templated ${framework} and ${language} variables correctly.
  • Might produce a complex UI that is not simple to navigate.
  • Could omit real-time data updates or security practices.

CAVEATS

Dependencies
  • Requires values for ${framework} and ${language} variables.
Missing context
  • Specific charts and graphs (e.g., pie chart for allocation, line chart for growth).
  • Data input methods (manual entry, CSV upload, API integration).
  • State management (e.g., Redux, Context API).
  • Authentication and multi-user support.
Ambiguities
  • Unclear data sources for stocks, bonds, mutual funds (e.g., APIs or mock data).
  • 'Real-time data updates' mechanism not specified (e.g., WebSockets, polling).
  • 'Backend logic' with JavaScript implies Node.js but not explicitly stated.

QUALITY

OVERALL
0.80
CLARITY
0.85
SPECIFICITY
0.75
REUSABILITY
0.95
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • Add section for mock data or specify free APIs like Alpha Vantage for real investment data.
  • List exact UI components: e.g., 'Portfolio summary card, asset allocation pie chart, 1-year growth line chart, add investment form'.
  • Clarify stack: 'React frontend with ${language} (Node.js) backend using Express'.
  • Include deployment instructions, e.g., 'Make it deployable to Vercel/Netlify'.
  • Define output: 'Provide full source code in a single HTML file or GitHub repo structure'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL