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
https://youtu.be/IyGoucFuNaY

🔹 Part 2 – Initial Setup and App Structure
https://youtu.be/L09cAOXnt84

🔹 Part 3 – Sidebar and Navbar Implementation
https://youtu.be/2EZfn9X5oqY

🔹 Part 4 – Footer Component Creation
https://youtu.be/mR0Wo38jrKM

🔹 Part 5 – Dashboard Component Development
https://youtu.be/Z13Yll6urbA

🔹 Part 6 – Integration of Chart.js Library
https://youtu.be/T70hwgsuSqU

🔹 Part 7 – SpendAnalysis created, React Chart.js 2 Integration
https://youtu.be/ipaoTF5YEzM

🔹 Part 8 – Static Transaction List Implementation
https://youtu.be/T70hwgsuSqU

🔹 Part 9 – User Management Component
https://youtu.be/7_E1I7QgjcI

🔹 Part 10 – Settings Component Implementation
https://youtu.be/AHe4Koitv8A

🔹 Part 11 – Database Setup and Query Execution
https://youtu.be/yLkMuimvNVk

🔹 Part 12 – Backend Project Setup
https://youtu.be/rlkFqio91bE

🔹 Part 13 – Models and Controllers Setup
https://youtu.be/BpQ7l3EqAR0

🔹 Part 14 – Routing and Server Configuration
https://youtu.be/I2PKhP9dBhI

🔹 Part 15 – Postman Setup and API Testing
https://youtu.be/fHKj9ldKSuw

🔹 Part 16 – Login and Dashboard Access API
https://youtu.be/gxsqzkIIxbk

🔹 Part 17 – Login API Implementation
https://youtu.be/kkf-ygyOHxQ

🔹 Part 18 – Captcha Implementation and Dashboard Access
https://youtu.be/Cr-FMabt4HM

🔹 Part 19 – API Authentication Setup
https://youtu.be/7Pm4MvSr8KY

🔹 Part 20 – Transaction Management APIs
https://youtu.be/TTjX1wPEiwQ

🔹 Part 21 – Session Handling and Error Management
https://youtu.be/h2S-YjbMOS8

🔹 Part 22 – Sales Data Management API
https://youtu.be/isY2pp4bQgI

🔹 Part 23 – GetSalesData API, React Integration & Utility Functions
https://youtu.be/9k7eFu0Mxa0

🔹 Part 24 – Add SpendData API creation and Postman Testing
https://youtu.be/Vd-wOHsn_tg

🔹 Part 25 – getSpendData API creation, testing, and integration in React
https://youtu.be/bI-9gXvXoY0

🔹 Part 26 – getSalesSummary API: Creation, Testing & React Integration
https://youtu.be/MqLWNTXvDtA

🔹 Part 27 – GetAllUsers, UpdateUserRole, DeleteUser API Creation
https://youtu.be/u11tbnc4Krs

🔹 Part 28 – GetAllUsers, UpdateUserRole, DeleteUser API React Integration , Modal creation
https://youtu.be/FpW6YvaSlGY

Part 29 – UpdatePAssword, updateUserPreference API Creation
https://youtu.be/-dKXwEwb-Ug

Видео How to Create Admin Dashboard using React.js, Node.js and MySQL | Step by Step code | Part-30 канала Info Studio