Build a Full Stack Banking App using MERN Stack + Next.js 15 | JWT Auth, Virtual ATM Card, FD
In this Banking Application we will learn how to build and deploy Full stack Application using MERN Stack , instead of using React JS we will use Next js with latest version 15.
in this video we implement authentication using jwt token , learn how banks work , how transaction flow, How to create virtual ATM Card , atm pins, how bank pay interest on FD, how to create account with saving and current , how to set account limit and more,
Learn how real banks work — from account creation to secure transactions.
🔴 DEMO:
https://kono-banking-application.verc...
✋ Stay connected:
Instagram: / codewithkrishna___
🧑💻 Source Code :
https://github.com/Krishna-sm/kono-ba...
📖 TABLE OF CONTENT
----------------------
00:00 how we work ??
00:35 intro
02:00 application demo
--------------
10:33 PART- 1
--------------
10:43 setup
10:50 mongodb atlast
12:20 setup Frontend(nextjs) Backend (express)
35:48 Version controlling (github)
37:04 shadcn library
37:55 Headless Ui, React Icons, React Redux
--------------
40:30 PART- 2
--------------
41:00 Authentication (login, register)
49:50 Install Mongodb in vs code
56:00 Express Validator
01:04:01 Bcrypt JS (password hashing)
--------------
01:11:04 PART- 3
--------------
01:11:08 JWT Token Authentication
01:30:26 Register Page (tesing)
01:31:20 Solve Suspress Hydration Error
01:41:16 Register Form with useState
01:46:43 Axios Client
01:49:56 Solve CORS Error
--------------
01:51:49 PART- 4
--------------
01:52:52 Formik And Yup (form Validation)
02:02:30 React Toastify (alerts)
02:06:35 Responsive Login & Register Page
02:10:11 Reuseable Loading Auth Button
02:12:12 clsx (tailwind class merger)
02:19:00 what next ??
--------------
02:19:35 PART- 5
--------------
02:19:40 Protected Routes (template.jsx)
02:22:30 context API (state management)
02:26:10 Fetch User Profile
02:34:10 UiVerse.io (screen loader)
02:38:10 Logout
02:41:35 what next ??
--------------
02:42:13 PART- 6
--------------
02:42:30 User Dashboard
02:42:50 React Sidebar Pro
02:47:12 Redux JS
03:07:00 Dashboard Cards
03:20:50 Next JS Pages (routing)
03:25:00 Amount Page (Account)
03:28:04 Headless UI React Dialog
03:39:10 Validate Add Amount Form
--------------
03:39:13 PART- 7
--------------
03:40:00 Razorpay Integration
04:39:00 Transaction Model
05:19:11 Transaction Page UI
05:35:00 Custom Alert Message
06:05:00 Add Masking (Dashboard Card)
--------------
06:14:09 PART- 8
--------------
06:14:58 fix card button
06:15:55 Amount Fix Deposit (planning)
06:17:18 Fix Deposit UI
06:18:14 Add New FD Modal
06:23:35 FD Card
06:37:22 App Logo
06:40:00 Design Add FD Form
07:07:40 FD Model
07:12:00 Add FD Backend Code
07:39:40 Get All Fix Deposit
--------------
07:53:99 PART- 9
--------------
Other Popular Videos:
► Wedding Planner : • React Wedding Planner
► MongoDB : • How to Create and Connect MongoDB Atlas Da...
► Next JS : • Next Js 14 Complete Full Stack Authentica...
► Redux : • Next.js 14 Tutorial: Learn Redux With Proj...
► Inventory Management System : • React Inventory Management System | Mern S...
► Inventory Management System : • React Inventory Management System | Mern S...
► Installation of Rust : • How to install Rust in Windows | Rust Pro...
► MERN stack : • MERN Tutorial: Complete MERN Stack | Build...
► NEST JS : • Nest JS Complete Tutorial With Projects
► MEVN Stack : • #1 Setup of MEVN Stack | #vue js Project |...
#ReactJS #MERNStack #BankingWebsite #ReactJSProject #BankingApp #SpringBootReactJS #ReactJS #MERNStackProject #ReactJSCrashCourse #ReactProject #ReactJSTutorial #ReactJSCourse #ReactJSBankingApp #OnlineBankingSystem #MERNStackProjects #OnlineBankingApp #SpringBootReactJS #RealEstateReactJS #MERNProject #RealEstateProject #ReactJSDevelopment
check my Website (https://https://codewithkrishna.vercel.app)
i am creating with next js 14 with node js, express js
subscribe my channel