MERN Stack Library Management App

Create a new React app named client in the root folder to set up the front end for the MERN stack library project, then run it on localhost:3000.

Set up Ant Design (antd) in the MERN stack library management app by installing antd and testing button variants.

Develop and apply custom stylesheets to override entity components, defining alignments, sizes, and theme colors (primary, secondary) with flex, margins, and padding for a lightweight, performance-focused MERN app.

Create login, register, and home pages for library management app and configure React Router DOM routes. Install redux, react-redux, toolkit, and axios and set up BrowserRouter with routes for authentication.

Design the register UI for the MERN stack library management app, centering a form with name, email, and password fields using a reusable entity form and a styled button.

Style authentication forms for the MERN stack library app, detailing register and login layouts, typography, navigation links, and spacing; plan backend setup and API integration next.

Set up the back-end for the MERN library app by initializing npm, creating an Express server, and wiring MongoDB with mongoose, jsonwebtoken, bcrypt, and nodemon for auto-restart.

Connect a Node.js and Express server to MongoDB Atlas by configuring a Mongoose connection with a MongoDB URL, handling success and error events, and restarting the server to apply changes.

Define the user model with Mongoose for authentication, including name, email, phone, password, role (admin, librarian, pattern), and status with timestamps.

Register a user in the MERN stack library management app by creating a post route, validating existence, hashing password with bcrypt using ten salt rounds, and returning a success response.

Validate the user's email and password, generate a JWT token with the user ID that expires in one day, and return it to the front end for login.

Builds frontend backend integration by creating an Axios instance and API calls for user registration and login, and implements token-based authorization with local storage for protected routes.

Implement authorization by distinguishing protected and non-protected routes and wrapping the home page in a protected root. Validate tokens with front-end checks and prepare a back-end JWT-based get user API.

Implement a JWT-based auth middleware that validates tokens and attaches the user ID to the request. Apply it before API endpoints to secure the get logged in user route.

Learn to manage app state with redux toolkit by creating a loader slice to show a global loader during API requests, configuring the store, and providing it to the app.

Implement show and hide loading with Redux Toolkit by building a loader component, wiring it to the app state, and displaying a centered spinner during login and registration API calls.

Explore the dynamic layout of a MERN stack library app, featuring a header with user info and logout, a project title, and role-based pages for books, users, and reports.

Define the book model and schema for the MERN stack library app, including title, description, author, publisher, published on, rent per day, total copies, available copies, image, and created by.

Build books APIs with CRUD operations in a MERN stack library app, including get all books, get by id, add, update, and delete, secured by authentication middleware.

Implement the add book feature in the MERN library app front end by creating the books module, adding an add book button, and showing a centered book form modal.

Build and validate add book form in the MERN stack library app, capturing title, description, image URL, author, publisher, published date, category, rent per day, total copies, and available copies.

Display books in a table by fetching all books, define columns (image, title, category, author, total copies, available copies, publisher), and enable add, edit, delete with reload after actions.