Overview
This prompt outlines the development of a modular admin panel application for managing organizational websites. Developers and organizations seeking to implement efficient admin interfaces will benefit from this structured approach.
Prompt Overview
Purpose: The admin panel streamlines website management for organizations through a user-friendly interface and robust backend.
Audience: This application is designed for admin users who need efficient control over their organization’s online presence.
Distinctive Feature: It features a modern UI with a collapsible sidebar and comprehensive functionalities like pagination and bulk actions.
Outcome: Users will experience improved management efficiency and enhanced data handling capabilities across all modules.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Development Tools & DevOps, General Business Operations, Productivity & Workflow
- Techniques: Plan-Then-Solve, Self-Critique / Reflection, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 10-20 minutes
- Skill level: Intermediate
Variables to Fill
- [blog.json] – Blog.json
- [portfolio.json] – Portfolio.json
- [teams.json] – Teams.json
Example Variables Block
- [blog.json]: Array
- [portfolio.json]: Array
- [teams.json]: Array
The Prompt
You are to design and implement a modular, scalable, and optimized admin panel application with both backend and frontend components.
The admin panel will allow an admin user to:
– Signup and login
– Access a dashboard to manage an organization’s website
The dashboard includes four modules:
– Team
– Blog
– Portfolio
– User (admin users)
**Key UI Requirements:**
– Modern design with a collapsible sidebar
– Pagination
– Sorting
– Searching
– Back button functionality
– Bulk action options in all modules
**Technical Stack:**
– Backend: Node.js with Express.js and MySQL
– Frontend: Next.js with Tailwind CSS
**Requirements:**
1. Architect the backend APIs to perform CRUD operations for all modules (Team, Blog, Portfolio, User).
– APIs must be fully tested and free of errors.
– Deliver a valid, tested set of backend API endpoints.
2. Data schema and stored data in MySQL must precisely follow the structure and data content defined by three JSON files:
– Blog data: [blog.json](https://dhaval-patel-ke.github.io/kernel-images/kernel/blog.json)
– Portfolio data: [portfolio.json](https://dhaval-patel-ke.github.io/kernel-images/kernel/portfolio.json)
– Team data: [teams.json](https://dhaval-patel-ke.github.io/kernel-images/kernel/teams.json)
3. Implement user authentication with signup and login functionality for the admin user(s).
4. The frontend dashboard must provide:
– Responsive and modern UI with a collapsible sidebar
– Pagination, sorting, and searching capabilities on all lists
– Functional back button navigation
– Bulk action options (e.g., bulk delete) on all modules
5. Code must be clear and commented, following senior developer best practices, making it understandable to non-technical users.
6. Provide a modular code structure for easy scalability and maintainability.
**Steps:**
– Analyze the JSON files to understand data schema and initial data.
– Design the database schema in MySQL to exactly match these JSON data structures.
– Create backend routes with Express.js for CRUD and authentication.
– Populate the database with the data from the JSON files.
– Develop and test APIs thoroughly, ensuring no errors.
– Implement the Next.js frontend using Tailwind CSS that consumes backend APIs and meets all UI requirements.
– Ensure frontend features: pagination, sorting, searching, back button, bulk actions.
– Comment code and maintain a clear, modular file structure.
**Output Format:**
– Provide fully tested backend API endpoint definitions and sample requests/responses.
– Provide SQL schema and seed scripts to recreate the database and insert JSON-based data.
– Provide frontend Next.js project files demonstrating the admin panel UI and modules.
– Include detailed documentation explaining design, setup, and usage.
**Notes:**
– Ensure data stored in the DB and served by APIs exactly matches the JSON files.
– Keep UX consistent and user-friendly.
– Ensure security best practices for authentication.
– Maintain code clarity and use modern JavaScript/TypeScript practices.
Screenshot Examples
How to Use This Prompt
- [ADMIN_USER]: Admin user for authentication and management.
- [DASHBOARD]: Main interface for managing modules.
- [CRUD_OPERATIONS]: Create, Read, Update, Delete functionalities.
- [DATABASE_SCHEMA]: MySQL structure based on JSON files.
- [API_ENDPOINTS]: Routes for backend operations.
- [FRONTEND_UI]: User interface built with Next.js.
- [BULK_ACTIONS]: Options for mass operations on data.
- [RESPONSIVE_DESIGN]: UI adapts to various screen sizes.
Tips for Best Results
- Plan Your Architecture: Start by designing a clear architecture for both backend and frontend, ensuring scalability and modularity from the beginning.
- Implement Authentication Securely: Use libraries like bcrypt for password hashing and JWT for secure user authentication to protect admin access.
- Focus on UI/UX: Prioritize a modern design with responsive elements, ensuring that features like sorting and pagination enhance user experience.
- Thoroughly Test Your Code: Implement unit and integration tests for both backend APIs and frontend components to catch errors early and ensure functionality.
FAQ
- What technologies are used for the backend of the admin panel?
The backend uses Node.js with Express.js and MySQL for database management. - What features does the admin panel dashboard include?
The dashboard includes modules for Team, Blog, Portfolio, and User management. - How should the frontend design be structured?
The frontend should have a modern design with a collapsible sidebar and responsive layout. - What is required for user authentication?
User authentication requires signup and login functionality for admin users.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
