<prompt> Tengeneza programu kamili ya wavuti kwa kutumia React kwa mandhari ya mbele na Node.jsExpress kwa mandhari ya nyuma. Programu inapaswa kuruhusu watumiaji kuunda, kusoma, kusasisha na kufuta madokezo. Hifadhi madokezo katika hifadhidata ya MongoDB na utumie uthibitishaji kupitia tokeni za JWT ili kulinda miisho ya API.  <response>: Ili kutengeneza programu kamili ya wavuti kwa kutumia React kwa mandhari ya mbele na Node.jsExpress kwa mandhari ya nyuma, fuata hatua hizi:1. Weka muundo wa mradiUnda folda mpya ya mradi wako na uende kwake kwenye terminal. Kisha, unda folda mbili ndani: moja inayoitwa frontend na nyingine inayoitwa backend.mkdir noti programucd noti programumandhari ya mbele ya mkdir2. Weka nyumaNenda kwenye folda ya backend na uanzishe mradi mpya wa Node.js.cd nyumanpm init -ySakinisha utegemezi unaohitajika:npm sakinisha express mongoose cors dotenv jsonwebtoken bcryptjsUnda faili ya index.js ambayo itatumika kama mahali pa kuingilia seva yako ya nyuma.touch index.jsNdani ya index.js, sanidi seva ya msingi ya Express na unganishe kwa MongoDB ukitumia Mongoose: javascriptconst express needexpress;const mongoose needmongoose;const cors needcors;needdotenv.config;const app express;app.useexpress.json;app.usecors;mongoose.connectprocess.env.MONGODB_URI, useNewUrlParser: kweli, useUnifiedTopology: kweli,;const db mongoose.unganisho;db.onkosa, console.error.bindconsole, hitilafu ya muunganisho:;db.mara mojafungua, console.logImeunganishwa kwa MongoDB;;app.sikiliza5000, console.logSeva inayoendesha kwenye bandari 5000;;3. Unda muundo wa Kumbuka na njia za APIKatika folda ya backend, unda folda mpya inayoitwa mifano na ndani yake, unda faili inayoitwa Note.js. Fafanua schema ya mfano wa Kumbuka: javascriptconst mongoose needmongoose;const noteSchema new mongoose.Schema kichwa: aina: Kamba, inahitajika: kweli , maudhui: aina: Kamba, inahitajika: kweli , mtumiaji: aina: mongoose.Schema.Types.ObjectId, ref: Mtumiaji, inahitajika: kweli ,;module.exports mongoose.modelKumbuka, noteSchema;Unda folda mpya inayoitwa njia na ndani yake, unda faili inayoitwa notes.js. Bainisha njia za API za kuunda, kusoma, kusasisha na kufuta madokezo: javascriptconst express needexpress;const router express.Router ;const Note need..modelsNote; Ongeza vifaa vya kati vya uthibitishaji haparouter.get, async req, res jaribu const notes await Note.find mtumiaji: req.user.id ; res.jsonmaelezo; kukamata kukosea res.status500.json ujumbe: err.message ; ;router.post, async req, res const note Note mpya kichwa: req.body.title, maudhui: req.body.content, mtumiaji: req.user.id, ; jaribu const newNote await note.save; res.status201.jsonnewNote; kukamata kukosea res.status400.json ujumbe: err.message ; ;router.patch:id, getNote, async req, res ikiwa req.body.title ! null res.note.title req.body.title; ikiwa req.body.content ! null res.note.content req.body.content; jaribu const updatedNote await res.note.save; res.jsonupdatedNote; kukamata kukosea res.status400.json ujumbe: err.message ; ;router.delete:id, getNote, async req, res jaribu subiri res.note.remove; res.json ujumbe: Dokezo limefutwa; kukamata kukosea res.status500.json ujumbe: err.message ; ;kazi ya async getNotereq, res, next kumbuka; jaribu note await Note.findByIdreq.params.id; ikiwa kumbuka null return res.status404.json ujumbe: Haiwezi kupata dokezo ; kukamata kukosea return res.status500.json ujumbe: err.message ; res.note noti; ijayo ;module.exports kipanga njia;4. Sanidi uthibitishajiUnda folda mpya inayoitwa auth na ndani yake, unda faili inayoitwa middleware.js. Tekeleza programu ya kati ya uthibitishaji wa JWT: javascriptconst jwt hitajijsonwebtoken;kazi authreq, res, next const token req.headerx-auth-token; ikiwa !ishara itarudisha res.status401.tumaUfikiaji umekataliwa. Hakuna tokeni iliyotolewa.; jaribu const decoded jwt.verifytoken, process.env.JWT_SECRET; req.user decoded; ijayo ; kamata mf res.status400.tumaTokeni batili.; module.exports auth;5. Weka sehemu ya mbeleNenda kwenye folda ya frontend na uunde programu mpya ya React kwa kutumia Unda React App:cd ..mbelenpx create-react-app .Sakinisha utegemezi unaohitajika:npm sakinisha axios react-router-dom6. Jenga vipengele vya mbeleUnda vipengele vya kuonyesha madokezo, kuunda madokezo, kusasisha madokezo na kufuta madokezo. Tumia Axios kupiga simu za API kwa seva yako ya nyuma.7. Weka programuTumia sehemu ya mbele kwenye huduma ya upangishaji kama vile Netlify au Vercel, na utumie mandhari ya nyuma kwenye jukwaa kama Heroku. Hakikisha umeweka vibadilishio vya mazingira kwa kamba yako ya unganisho ya MongoDB na siri ya JWT. 