Build a Scalable Admin Panel with Nodejs and Nextjs Guide

You are tasked with designing and implementing a modular, scalable, and optimized admin panel application. This application will feature both backend and frontend components using the specified tech stack:
– Backend: Node.js with Express.js and MySQL
– Frontend: Next.js with Tailwind CSS
The admin panel should support admin user signup/login and provide a dashboard with five sidebar modules:
– Dashboard (static data initially)
– Team
– Blog
– Portfolio
– Users (admin users)
Additionally, include a logout button at the bottom of the sidebar.
Your objective is to guide Cursor AI, step by step, like a senior Google developer, from zero to completion. Ensure that every feature, code quality, and best practice is followed without errors.
Use a detailed checklist approach with checkboxes for every key task and milestone to ensure clear progress tracking and thorough implementation.
# Detailed Instructions and Steps for Cursor AI:
– [] 1. Preparation and Understanding:
– [] Analyze the provided JSON data files for Blog, Portfolio, and Team modules to fully understand the data structures and relationships.
– [] Define a precise database schema in MySQL that matches the JSON data formats.
– [] 2. Backend Development:
– [] Create a modular Express.js backend with:
– [] CRUD RESTful APIs for Team, Blog, Portfolio, and Users modules.
– [] An authentication system for admin users (signup/login) with secure password handling and token-based authentication.
– [] Implement validation that matches JSON data formats for all operations.
– [] Develop seed scripts to populate the MySQL database with initial JSON data.
– [] Test each API endpoint thoroughly, providing examples of requests and responses; ensure zero errors.
– [] 3. Frontend Development:
– [] Build the Next.js frontend dashboard incorporating Tailwind CSS with:
– [] A responsive and modern UI featuring a collapsible sidebar with the five modules:
– Dashboard (static data for now)
– Team
– Portfolio
– Blog
– Users
– [] A logout button placed at the bottom of the sidebar.
– [] For each module:
– [] Display data in tables with pagination, sorting, and searching capabilities.
– [] Provide bulk action options (e.g., bulk delete).
– [] Show functional back button navigation.
– [] Include an Add button that opens forms for creating new entries.
– [] Forms must:
– [] Match the data structure exactly.
– [] Have validations consistent with the backend and data formats.
– [] Support edit, view, and delete options at the top right corner of the table or individual rows.
– [] Connect frontend components properly to backend APIs, ensuring smooth data flow and error handling.
– [] 4. Code Quality and Maintainability:
– [] Ensure all code is clear, well-commented, and follows best practices akin to senior developers.
– [] Structure files and modules in a scalable and maintainable fashion.
– [] 5. Documentation:
– [] Prepare in-depth documentation covering:
– [] Project setup instructions.
– [] Database schema details and seed data import.
– [] API endpoint definitions with sample requests/responses.
– [] Frontend usage guide.
– [] Authentication and security details.
– [] 6. Continuous Improvement Workflow:
– [] Maintain three separate files for Cursor AI:
– [] File 1: All code and configuration files used to build the admin panel.
– [] File 2: Your own version of the file mirroring File 1 to cross-verify and check progress against requirements step-by-step.
– [] File 3: Log file to record issues encountered, research notes, and market analysis of other compatible admin panel solutions; use these findings to drive improvements.
– [] 7. Final Validation:
– [] Cross-check both development files against the checklist.
– [] Implement improvements identified from research and user feedback into the main project.
– [] Conduct a final round of testing for functionality, UX consistency, and security compliance.
# Output Format
– Deliver a documented, modular backend API codebase with tested CRUD endpoints and authentication.
– Provide SQL schema scripts and JSON-seeded data import scripts.
– Deliver a fully functional Next.js frontend project demonstrating the admin panel UI and modular features.
– Include comprehensive documentation as outlined.
– Present the three files for project tracking and iterative improvement as detailed in step 6.
This prompt must be followed precisely with methodical, checkbox-verified progression, reasoning for each stage, and clear, commented code to ensure Cursor AI can create a flawless, enterprise-grade admin panel from scratch without omissions or errors.