Get your free and exclusive 80-page Banking Passkey Report
react express crud app mysql

रिएक्ट, Node.js, एक्सप्रेस और MySQL CRUD ऐप

यह ट्यूटोरियल आपको सिखाता है कि फ्रंटएंड में रिएक्ट और बैकएंड में एक्सप्रेस का उपयोग करके MySQL डेटाबेस के साथ एक बेसिक CRUD ऐप कैसे बनाया जाए।

Blog-Post-Author

Lukas

Created: June 17, 2025

Updated: July 1, 2025


इस व्यापक ट्यूटोरियल में, आप सीखेंगे कि फ्रंट एंड के लिए React और बैक एंड के लिए Node.js के साथ Express का उपयोग करके एक फुल-स्टैक CRUD (Create, Read, Update, Delete) एप्लिकेशन कैसे बनाया जाए, जो पूरी तरह से MySQL डेटाबेस द्वारा संचालित है। हम उपयोगकर्ता अनुभव को बेहतर बनाने के लिए React Router, Axios, और TailwindCSS जैसी तकनीकों का उपयोग करेंगे।

Debugger Icon

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

1. प्रोजेक्ट का अवलोकन#

हम एक फुल-स्टैक एप्लिकेशन विकसित करेंगे जहाँ उपयोगकर्ता ट्यूटोरियल प्रबंधित कर सकते हैं। प्रत्येक ट्यूटोरियल में निम्नलिखित विशेषताएँ होंगी:

  • ID: अद्वितीय पहचानकर्ता
  • Title: ट्यूटोरियल का नाम
  • Description: विस्तृत जानकारी
  • Published Status: इंगित करता है कि ट्यूटोरियल प्रकाशित है या नहीं

उपयोगकर्ता निम्नलिखित क्रियाएं कर सकते हैं:

  • Create एक नया ट्यूटोरियल
  • Retrieve सभी ट्यूटोरियल या ID द्वारा एक विशिष्ट ट्यूटोरियल
  • Update मौजूदा ट्यूटोरियल
  • Delete ट्यूटोरियल
  • Search शीर्षक द्वारा ट्यूटोरियल
Subreddit Icon

Discuss passkeys news and questions in r/passkey.

Join Subreddit

निम्नलिखित में, आपको कुछ उदाहरण स्क्रीनशॉट मिलेंगे:

1.1 एक नया ट्यूटोरियल जोड़ें#

1.2 सभी ट्यूटोरियल प्रदर्शित करें#

Analyzer Icon

Are your users passkey-ready?

Test Passkey-Readiness

1.3 एक ट्यूटोरियल संपादित करें#

1.4 शीर्षक द्वारा ट्यूटोरियल खोजें#

Substack Icon

Subscribe to our Passkeys Substack for the latest news.

Subscribe

2. आर्किटेक्चर#

एप्लिकेशन क्लाइंट-सर्वर आर्किटेक्चर का अनुसरण करता है:

  • बैकएंड: Node.js के साथ Express, RESTful APIs को संभालता है और Sequelize ORM का उपयोग करके MySQL डेटाबेस के साथ इंटरैक्ट करता है।
  • फ्रंटएंड: React.js HTTP अनुरोधों के लिए Axios के माध्यम से बैकएंड के साथ संचार करता है और नेविगेशन के लिए React Router का उपयोग करता है।

3. बैकएंड कार्यान्वयन#

3.1 Node.js एप्लिकेशन सेटअप करें#

  1. प्रोजेक्ट डायरेक्टरी बनाएं:

    mkdir react-node-express-mysql-crud cd react-node-express-mysql-crud
  2. Node.js ऐप को इनिशियलाइज़ करें:

    npm init -y
  3. डिपेंडेंसी इंस्टॉल करें:

    npm install express sequelize mysql2 cors --save
  4. ESModule सिंटैक्स का उपयोग करें अपनी package.json फ़ाइल में निम्नलिखित पंक्ति जोड़ें:

    { "type": "module" // ... }

3.2 MySQL और Sequelize को कॉन्फ़िगर करें#

  1. कॉन्फ़िगरेशन फ़ाइल बनाएं (app/config/db.config.js):
export default { HOST: "localhost", USER: "root", PASSWORD: "root", DB: "db", PORT: 8081, dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000, }, };
  1. Sequelize को इनिशियलाइज़ करें (app/models/index.js):
import dbConfig from "../config/db.config.js"; import Sequelize from "sequelize"; import Tutorial from "./tutorial.model.js"; const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, { host: dbConfig.HOST, dialect: dbConfig.dialect, pool: dbConfig.pool, port: dbConfig.PORT, }); const db = {}; db.Sequelize = Sequelize; db.sequelize = sequelize; db.tutorials = Tutorial(sequelize, Sequelize); export default db;
  1. ट्यूटोरियल मॉडल को परिभाषित करें (app/models/tutorial.model.js):
export default (sequelize, Sequelize) => { const Tutorial = sequelize.define("tutorial", { title: { type: Sequelize.STRING, }, description: { type: Sequelize.STRING, }, published: { type: Sequelize.BOOLEAN, }, }); return Tutorial; };

यदि आपके पास स्थानीय विकास के लिए MySQL डेटाबेस नहीं है, तो आप एक अस्थायी MySQL कंटेनर बनाने के लिए Docker का उपयोग कर सकते हैं:

docker run --rm -p 3306:3306 \ -e MYSQL_ROOT_PASSWORD=root \ -e MYSQL_DATABASE=db \ mysql:8

3.3 रूट्स और कंट्रोलर्स को परिभाषित करें#

  1. कंट्रोलर बनाएं (app/controllers/tutorial.controller.js):
import db from "../models/index.js"; const Op = db.Sequelize.Op; const Tutorial = db.tutorials; // एक नया ट्यूटोरियल बनाएं और सहेजें export const create = (req, res) => { // अनुरोध को मान्य करें if (!req.body.title) { res.status(400).send({ message: "Content can not be empty!", }); return; } // एक ट्यूटोरियल बनाएं const tutorial = { title: req.body.title, description: req.body.description, published: req.body.published ? req.body.published : false, }; // डेटाबेस में ट्यूटोरियल सहेजें Tutorial.create(tutorial) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while creating the Tutorial.", }); }); }; // सभी ट्यूटोरियल प्राप्त करें export const findAll = (req, res) => { // क्वेरी पैरामीटर के माध्यम से एक फ़िल्टर शर्त की अनुमति दें const title = req.query.title; const condition = title ? { title: { [Op.like]: `%${title}%` } } : null; Tutorial.findAll({ where: condition }) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while retrieving tutorials.", }); }); }; // ID द्वारा एक ट्यूटोरियल खोजें export const findOne = (req, res) => { const id = req.params.id; // प्राइमरी की द्वारा ट्यूटोरियल खोजें Tutorial.findByPk(id) .then((data) => { if (data) { res.send(data); } else { res.status(404).send({ message: `Cannot find Tutorial with id=${id}.`, }); } }) .catch((err) => { res.status(500).send({ message: "Error retrieving Tutorial with id=" + id, }); }); }; // ID द्वारा एक ट्यूटोरियल अपडेट करें export const update = (req, res) => { const id = req.params.id; // निर्दिष्ट ID के साथ ट्यूटोरियल अपडेट करें Tutorial.update(req.body, { where: { id: id }, }) .then((num) => { if (num == 1) { res.send({ message: "Tutorial was updated successfully.", }); } else { res.send({ message: `Cannot update Tutorial with id=${id}. Maybe Tutorial was not found or req.body is empty!`, }); } }) .catch((err) => { res.status(500).send({ message: "Error updating Tutorial with id=" + id, }); }); }; // ID द्वारा एक ट्यूटोरियल हटाएं export const deleteOne = (req, res) => { const id = req.params.id; // निर्दिष्ट ID के साथ ट्यूटोरियल हटाएं Tutorial.destroy({ where: { id: id }, }) .then((num) => { if (num == 1) { res.send({ message: "Tutorial was deleted successfully!", }); } else { res.send({ message: `Cannot delete Tutorial with id=${id}. Maybe Tutorial was not found!`, }); } }) .catch((err) => { res.status(500).send({ message: "Could not delete Tutorial with id=" + id, }); }); }; // सभी ट्यूटोरियल हटाएं export const deleteAll = (req, res) => { // सभी ट्यूटोरियल हटाएं Tutorial.destroy({ where: {}, truncate: false, }) .then((nums) => { res.send({ message: `${nums} Tutorials were deleted successfully!` }); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while removing all tutorials.", }); }); }; // सभी प्रकाशित ट्यूटोरियल खोजें export const findAllPublished = (req, res) => { // published = true के साथ सभी ट्यूटोरियल खोजें Tutorial.findAll({ where: { published: true } }) .then((data) => { res.send(data); }) .catch((err) => { res.status(500).send({ message: err.message || "Some error occurred while retrieving tutorials.", }); }); };
  1. रूट्स सेटअप करें (app/routes/tutorial.routes.js):
import * as tutorials from "../controllers/tutorial.controller.js"; import express from "express"; export default (app) => { let router = express.Router(); // एक नया ट्यूटोरियल बनाएं router.post("/", tutorials.create); // सभी ट्यूटोरियल प्राप्त करें router.get("/", tutorials.findAll); // id के साथ एक ट्यूटोरियल प्राप्त करें router.get("/:id", tutorials.findOne); // id के साथ एक ट्यूटोरियल अपडेट करें router.put("/:id", tutorials.update); // id के साथ एक ट्यूटोरियल हटाएं router.delete("/:id", tutorials.deleteOne); // सभी ट्यूटोरियल हटाएं router.delete("/", tutorials.deleteAll); // सभी प्रकाशित ट्यूटोरियल खोजें router.get("/published", tutorials.findAllPublished); app.use("/api/tutorials", router); };
Demo Icon

Want to try passkeys yourself in a passkeys demo?

Try Passkeys

3.4 सर्वर चलाएं#

  1. सर्वर फ़ाइल बनाएं (server.js):
import express from "express"; import cors from "cors"; import db from "./app/models/index.js"; import tutorialRoutes from "./app/routes/tutorial.routes.js"; const app = express(); const corsOptions = { origin: "http://localhost:5173", }; app.use(cors(corsOptions)); app.use(express.json()); app.use(express.urlencoded({ extended: true })); // सरल रूट app.get("/", (req, res) => { res.json({ message: "Welcome to the Tutorial Application." }); }); // रूट्स tutorialRoutes(app); // डेटाबेस सिंक करें db.sequelize.sync().then(() => { console.log("Synced db."); }); const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); });
  1. सर्वर शुरू करें:
node server.js

आउटपुट:

Server is running on port 8080. Synced db.

4. फ्रंटएंड कार्यान्वयन#

यह आर्किटेक्चर है:

वैकल्पिक रूप से, आप Redux का उपयोग कर सकते हैं:

4.1 फ़ाइल संरचना#

आपकी अंतिम फ़ाइल संरचना इस तरह दिखेगी:

frontend/ ├─ index.html ├─ package.json ├─ postcss.config.js ├─ tailwind.config.js ├─ vite.config.js ├─ src/ │ ├─ App.jsx │ ├─ main.jsx │ ├─ index.css │ ├─ services/ │ │ └─ tutorial.service.js │ └─ pages/ │ ├─ AddTutorial.jsx │ ├─ Tutorial.jsx │ └─ TutorialsList.jsx
Slack Icon

Become part of our Passkeys Community for updates & support.

Join

4.2 React ऐप बनाएं#

Vite का उपयोग करके एक नया React ऐप सेटअप करने के लिए निम्नलिखित कमांड चलाएँ:

npm create vite@latest frontend -- --template react cd frontend npm i npm i react-router-dom axios npm install -D tailwindcss autoprefixer npx tailwindcss init -p

अंत में, कॉन्फ़िगरेशन फ़ाइल tailwind.config.js में टेलविंड कंटेंट विकल्प सेट करें:

/** @type {import('tailwindcss').Config} */ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], };

फिर, src/index.css (Vite ने यह फ़ाइल आपके लिए बनाई है) खोलें और Tailwind डायरेक्टिव्स जोड़ें:

@tailwind base; @tailwind components; @tailwind utilities;

4.3 ऐप लेआउट को इनिशियलाइज़ करें#

App.jsx कंपोनेंट React Router रूट्स को कॉन्फ़िगर करता है और एक बेसिक Tailwind नेवबार सेट करता है। हम इनके बीच नेविगेट करेंगे:

  • /tutorials – ट्यूटोरियल की सूची
  • /add – नया ट्यूटोरियल बनाने के लिए फॉर्म
  • /tutorials/:id – एक ट्यूटोरियल को संपादित करना
import { Routes, Route, Link, BrowserRouter } from "react-router-dom"; import TutorialsList from "./pages/TutorialsList"; import AddTutorial from "./pages/AddTutorial"; import Tutorial from "./pages/Tutorial"; function App() { return ( <BrowserRouter> <div> {/* नेवबार */} <nav className="bg-blue-600 p-4 text-white"> <div className="container mx-auto flex justify-between items-center"> <a href="/tutorials" className="text-lg font-bold"> Corbado </a> <div className="flex space-x-4"> <Link to="/tutorials" className="hover:text-gray-300"> Tutorials </Link> <Link to="/add" className="hover:text-gray-300"> Add </Link> </div> </div> </nav> {/* रूट्स */} <div className="container mx-auto mt-8 px-4"> <Routes> <Route path="/" element={<TutorialsList />} /> <Route path="/tutorials" element={<TutorialsList />} /> <Route path="/add" element={<AddTutorial />} /> <Route path="/tutorials/:id" element={<Tutorial />} /> </Routes> </div> </div> </BrowserRouter> ); } export default App;

4.4 डेटा सर्विस बनाएं#

यह सर्विस हमारे Node/Express बैकएंड (http://localhost:8080/api) पर Axios HTTP अनुरोधों को संभालती है। यदि आपका सर्वर किसी भिन्न पते या पोर्ट पर चलता है तो baseURL को अपडेट करें।

import axios from "axios"; const http = axios.create({ baseURL: "http://localhost:8080/api", headers: { "Content-Type": "application/json", }, }); const getAll = () => { return http.get("/tutorials"); }; const get = (id) => { return http.get(`/tutorials/${id}`); }; const create = (data) => { return http.post("/tutorials", data); }; const update = (id, data) => { return http.put(`/tutorials/${id}`, data); }; const remove = (id) => { return http.delete(`/tutorials/${id}`); }; const removeAll = () => { return http.delete("/tutorials"); }; const findByTitle = (title) => { return http.get(`/tutorials?title=${title}`); }; export default { getAll, get, create, update, remove, removeAll, findByTitle, };

4.5 आइटम कंपोनेंट जोड़ें#

src/pages/AddTutorial.jsx के तहत नए ट्यूटोरियल बनाने के लिए एक कंपोनेंट। यह शीर्षक और विवरण दर्ज करने की अनुमति देता है, और फिर TutorialService.create() को कॉल करता है।

import React, { useState } from "react"; import TutorialService from "../services/tutorial.service"; function AddTutorial() { const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [submitted, setSubmitted] = useState(false); const saveTutorial = () => { const data = { title, description }; TutorialService.create(data) .then((response) => { console.log(response.data); setSubmitted(true); }) .catch((e) => { console.log(e); }); }; const newTutorial = () => { setTitle(""); setDescription(""); setSubmitted(false); }; return ( <div className="max-w-sm mx-auto p-4 bg-white rounded shadow"> {submitted ? ( <div> <h4 className="font-bold text-green-600 mb-4"> Tutorial submitted successfully! </h4> <button className="bg-blue-500 text-white px-3 py-1 rounded" onClick={newTutorial} > Add Another </button> </div> ) : ( <div> <h4 className="font-bold text-xl mb-2">Add Tutorial</h4> <div className="mb-2"> <label className="block mb-1 font-medium">Title</label> <input type="text" className="border border-gray-300 rounded w-full px-2 py-1" value={title} onChange={(e) => setTitle(e.target.value)} /> </div> <div className="mb-2"> <label className="block mb-1 font-medium">Description</label> <input type="text" className="border border-gray-300 rounded w-full px-2 py-1" value={description} onChange={(e) => setDescription(e.target.value)} /> </div> <button className="bg-green-500 text-white px-3 py-1 rounded mt-2" onClick={saveTutorial} > Submit </button> </div> )} </div> ); } export default AddTutorial;
Analyzer Icon

Are your users passkey-ready?

Test Passkey-Readiness

4.6 ट्यूटोरियल सूची कंपोनेंट#

src/pages/TutorialsList.jsx के तहत एक कंपोनेंट जो:

  • ट्यूटोरियल शीर्षक द्वारा फ़िल्टर करने के लिए एक सर्च बार प्रदर्शित करता है
  • बाईं ओर ट्यूटोरियल सूचीबद्ध करता है
  • दाईं ओर चयनित ट्यूटोरियल दिखाता है
  • सभी ट्यूटोरियल हटाने के लिए एक बटन प्रदान करता है
import { useState, useEffect } from "react"; import TutorialService from "../services/tutorial.service"; import { Link } from "react-router-dom"; function TutorialsList() { const [tutorials, setTutorials] = useState([]); const [currentTutorial, setCurrentTutorial] = useState(null); const [currentIndex, setCurrentIndex] = useState(-1); const [searchTitle, setSearchTitle] = useState(""); useEffect(() => { retrieveTutorials(); }, []); const onChangeSearchTitle = (e) => { setSearchTitle(e.target.value); }; const retrieveTutorials = () => { TutorialService.getAll() .then((response) => { setTutorials(response.data); console.log(response.data); }) .catch((e) => { console.log(e); }); }; const refreshList = () => { retrieveTutorials(); setCurrentTutorial(null); setCurrentIndex(-1); }; const setActiveTutorial = (tutorial, index) => { setCurrentTutorial(tutorial); setCurrentIndex(index); }; const removeAllTutorials = () => { TutorialService.removeAll() .then((response) => { console.log(response.data); refreshList(); }) .catch((e) => { console.log(e); }); }; const findByTitle = () => { TutorialService.findByTitle(searchTitle) .then((response) => { setTutorials(response.data); setCurrentTutorial(null); setCurrentIndex(-1); console.log(response.data); }) .catch((e) => { console.log(e); }); }; return ( <div className="flex flex-col lg:flex-row gap-8"> {/* बायां कॉलम: खोज + सूची */} <div className="flex-1"> <div className="flex mb-4"> <input type="text" className="border border-gray-300 rounded-l px-2 py-1 w-full" placeholder="Search by title" value={searchTitle} onChange={onChangeSearchTitle} /> <button className="bg-blue-500 text-white px-4 py-1 rounded-r" onClick={findByTitle} > Search </button> </div> <h4 className="font-bold text-lg mb-2">Tutorials List</h4> <ul className="divide-y divide-gray-200 border border-gray-200 rounded"> {tutorials && tutorials.map((tutorial, index) => ( <li className={ "px-4 py-2 cursor-pointer " + (index === currentIndex ? "bg-blue-100" : "") } onClick={() => setActiveTutorial(tutorial, index)} key={index} > {tutorial.title} </li> ))} </ul> <button className="bg-red-500 text-white px-3 py-1 rounded mt-4" onClick={removeAllTutorials} > Remove All </button> </div> {/* दायां कॉलम: विवरण */} <div className="flex-1"> {currentTutorial ? ( <div className="p-4 bg-white rounded shadow"> <h4 className="font-bold text-xl mb-2">Tutorial</h4> <div className="mb-2"> <strong>Title: </strong> {currentTutorial.title} </div> <div className="mb-2"> <strong>Description: </strong> {currentTutorial.description} </div> <div className="mb-2"> <strong>Status: </strong> {currentTutorial.published ? "Published" : "Pending"} </div> <Link to={`/tutorials/${currentTutorial.id}`} className="inline-block bg-yellow-400 text-black px-3 py-1 rounded" > Edit </Link> </div> ) : ( <div> <p>Please click on a Tutorial...</p> </div> )} </div> </div> ); } export default TutorialsList;
StateOfPasskeys Icon

Want to find out how many people use passkeys?

View Adoption Data

4.7 ट्यूटोरियल कंपोनेंट#

src/pages/Tutorial.jsx के तहत एक फंक्शन कंपोनेंट जो एक ट्यूटोरियल को देखने और संपादित करने के लिए है। यह उपयोग करता है:

  • useParams() URL से :id प्राप्त करने के लिए
  • useNavigate() रीडायरेक्ट करने के लिए
  • TutorialService get, update, और delete संचालन के लिए
import { useState, useEffect } from "react"; import { useParams, useNavigate } from "react-router-dom"; import TutorialService from "../services/tutorial.service"; function Tutorial() { const { id } = useParams(); const navigate = useNavigate(); const [currentTutorial, setCurrentTutorial] = useState({ id: null, title: "", description: "", published: false, }); const [message, setMessage] = useState(""); const getTutorial = (id) => { TutorialService.get(id) .then((response) => { setCurrentTutorial(response.data); console.log(response.data); }) .catch((e) => { console.log(e); }); }; useEffect(() => { if (id) getTutorial(id); }, [id]); const handleInputChange = (event) => { const { name, value } = event.target; setCurrentTutorial({ ...currentTutorial, [name]: value }); }; const updatePublished = (status) => { const data = { ...currentTutorial, published: status, }; TutorialService.update(currentTutorial.id, data) .then((response) => { setCurrentTutorial({ ...currentTutorial, published: status }); console.log(response.data); }) .catch((e) => { console.log(e); }); }; const updateTutorial = () => { TutorialService.update(currentTutorial.id, currentTutorial) .then((response) => { console.log(response.data); setMessage("The tutorial was updated successfully!"); }) .catch((e) => { console.log(e); }); }; const deleteTutorial = () => { TutorialService.remove(currentTutorial.id) .then((response) => { console.log(response.data); navigate("/tutorials"); }) .catch((e) => { console.log(e); }); }; return ( <div> {currentTutorial ? ( <div className="max-w-sm mx-auto p-4 bg-white rounded shadow"> <h4 className="font-bold text-xl mb-2">Edit Tutorial</h4> <div className="mb-2"> <label className="block font-medium" htmlFor="title"> Title </label> <input type="text" className="border border-gray-300 rounded w-full px-2 py-1" id="title" name="title" value={currentTutorial.title} onChange={handleInputChange} /> </div> <div className="mb-2"> <label className="block font-medium" htmlFor="description"> Description </label> <input type="text" className="border border-gray-300 rounded w-full px-2 py-1" id="description" name="description" value={currentTutorial.description} onChange={handleInputChange} /> </div> <div className="mb-2"> <strong>Status:</strong>{" "} {currentTutorial.published ? "Published" : "Pending"} </div> <div className="space-x-2 mt-2"> {currentTutorial.published ? ( <button className="bg-blue-500 text-white px-3 py-1 rounded" onClick={() => updatePublished(false)} > Unpublish </button> ) : ( <button className="bg-blue-500 text-white px-3 py-1 rounded" onClick={() => updatePublished(true)} > Publish </button> )} <button className="bg-red-500 text-white px-3 py-1 rounded" onClick={deleteTutorial} > Delete </button> <button className="bg-green-500 text-white px-3 py-1 rounded" onClick={updateTutorial} > Update </button> </div> {message && <p className="text-green-600 mt-2">{message}</p>} </div> ) : ( <div> <p>Loading tutorial...</p> </div> )} </div> ); } export default Tutorial;
Debugger Icon

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

4.8 एप्लिकेशन चलाएं#

npm run dev

अब आप एप्लिकेशन को http://localhost:5173 पर एक्सेस कर सकते हैं। उस URL को अपने ब्राउज़र में खोलें। अब आप यहां नेविगेट कर सकते हैं:

  • /tutorials – सभी ट्यूटोरियल देखें
  • /add – एक ट्यूटोरियल जोड़ें
  • /tutorials/:id – एक विशिष्ट ट्यूटोरियल संपादित करें

(सुनिश्चित करें कि आपका Node/Express बैक एंड http://localhost:8080 पर चल रहा है या तदनुसार tutorial.service.js में baseURL को अपडेट करें।)

5. निष्कर्ष#

आपने React, Node.js, Express, और MySQL का उपयोग करके सफलतापूर्वक एक फुल-स्टैक CRUD एप्लिकेशन बनाया है। यह प्रोजेक्ट दिखाता है कि Node.js और Express के साथ एक RESTful API कैसे सेट अप करें, Sequelize ORM के साथ डेटा प्रबंधित करें, और React और Bootstrap के साथ एक रिस्पॉन्सिव फ्रंटएंड बनाएं।

हैप्पी कोडिंग और अगले ट्यूटोरियल में मिलते हैं!

Add passkeys to your app in <1 hour with our UI components, SDKs & guides.

Start for free

Share this article


LinkedInTwitterFacebook

Enjoyed this read?

🤝 Join our Passkeys Community

Share passkeys implementation tips and get support to free the world from passwords.

🚀 Subscribe to Substack

Get the latest news, strategies, and insights about passkeys sent straight to your inbox.

Related Articles