MERN Stack Online Payments / Wallet Application

Design and implement a registration form for a MERN wallet app, capturing first name, last name, email, mobile, ID type and number, address, and password, with a responsive layout.

Master the login form for a MERN stack wallet app by configuring email and password fields, styling, and navigation to registration, while organizing API calls for backend integration.

Set up a Node.js back end with Express in a server folder, initialize npm, install essential modules, and configure server.js on port 5000 with routes, models, middleware, and authentication.

Connect Node.js with MongoDB Atlas via the connection URL, configure mongoose in a db config, and handle connection events to ensure the database and users collection are ready.

Builds the user model and authentication APIs for a MERN stack wallet app, including registration, login, password hashing, and JWT-based token authentication.

Integrate backend login and registration endpoints with the front end, set up a proxy, and test authentication using a reusable Axios instance that sends JWT in headers.

Implement authorization in the MERN stack wallet app by decrypting JWT to obtain the user id, storing the token in local storage, and fetching user details via a protected API.

Wrap every page in a protected root that validates the token on refresh and redirects unauthenticated users to login, while a public route redirects logged-in users away from login.

Set up redux toolkit state management with a user slice and a configured store for a wallet app, integrating the React-Redux provider.

Design and style a centered loader spinner with css animation, and manage its visibility using a Redux loader slice (show loading, hide loading) across login, registration, and protected pages.

Build the default wallet layout with a sidebar and body, plus a header showing user info. Apply layout styles and implement a collapsible menu for navigation.

Build a side bar with user and admin menus, icons, and on-click navigation to home, transactions, requests, profile, users control, and logout, with active highlighting and theme styling.

Refine the transactions module by building a reusable page title, enabling transfer and deposit actions, and showing a date, amount, type, reference, and status table with account validation.

Build and test the transfer funds API by modeling transactions with sender and receiver references, validating the recipient, saving the transaction, and updating balances.

Create and integrate a transfer funds modal in a MERN app, implement a verify receiver account flow via API, manage form fields and state, and reload data on success.

Implement transfer funds in a MERN stack wallet app by validating the amount against the sender balance and account verification, gating the submit button, crafting the api payload.

Display a user’s debit and credit transactions by querying both sender and receiver, format dates with moment, and populate sender/receiver for readable names in a frontend table.

Display the logged-in user's basic details on the home page, including account number, balance, and registration details like name, email, and ID information, with clean styling.

Demonstrate a deposit UI flow by opening a modal to enter the amount, integrating Stripe frontend token handling, and outlining a backend deposit funds endpoint for processing payments.

Implement Stripe deposit API in the backend by installing Stripe modules, creating a customer, charging in USD, and recording a deposit transaction that updates the user balance.

Design a request funds module to send requests between users, awaiting recipient approval to credit funds, and build a requests page with sent and received tabs and related api calls.

Implement a request model and endpoint for user-to-user payment requests, including sender and receiver fields, amount, description, and status, then integrate with the UI to send and view requests.

Explore how to display sent and received wallet payment requests by user, filter requests, identify sender and receiver details, and render tables with formatted timestamps.