Skip to main content
Prompts Next.js Self-Hosted App Dashboard Builder

developer coding template risk: low

Next.js Self-Hosted App Dashboard Builder

Act as a Full-Stack Developer to build a self-hosted app dashboard using Next.js, Tailwind CSS, and NextAuth, featuring app icon fetching, admin panel, external links, and authenti…

PROMPT 

Act as a Full-Stack Developer specialized in Next.js. You are tasked with building a self-hosted app dashboard using Next.js, Tailwind CSS, and NextAuth. This dashboard should allow users to manage their apps efficiently and include the following features:

- Fetch and display app icons from [https://selfh.st/icons/](https://selfh.st/icons/).
- An admin panel for configuring applications and managing user settings.
- The ability to add links to other websites seamlessly.
- Authentication and security using NextAuth.

Your task is to:
- Ensure the dashboard is responsive and user-friendly.
- Implement best practices for security and performance.
- Provide documentation on how to deploy and manage the dashboard.

Rules:
- Use Next.js for server-side rendering and API routes.
- Utilize Tailwind CSS for styling and responsive design.
- Implement authentication with NextAuth.

Variables:
- ${baseUrl} - Base URL for fetching icons.
- ${adminSettings} - Configuration settings for the admin panel.
- ${externalLinks} - List of external website links.

INPUTS

baseUrl REQUIRED

Base URL for fetching icons

e.g. https://selfh.st/icons/

adminSettings REQUIRED

Configuration settings for the admin panel

e.g. {"theme":"dark","maxApps":10}

externalLinks REQUIRED

List of external website links

e.g. ["https://example.com","https://another.com"]

ROLES & RULES

Role assignments

  • Act as a Full-Stack Developer specialized in Next.js.
  1. Ensure the dashboard is responsive and user-friendly.
  2. Implement best practices for security and performance.
  3. Provide documentation on how to deploy and manage the dashboard.
  4. Use Next.js for server-side rendering and API routes.
  5. Utilize Tailwind CSS for styling and responsive design.
  6. Implement authentication with NextAuth.

EXPECTED OUTPUT

Format
markdown
Constraints
  • include full code implementation
  • provide deployment documentation
  • ensure responsive design
  • use Next.js Tailwind CSS NextAuth

SUCCESS CRITERIA

  • Fetch and display app icons from https://selfh.st/icons/
  • Include admin panel for configuring applications and managing user settings
  • Add links to other websites
  • Implement authentication and security using NextAuth
  • Ensure responsive and user-friendly design
  • Follow best practices for security and performance
  • Provide deployment and management documentation

FAILURE MODES

  • May not fully implement all specified features
  • Could neglect security best practices
  • Might ignore performance optimizations
  • Possibly overlook proper use of provided variables
  • Risk of non-responsive design despite instructions

CAVEATS

Dependencies
  • ${baseUrl} - Base URL for fetching icons.
  • ${adminSettings} - Configuration settings for the admin panel.
  • ${externalLinks} - List of external website links.
Missing context
  • Database or storage solution for apps and users.
  • Structure and expected format of ${adminSettings} and ${externalLinks}.
  • Deployment platform or environment details.
  • Exact output format (e.g., code files, folder structure).
Ambiguities
  • Unclear what 'manage their apps efficiently' entails specifically.
  • Vague description of admin panel features and user settings.
  • 'Add links to other websites seamlessly' lacks implementation details.

QUALITY

OVERALL
0.70
CLARITY
0.80
SPECIFICITY
0.70
REUSABILITY
0.60
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Define precise features for app management and admin panel.
  • Specify database technology (e.g., PostgreSQL with Prisma).
  • Provide example values or schemas for variables like ${adminSettings}.
  • Add required folder structure and file list for the output.
  • Include user stories or wireframes for UI components.

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 DEVELOPER