Build a Professional AI-Powered Dashboard Platform
Act as a senior full-stack engineer, UI/UX designer, and software architect. Build a complete, production-ready dashboard application with a premium design, reliable backend, secure authentication, responsive layout, and real working functionality.
1. Premium UI/UX Design
Create a modern, professional dashboard with a premium glassmorphism interface, subtle 3D depth, smooth animations, elegant shadows, and refined typography.
Support desktop, tablet, and mobile screens.
Include Light Mode and Dark Mode with persistent preferences.
Create a collapsible sidebar, responsive top navigation, breadcrumbs, profile menu, notification panel, and global search.
Use consistent spacing, reusable components, loading skeletons, empty states, error messages, and confirmation dialogs.
Keep the interface clean, fast, accessible, and easy to navigate.
2. Dashboard Overview
Create interactive overview cards for:
Total Projects
Active Users
Total Requests
Successful Operations
Failed Operations
API Usage
Recent Activity
System Status
Use real database data. Add interactive charts, date filters, searchable tables, pagination, and export options. Never display fabricated statistics as real data.
3. Authentication and Role-Based Access
Implement secure authentication with:
Login, logout, password reset, and session management.
Super Admin, Admin, Editor, and Viewer roles.
Permission-based access to pages, actions, settings, and records.
Server-side authorization for every protected operation.
Secure handling of credentials, tokens, and environment variables.
Audit logs for sensitive administrative actions.
Do not rely on hiding frontend buttons as the only security mechanism.
4. Prompt Manager and Public Link Generator
Build a dedicated Prompt Manager that allows users to enter, save, edit, search, organize, and reuse long AI prompts.
Features:
Large multiline prompt editor with character count.
Prompt title, description, tags, categories, and creation date.
Save prompts in the database.
Add a Generate Public Link button.
Integrate with the Pastefy API or GitHub Gist API through a secure backend.
When the user submits a prompt, send the complete original text to the selected provider.
Automatically receive and display the generated public URL.
Add Copy Link, Open Link, Copy Prompt, Edit, and Delete actions.
Display clear loading, success, and failure states.
Verify that the generated link opens the full prompt without requiring login when public access is intended.
Do not truncate, rewrite, or modify the original prompt.
Handle API failures, rate limits, timeouts, invalid responses, and duplicate submissions gracefully.
Never expose API tokens in frontend code, browser storage, logs, or public responses.
If an external API requires authentication, configure its token using server-side environment variables. Do not pretend that a link was created when the API request fails.
5. API Integration Center
Create an API management page with:
Provider name and connection status.
API configuration and environment checks.
Test Connection button.
Request history and response status.
Latency, error rate, and usage statistics.
Safe error logging with secrets and sensitive information redacted.
Retry controls for appropriate temporary failures.
Clear setup instructions when configuration is missing.
Never expose secret keys in the UI or logs.
6. Project and Task Management
Implement:
Create, update, archive, and delete projects.
Assign owners and team members.
Task status, priority, deadlines, and progress tracking.
Search, filters, sorting, and pagination.
Activity history and project detail pages.
Confirmation before destructive actions.
Persist all data using the configured database.
7. Notifications and Activity Logs
Display success, warning, and error notifications.
Maintain a searchable activity timeline.
Show timestamps in the user's configured timezone.
Record important actions and API failures.
Avoid duplicate notifications and unnecessary repeated requests.
8. Database and Backend
Use the existing project's backend and database when available. Do not replace the current stack without approval.
If no backend exists, propose a suitable stack such as Supabase with PostgreSQL or Firebase.
Implement:
Validated database schemas.
Appropriate indexes and relationships.
Row-level security or equivalent authorization.
Server-side validation.
Secure API endpoints.
Pagination and efficient database queries.
Proper error handling and safe migrations.
Do not store secrets or sensitive credentials in public tables.
9. Performance and Reliability
Use reusable components and maintainable architecture.
Avoid unnecessary rerenders and repeated API calls.
Add request timeouts and appropriate retry policies.
Handle network disconnections and expired sessions.
Prevent duplicate form submissions.
Provide clear feedback for every important action.
Ensure that refreshing the page does not unexpectedly lose saved data.
10. Testing and Quality Assurance
Use the available testing tools, including Playwright when supported.
Test:
Login and role permissions.
Navigation and responsive layouts.
CRUD operations and persistence.
Prompt creation and public URL generation.
Actual API responses and public-link accessibility.
Copy and open link actions.
Invalid inputs, failed requests, loading states, and retries.
Browser console errors and network failures.
Regression