How to Create Admin Dashboard using React.js, Node.js and MySQL | Step by Step code | Part-30
Welcome back, developers! 👋
In Part 30 of our React + Node.js Admin Panel Series, we bring the backend settings APIs to life on the frontend! 💥
In the last part (Part 29), we built secure backend routes for:
✔️ Admin password updates
✔️ User preferences like email notifications and dark mode
👉 In this part, we implement:
🔐 Password update functionality via a modal popup
🌙 Dark Mode toggle with global body styling
🧠 Dynamic user preferences with real-time database syncing
🔁 Session handling with token checks and expiration logic
🎨 Fully styled modal & form with smooth transitions in light and dark modes
We refactor Settings.js to:
✅ Replace hardcoded state with real DB values
✅ Connect API calls using updateUserSettings and updatePassword
✅ Display alerts and handle errors smoothly
✅ Apply theme changes dynamically using useEffect
✅ Build a modern modal UX for secure password management
We also enhanced our settings.css to:
💡 Support responsive styling
🌓 Add smooth dark mode transitions
🖼️ Design modals with clean UI/UX principles
🛠 Utility functions like checkTokenExpiry, getAuthHeaders, and handleSessionExpired ensure frontend security and a seamless user experience.
📌 This video builds directly on:
🔙 Part 23 → utility functions (linked below)
🔙 Part 10 → original Settings component structure
🔙 Part 29 → secure backend settings APIs
📂 Source Files Mentioned:
settingsApi.js
settings.js
settings.css
util.js
🧭 Admin Panel Video Series Roadmap
🔹 Part 1 – Introduction and React App Setup
• Build React Admin Dashboard with Node.js &...
🔹 Part 2 – Initial Setup and App Structure
• Build React Admin Dashboard with Node.js &...
🔹 Part 3 – Sidebar and Navbar Implementation
• Build Complete React Admin Dashboard with ...
🔹 Part 4 – Footer Component Creation
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 5 – Dashboard Component Development
• Build React Admin Dashboard with Node.js &...
🔹 Part 6 – Integration of Chart.js Library
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 7 – SpendAnalysis created, React Chart.js 2 Integration
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 8 – Static Transaction List Implementation
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 9 – User Management Component
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 10 – Settings Component Implementation
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 11 – Database Setup and Query Execution
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 12 – Backend Project Setup
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 13 – Models and Controllers Setup
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 14 – Routing and Server Configuration
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 15 – Postman Setup and API Testing
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 16 – Login and Dashboard Access API
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 17 – Login API Implementation
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 18 – Captcha Implementation and Dashboard Access
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 19 – API Authentication Setup
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 20 – Transaction Management APIs
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 21 – Session Handling and Error Management
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 22 – Sales Data Management API
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 23 – GetSalesData API, React Integration & Utility Functions
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 24 – Add SpendData API creation and Postman Testing
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 25 – getSpendData API creation, testing, and integration in React
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 26 – getSalesSummary API: Creation, Testing & React Integration
• React Admin Dashboard with Node.js & MySQL...
🔹 Part 27 – GetAllUsers, UpdateUserRole, DeleteUser API Creation
• React Admin Dashboard Tutorial Part 27 | D...
🔹 Part 28 – GetAllUsers, UpdateUserRole, DeleteUser API React Integration , Modal creation
• How to Create Admin Panel using React.js, ...
Part 29 – UpdatePAssword, updateUserPreference API Creation
• How to Create Admin Dashboard using React....