{"id":28347,"date":"2026-08-26T21:17:40","date_gmt":"2026-08-26T21:17:40","guid":{"rendered":"https:\/\/umang.pk\/2026\/08\/26\/next-js-%d8%a7%d9%88%d8%b1-mongodb-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d9%81%d9%84%db%8c%d8%b4-%da%a9%d8%a7%d8%b1%da%88-%d9%84\/"},"modified":"2026-08-26T21:17:43","modified_gmt":"2026-08-26T21:17:43","slug":"next-js-%d8%a7%d9%88%d8%b1-mongodb-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d9%81%d9%84%db%8c%d8%b4-%da%a9%d8%a7%d8%b1%da%88-%d9%84","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/08\/26\/next-js-%d8%a7%d9%88%d8%b1-mongodb-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%d9%81%d9%84%db%8c%d8%b4-%da%a9%d8%a7%d8%b1%da%88-%d9%84\/","title":{"rendered":"Next.js \u0627\u0648\u0631 MongoDB \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0644\u0631\u0646\u0646\u06af \u0627\u06cc\u067e \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u06cc\u06a9 \u0631\u0627\u062a \u067e\u06c1\u0644\u06d2 \u06a9\u0628\u06be\u06cc \u0679\u06cc\u0633\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u06a9\u0631 \u0644\u06af\u0627\u06cc\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u06cc\u0627\u062f \u0631\u06a9\u06be\u0646\u0627 \u06a9\u062a\u0646\u0627 \u0645\u0634\u06a9\u0644 \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0633\u0628 \u0633\u06d2 \u0645\u0648\u062b\u0631 \u0679\u0648\u0644\u0632 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc\u06ba\u06d4 <strong>\u0641\u0639\u0627\u0644 \u06cc\u0627\u062f<\/strong>: \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0646\u0648\u0679\u0633 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0641\u0639\u0627\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u0648 \u06cc\u0627\u062f \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u0637\u0627\u0644\u0639\u0627\u062a \u0633\u06d2 \u067e\u062a\u06c1 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u06a9\u0648 \u0645\u0636\u0628\u0648\u0637 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0627\u06cc\u06a9 \u0641\u0644 \u0627\u0633\u0679\u06cc\u06a9 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u067e \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0637\u0644\u0628\u0627\u0621 \u06a9\u0648 \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/strong> (\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 &#8216;\u062d\u06cc\u0627\u062a\u06cc\u0627\u062a 101&#8217; \u06cc\u0627 &#8216;\u06a9\u06cc\u0644\u06a9\u0648\u0644\u0633&#8217;)<\/p>\n<\/li>\n<li>\n<p><strong>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0633\u0627\u0645\u0646\u06d2 \u0633\u0648\u0627\u0644\u060c \u067e\u06cc\u0686\u06be\u06d2 \u062c\u0648\u0627\u0628<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0637\u0627\u0644\u0639\u06c1<\/strong> \u062f\u0631\u0633\u062a \u06cc\u0627 \u063a\u0644\u0637 \u06a9\u06cc \u0646\u0634\u0627\u0646\u062f\u06c1\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u0648 \u067e\u0644\u0679 \u06a9\u0631<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u067e\u0646\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u0648 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u0648\u06c1 \u06a9\u062a\u0646\u0627 \u0627\u0686\u06be\u0627 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u06cc\u067e \u06c1\u0648\u06af\u06cc \u062c\u0648 MongoDB \u0645\u06cc\u06ba \u0688\u06cc\u0679\u0627 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0686\u0644\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0646 \u0679\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0633\u06cc \u067e\u06cc\u0634\u06af\u06cc \u062a\u062c\u0631\u0628\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u062c\u0628 \u06c1\u0645 \u0633\u0627\u062a\u06be \u0686\u0644\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0645\u06cc\u06ba \u0633\u0628 \u06a9\u0686\u06be \u0628\u062a\u0627\u0624\u06ba \u06af\u0627\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-what-youll-learn\">\u062c\u0648 \u0622\u067e \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4<\/h2>\n<ul>\n<li>\n<p>TypeScript \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 Next.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>MongoDB \u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u062c\u0691\u06cc\u06ba \u0627\u0648\u0631 \u0688\u06cc\u0679\u0627 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0688\u06cc\u0679\u0627 \u0628\u0646\u0627\u0646\u06d2\u060c \u067e\u0691\u06be\u0646\u06d2\u060c \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u062d\u0630\u0641 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 API \u0631\u0648\u0679\u0633 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/p>\n<\/li>\n<li>\n<p>\u0641\u0627\u0631\u0645\u0632\u060c \u0641\u06c1\u0631\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 React UI \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0641\u0644\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0648\u0631 \u067e\u0631\u0648\u06af\u0631\u06cc\u0633 \u0679\u0631\u06cc\u06a9\u0646\u06af \u06a9\u06cc\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-tech-stack-overview\">\u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u0627\u0633\u0679\u06cc\u06a9 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1<\/h2>\n<p>\u06a9\u0648\u0688\u0646\u06af \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06c1\u0645 \u06a9\u06cc\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u06cc\u0648\u06ba\u06d4<\/p>\n<h3 id=\"heading-nextjs\">Next.js<\/h3>\n<p>Next.js \u0648\u06cc\u0628 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u0632 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0631\u0648\u0679\u0646\u06af\u060c \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af\u060c \u0627\u0648\u0631 API \u0631\u0648\u0679\u0633 \u06a9\u0648 \u0628\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0639\u0644\u06cc\u062d\u062f\u06c1 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0627\u0648\u0631 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c Next.js \u0622\u067e \u06a9\u0648 \u0627\u0646 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0627\u06cc\u06a9 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0688\u0627\u0644\u0646\u06d2 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 API \u067e\u0627\u062a\u06be\u060c \u062c\u06cc\u0633\u06d2 <code>\/api\/flashcards<\/code>) \u0648\u06c1 \u0635\u0641\u062d\u0627\u062a \u062c\u0648 \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0648\u06c1 \u0635\u0641\u062d\u0627\u062a \u062c\u0648 UI \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062f\u0648\u0646\u0648\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u06a9\u0648\u0688 \u0628\u06cc\u0633 \u0645\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-mongodb\">\u0645\u0646\u06af\u0648 \u0688\u06cc \u0628\u06cc<\/h3>\n<p>MongoDB \u0627\u06cc\u06a9 NoSQL \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06c1\u06d2 \u062c\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u0648 JSON \u062c\u06cc\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0642\u0637\u0627\u0631\u0648\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0644\u0645\u0648\u06ba \u0648\u0627\u0644\u06cc \u0631\u0648\u0627\u06cc\u062a\u06cc \u062c\u062f\u0648\u0644\u0648\u06ba \u06a9\u06d2 \u0628\u0631\u0639\u06a9\u0633\u060c \u0648\u06c1 \u0644\u0686\u06a9\u062f\u0627\u0631 &quot;\u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a&#8221; \u06a9\u0648 &quot;\u0645\u062c\u0645\u0648\u0639\u0648\u06ba&#8221; \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>MongoDB \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062f\u0648\u0633\u062a\u0627\u0646\u06c1 \u06c1\u06d2\u060c JavaScript\/TypeScript \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u067e\u0627\u0633 \u0641\u0631\u0627\u062e\u062f\u0644\u06cc \u0633\u06d2 \u0645\u0641\u062a \u062f\u0631\u062c\u06d2 (MongoDB Atlas) \u06c1\u06d2 \u06cc\u0627 Docker \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0686\u0644\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-mongoose\">\u0645\u0646\u06af\u0648\u0632<\/h3>\n<p>Mongoose \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 MongoDB \u0627\u0633\u06a9\u06cc\u0645\u0627 \u0627\u0648\u0631 \u0645\u0627\u0688\u0644 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4 \u063a\u0644\u0637\u06cc \u0633\u06d2 \u063a\u0644\u0637 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0628\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u0627\u062e\u062a \u0627\u0648\u0631 \u062a\u0648\u062b\u06cc\u0642 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0646\u06af\u0648\u0632 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0622\u067e \u062e\u0627\u0645 MongoDB \u0633\u0648\u0627\u0644\u0627\u062a \u0644\u06a9\u06be \u0631\u06c1\u06d2 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 \u0645\u0646\u06af\u0648\u0632 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 &quot;\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688&#8221; \u0645\u0627\u0688\u0644 \u06a9\u06cc \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0637\u0631\u062d \u06a9\u0627 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u0637\u0631\u06cc\u0642\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2: <code>Flashcard.create()<\/code> \u06cc\u0627 <code>Flashcard.find()<\/code>.<\/p>\n<h3 id=\"heading-tailwind-css\">\u0679\u06cc\u0644 \u0648\u0646\u0688 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633<\/h3>\n<p>Tailwind \u0627\u06cc\u06a9 \u0627\u0641\u0627\u062f\u06cc\u062a \u06a9\u0627 \u067e\u06c1\u0644\u0627 CSS \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u06c1\u06d2\u06d4 \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u0633 \u0637\u0631\u062d \u06a9\u06cc \u06a9\u0644\u0627\u0633 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba: <code>rounded-xl<\/code> \u06cc\u0627 <code>bg-blue-500<\/code> \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a HTML \u0633\u06d2\u06d4<\/p>\n<p>\u0679\u06cc\u0644 \u0648\u0646\u0688 \u0627\u0633\u0679\u0627\u0626\u0644\u0646\u06af \u06a9\u0648 \u062a\u06cc\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 Next.js \u0628\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0627\u0633 \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-project-setup\">\u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a<\/h2>\n<h3 id=\"heading-step-1-create-the-nextjs-project\">\u0645\u0631\u062d\u0644\u06c1 1: \u0627\u06cc\u06a9 Next.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0679\u0631\u0645\u06cc\u0646\u0644 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">npx create-next-app@latest flash-cards --typescript --tailwind --eslint --app --src-dir --import-alias \"@\/*\" --use-npm\n<\/code><\/pre>\n<p>\u062c\u0628 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0627\u06af\u0644\u0627 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<ul>\n<li>\n<p>\u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679: <strong>\u06c1\u0627\u06ba<\/strong><\/p>\n<\/li>\n<li>\n<p>ESL \u0644\u0646\u0679: <strong>\u06c1\u0627\u06ba<\/strong><\/p>\n<\/li>\n<li>\n<p>Tailwind CSS: <strong>\u06c1\u0627\u06ba<\/strong><\/p>\n<\/li>\n<li>\n<p><code>src\/<\/code>    \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc: <strong>\u06c1\u0627\u06ba<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u067e \u0631\u0627\u0624\u0679\u0631: <strong>\u06c1\u0627\u06ba<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0639\u0631\u0641 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba: <strong>@\/<\/strong>*<\/p>\n<\/li>\n<\/ul>\n<p>\u06cc\u06c1 \u0627\u0633 \u0637\u0631\u062d \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0641\u0648\u0644\u0688\u0631 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0627: <code>flash-cards<\/code> \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 Next.js \u0627\u06cc\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-step-2-install-mongoose\">\u0645\u0631\u062d\u0644\u06c1 2: \u0645\u0646\u06af\u0648\u0632 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0645\u0646\u06af\u0648\u0632 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0634\u0627\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc \u06a9\u0645\u0627\u0646\u0688 \u06a9\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">cd flash-cards\nnpm install mongoose\n<\/code><\/pre>\n<h3 id=\"heading-step-3-set-up-mongodb\">\u0645\u0631\u062d\u0644\u06c1 3: MongoDB \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u062f\u0648 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06c1\u06cc\u06ba:<\/p>\n<h4 id=\"heading-option-a-docker-recommended-for-local-development\">\u0627\u062e\u062a\u06cc\u0627\u0631 A: \u0688\u0627\u06a9\u0631 (\u0645\u0642\u0627\u0645\u06cc \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062f\u06c1)<\/h4>\n<p>\u0646\u0627\u0645\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba <code>docker-compose.yml<\/code> \u0645\u0646\u0635\u0648\u0628\u06d2 \u06a9\u06cc \u062c\u0691 \u0645\u06cc\u06ba:<\/p>\n<pre><code class=\"language-yaml\">services:\n  mongodb:\n    image: mongo:7\n    container_name: flashstudy-mongodb\n    ports:\n      - \"27017:27017\"\n    volumes:\n      - mongodb_data:\/data\/db\n\nvolumes:\n  mongodb_data:\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">docker compose up -d\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u067e\u0633 \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba MongoDB \u0634\u0631\u0648\u0639 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0688\u06cc\u0679\u0627 \u0688\u0648\u06a9\u0631 \u0648\u0627\u0644\u06cc\u0648\u0645 \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06c1\u062a\u0627 \u06c1\u06d2 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06a9\u0648 \u0631\u0648\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h4 id=\"heading-option-b-mongodb-atlas-cloud\">\u0622\u067e\u0634\u0646 B: MongoDB Atlas (Cloud)<\/h4>\n<ol>\n<li>\n<p>mongodb.com\/cloud\/atlas \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9 \u0645\u0641\u062a \u0627\u06a9\u0627\u0624\u0646\u0679 \u0627\u0648\u0631 \u06a9\u0644\u0633\u0679\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9 \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u0635\u0627\u0631\u0641 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0646\u06a9\u0634\u0646 \u0633\u0679\u0631\u0646\u06af \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u067e\u0646\u06d2 IP \u06a9\u0648 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n<h3 id=\"heading-step-4-create-the-environment-file\">\u0645\u0631\u062d\u0644\u06c1 4: \u0645\u0627\u062d\u0648\u0644 \u06a9\u06cc \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>.env.local<\/code> \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062c\u0691 \u0633\u06d2 (\u0627\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u062d\u0641\u0627\u0638\u062a\u06cc \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06cc \u0628\u0646\u0627\u0621 \u067e\u0631 \u06af\u0679 \u0646\u06d2 \u0646\u0638\u0631\u0627\u0646\u062f\u0627\u0632 \u06a9\u06cc\u0627 \u06c1\u06d2):<\/p>\n<pre><code class=\"language-env\">MONGODB_URI=mongodb:\/\/localhost:27017\/flashcards\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0622\u067e Atlas \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0633\u06d2 \u0627\u067e\u0646\u06cc \u06a9\u0646\u06a9\u0634\u0646 \u0633\u0679\u0631\u0646\u06af \u0633\u06d2 \u0628\u062f\u0644 \u062f\u06cc\u06ba\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631:<\/p>\n<pre><code class=\"language-env\">MONGODB_URI=mongodb+srv:\/\/username:password@cluster.mongodb.net\/flashcards?retryWrites=true&w=majority\n<\/code><\/pre>\n<h3 id=\"heading-step-5-understand-the-folder-structure\">\u0645\u0631\u062d\u0644\u06c1 5: \u0641\u0648\u0644\u0688\u0631 \u06a9\u06cc \u0633\u0627\u062e\u062a \u06a9\u0648 \u0633\u0645\u062c\u06be\u06cc\u06ba\u06d4<\/h3>\n<p>\u0633\u06cc\u0679 \u0627\u067e \u06a9\u06d2 \u0628\u0639\u062f\u060c \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0627\u0633 \u0637\u0631\u062d \u0644\u06af\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-plaintext\">flash-cards\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 app\/              # Pages and API routes\n\u2502   \u2502   \u251c\u2500\u2500 api\/          # Backend API endpoints\n\u2502   \u2502   \u251c\u2500\u2500 subjects\/     # Subject list and detail pages\n\u2502   \u2502   \u251c\u2500\u2500 study\/        # Study mode page\n\u2502   \u2502   \u2514\u2500\u2500 progress\/     # Progress tracking page\n\u2502   \u251c\u2500\u2500 components\/       # Reusable UI components\n\u2502   \u2514\u2500\u2500 lib\/              # Utilities and database code\n\u2502       \u251c\u2500\u2500 db.ts         # MongoDB connection\n\u2502       \u2514\u2500\u2500 models\/       # Mongoose schemas\n\u251c\u2500\u2500 .env.local            # Environment variables (you create this)\n\u251c\u2500\u2500 docker-compose.yml    # Docker config for MongoDB\n\u2514\u2500\u2500 package.json\n<\/code><\/pre>\n<p>\u06a9\u06c1 <code>app<\/code> \u0641\u0648\u0644\u0688\u0631 Next.js \u0627\u06cc\u067e \u0631\u0627\u0624\u0679\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0641\u0648\u0644\u0688\u0631 \u06c1\u06d2\u06d4 <code>page.tsx<\/code> (UI) \u0627\u0648\u0631 <code>route.ts<\/code> (API \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u0646\u0642\u0637\u06c1)\u06d4 \u06c1\u0645 \u0642\u062f\u0645 \u0628\u06c1 \u0642\u062f\u0645 \u0627\u0633 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-building-the-features\">\u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h2>\n<h3 id=\"heading-part-1-connecting-to-mongodb\">\u062d\u0635\u06c1 1: MongoDB \u0633\u06d2 \u062c\u0691\u0646\u0627<\/h3>\n<p>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 MongoDB \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<p>\u06c1\u0645 \u0627\u0633 \u06a9\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u0627 \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u0686\u0648\u0646\u06a9\u06c1 Next.js \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0645\u062a\u0639\u062f\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0627\u0688\u06cc\u0648\u0644\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u06cc\u06ba \u06c1\u0631 \u0628\u0627\u0631 API \u0631\u0648\u0679 \u0686\u0644\u0646\u06d2 \u067e\u0631 \u0627\u06cc\u06a9 \u0646\u06cc\u0627 MongoDB \u06a9\u0646\u06a9\u0634\u0646 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u0627\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u06cc\u06c1 \u06a9\u0646\u06a9\u0634\u0646 \u06a9\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062c\u0628 \u0628\u06be\u06cc \u0645\u0645\u06a9\u0646 \u06c1\u0648 \u0627\u0646\u06c1\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u06c1\u0644\u06d2 <code>db.ts<\/code> \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0627\u0646\u062f\u0631 <code>src\/lib<\/code> \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc<\/p>\n<pre><code class=\"language-typescript\">import mongoose from \"mongoose\";\n\nconst MONGODB_URI = process.env.MONGODB_URI || \"mongodb:\/\/localhost:27017\/flashcards\";\n\ninterface MongooseCache {\n  conn: typeof mongoose | null;\n  promise: Promise<typeof mongoose=\"\"> | null;\n}\n\ndeclare global {\n  var mongoose: MongooseCache | undefined;\n}\n\nlet cached: MongooseCache = global.mongoose || { conn: null, promise: null };\n\nif (!global.mongoose) {\n  global.mongoose = cached;\n}\n\nasync function dbConnect(): Promise<typeof mongoose=\"\"> {\n  if (cached.conn) return cached.conn;\n\n  if (!cached.promise) {\n    cached.promise = mongoose.connect(MONGODB_URI, {\n      bufferCommands: false,\n    });\n  }\n\n  cached.conn = await cached.promise;\n  return cached.conn;\n}\n\nexport default dbConnect;\n<\/typeof><\/typeof><\/code><\/pre>\n<p>\u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u0633 \u06a9\u0648\u0688 \u06a9\u06cc \u0644\u0627\u0626\u0646 \u0628\u06c1 \u0644\u0627\u0626\u0646 \u0648\u0636\u0627\u062d\u062a \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><code>MONGODB_URI<\/code>: \u06a9\u0646\u06a9\u0634\u0646 \u0633\u0679\u0631\u0646\u06af \u067e\u0691\u06be\u06cc\u06ba\u06d4 <code>.env.local<\/code>. \u0627\u06af\u0631 \u0633\u06cc\u0679 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u0648 \u06cc\u06c1 \u0648\u0627\u067e\u0633 \u0645\u0642\u0627\u0645\u06cc MongoDB \u067e\u0631 \u0622 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p><code>MongooseCache<\/code>: \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u062c\u0648 \u06a9\u06cc\u0634\u06d2 \u06a9\u0648 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: \u06a9\u0646\u06a9\u0634\u0646(<code>conn<\/code>) \u06cc\u0627 \u0627\u06cc\u06a9 \u0648\u0639\u062f\u06c1 \u062c\u0648 \u0622\u062e\u0631 \u06a9\u0627\u0631 \u06c1\u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p><code>global.mongoose<\/code>: Next.js \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0645\u0627\u0688\u06cc\u0648\u0644\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>global<\/code> \u0688\u067e\u0644\u06cc\u06a9\u06cc\u0679 \u06a9\u0646\u06a9\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u0628\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u06a9\u06cc\u0634\u06d2 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>dbConnect()<\/code>: \u0627\u06af\u0631 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u062c\u0691\u0627 \u06c1\u0648\u0627 \u06c1\u0648 \u062a\u0648 \u0644\u0648\u0679\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0646\u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u06a9 \u0628\u0646\u0627\u0626\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u06a9\u06cc\u0634 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0648\u0627\u067e\u0633 \u06a9\u0631\u06cc\u06ba\u06d4 \u062a\u0645\u0627\u0645 API \u0631\u0648\u0679\u0633 \u06a9\u0648 \u0628\u0644\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>await dbConnect()<\/code> \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06a9\u0648 \u0686\u06be\u0648\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-part-2-defining-the-data-models\">\u062d\u0635\u06c1 2: \u0688\u06cc\u0679\u0627 \u0645\u0627\u0688\u0644 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a<\/h3>\n<p>\u0627\u0628 \u062c\u0628 \u06a9\u06c1 \u06c1\u0645 \u0627\u067e\u0646\u06cc \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0648 MongoDB \u0633\u06d2 \u062c\u0648\u0691 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0622\u0626\u06cc\u06d2 \u0627\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba \u062c\u0633\u06d2 \u06c1\u0645 \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u0645\u06cc\u06ba \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u067e\u0633 \u06a9\u0648 \u062a\u06cc\u0646 \u0642\u0633\u0645 \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p><strong>\u0645\u0636\u0627\u0645\u06cc\u0646<\/strong>: \u06cc\u06c1 \u062d\u06cc\u0627\u062a\u06cc\u0627\u062a 101 \u06cc\u0627 \u06a9\u06cc\u0644\u06a9\u0648\u0644\u0633 \u06a9\u06cc \u0637\u0631\u062d \u0627\u06cc\u06a9 \u0632\u0645\u0631\u06c1 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688<\/strong>: \u0645\u0648\u0636\u0648\u0639 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0633\u0648\u0627\u0644\u0627\u062a \u0627\u0648\u0631 \u062c\u0648\u0627\u0628\u0627\u062a\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u0631\u0642\u06cc<\/strong>: \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0635\u0627\u0631\u0641 \u0646\u06d2 \u06a9\u062a\u0646\u06cc \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u06cc\u0627\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u06c1\u0645 \u06c1\u0631 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u06cc \u0633\u0627\u062e\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0646\u06af\u0648\u0632 \u0633\u06a9\u06cc\u0645\u0627 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0627\u0633\u06a9\u06cc\u0645\u0627 \u0627\u0646 \u0641\u06cc\u0644\u0688\u0632 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u06cc\u06a9 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u0648 \u06c1\u0631 \u0641\u06cc\u0644\u0688 \u0645\u06cc\u06ba \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<p>\u0622\u0626\u06cc\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>Subject<\/code> \u0645\u0627\u0688\u0644<\/p>\n<h4 id=\"heading-subject-model\">\u0645\u0648\u0636\u0648\u0639 \u0645\u0627\u0688\u0644<\/h4>\n<p>\u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u0632\u0645\u0631\u0648\u06ba \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u06cc\u06a9 \u0637\u0627\u0644\u0628 \u0639\u0644\u0645 \u0627\u0633 \u0637\u0631\u062d \u06a9\u0627 \u0645\u0648\u0636\u0648\u0639 \u0628\u0646\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2: <strong>\u062d\u06cc\u0627\u062a\u06cc\u0627\u062a 101<\/strong> \u0627\u067e\u0646\u06d2 \u0628\u06cc\u0627\u0644\u0648\u062c\u06cc \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u06c1\u0631 \u0645\u0648\u0636\u0648\u0639 \u06a9\u0627 \u0627\u06cc\u06a9 \u0646\u0627\u0645\u060c \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062a\u0641\u0635\u06cc\u0644\u060c \u0627\u0648\u0631 UI \u0645\u06cc\u06ba \u0645\u0648\u0636\u0648\u0639 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0631\u0646\u06af \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u06c1\u0644\u06d2 <code>models<\/code> \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc <code>src\/lib<\/code> \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u067e\u06be\u0631 <code>Subject.ts<\/code> \u0627\u0633 \u0645\u06cc\u06ba<\/p>\n<pre><code class=\"language-typescript\">import mongoose, { Schema, model, models } from \"mongoose\";\n\nexport interface ISubject {\n  _id: string;\n  name: string;\n  description?: string;\n  color: string;\n  createdAt: Date;\n  updatedAt: Date;\n}\n\nconst SubjectSchema = new Schema(\n  {\n    name: { type: String, required: true },\n    description: { type: String },\n    color: { type: String, default: \"#6366f1\" },\n  },\n  { timestamps: true }\n);\n\nexport default models.Subject || model<isubject>(\"Subject\", SubjectSchema);\n<\/isubject><\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>ISubject<\/code>: \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633\u06d4 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u0645\u06cc\u06ba \u0633\u0628\u062c\u06cc\u06a9\u0679 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>SubjectSchema<\/code>    &#8211; \u0645\u0646\u06af\u0648\u0632 \u0633\u06a9\u06cc\u0645\u0627\u06d4 <code>name<\/code> \u0627\u06af\u0631\u0686\u06c1 \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c <code>description<\/code> \u0627\u0648\u0631 <code>color<\/code> \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc <code>color<\/code> \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u062c\u0627\u0645\u0646\u06cc \u06c1\u06cc\u06a9\u0633\u0627\u0688\u06cc\u0633\u06cc\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>timestamps: true<\/code>: \u0645\u0646\u06af\u0648\u0632 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>createdAt<\/code> \u0627\u0648\u0631 <code>updatedAt<\/code> \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u067e\u0631\u06d4<\/p>\n<\/li>\n<li>\n<p><code>models.Subject || model(...)<\/code>: \u0645\u0627\u0688\u06cc\u0648\u0644\u0632 \u06a9\u0648 \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u0637\u0631\u062d\u060c \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0645\u0627\u0688\u0644 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 &quot;\u0645\u0627\u0688\u0644 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1&#8221; \u063a\u0644\u0637\u06cc\u0648\u06ba \u0633\u06d2 \u0628\u0686 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"heading-flashcard-model\">\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0645\u0627\u0688\u0644<\/h4>\n<p>\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0627\u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u0633\u06d2 \u062a\u0639\u0644\u0642 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u06d2 \u0633\u0627\u0645\u0646\u06d2 \u0633\u0648\u0627\u0644\u0627\u062a \u0627\u0648\u0631 \u067e\u06cc\u0686\u06be\u06d2 \u062c\u0648\u0627\u0628\u0627\u062a \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627 <code>Flashcard<\/code> \u0645\u0627\u0688\u0644 \u0627\u0646\u062f\u0631 <code>src\/lib\/models<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>Flashcard.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import mongoose, { Schema, model, models } from \"mongoose\";\n\nexport interface IFlashcard {\n  _id: string;\n  subjectId: string;\n  front: string;\n  back: string;\n  createdAt: Date;\n  updatedAt: Date;\n}\n\nconst FlashcardSchema = new Schema(\n  {\n    subjectId: { type: Schema.Types.ObjectId, ref: \"Subject\", required: true },\n    front: { type: String, required: true },\n    back: { type: String, required: true },\n  },\n  { timestamps: true }\n);\n\nexport default models.Flashcard || model<iflashcard>(\"Flashcard\", FlashcardSchema);\n<\/iflashcard><\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>subjectId<\/code>: \u0627\u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639 \u0633\u06d2 \u0645\u0631\u0627\u062f. <code>_id<\/code>. <code>ref: \"Subject\"<\/code> \u0645\u0646\u06af\u0648\u0632 \u06a9\u0648 \u0627\u0633 \u0641\u06cc\u0644\u0688 \u06a9\u0648 \u0622\u0628\u0627\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 (\u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a ID \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0645\u0648\u0636\u0648\u0639 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627)\u06d4<\/p>\n<\/li>\n<li>\n<p><code>front<\/code>    \u0627\u0648\u0631 <code>back<\/code>: \u0633\u0648\u0627\u0644 \u0648 \u062c\u0648\u0627\u0628 \u06a9\u0627 \u0645\u062a\u0646\u06d4<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"heading-progress-model\">\u062a\u0631\u0642\u06cc \u0645\u0627\u0688\u0644<\/h4>\n<p>\u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0646\u06c1\u06cc\u06ba \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0627\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u06c1\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u067e\u0631 \u0635\u062d\u06cc\u062d \u062c\u0648\u0627\u0628 \u062f\u06cc\u0627 \u06cc\u0627 \u063a\u0644\u0637\u06d4 \u06c1\u0645 \u0627\u0633 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688 \u067e\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627 <code>Progress<\/code> \u0645\u0627\u0688\u0644 \u0627\u0646\u062f\u0631 <code>src\/lib\/models<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>Progress.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import mongoose, { Schema, model, models } from \"mongoose\";\n\nexport interface IProgress {\n  _id: string;\n  flashcardId: string;\n  subjectId: string;\n  correct: boolean;\n  reviewedAt: Date;\n}\n\nconst ProgressSchema = new Schema(\n  {\n    flashcardId: { type: Schema.Types.ObjectId, ref: \"Flashcard\", required: true },\n    subjectId: { type: Schema.Types.ObjectId, ref: \"Subject\", required: true },\n    correct: { type: Boolean, required: true },\n    reviewedAt: { type: Date, default: Date.now },\n  },\n  { timestamps: true }\n);\n\nexport default models.Progress || model<iprogress>(\"Progress\", ProgressSchema);\n<\/iprogress><\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>correct<\/code>: <code>true<\/code> \u0627\u06af\u0631 \u0635\u0627\u0631\u0641 \u062c\u0648\u0627\u0628 \u062c\u0627\u0646\u062a\u0627 \u06c1\u06d2\u06d4 <code>false<\/code> \u0627\u06af\u0631 \u0646\u06c1\u06cc\u06ba.<\/p>\n<\/li>\n<li>\n<p><code>reviewedAt<\/code>: \u0648\u06c1 \u0648\u0642\u062a \u062c\u0628 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0627 \u06af\u06cc\u0627\u06d4 \u06c1\u0645 \u0627\u0633\u06d2 \u0645\u0633\u062a\u0642\u0628\u0644 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u062c\u06cc\u0633\u06d2 \u0686\u06be\u0627\u0646\u0679\u0646\u0627 \u0627\u0648\u0631 \u0648\u0642\u0641\u06c1 \u062f\u06c1\u0631\u0627\u0646\u0627\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-subjects-api-list-and-create\">\u0679\u0627\u067e\u06a9 API &#8211; \u0641\u06c1\u0631\u0633\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0627\u0628 \u062c\u0628 \u06a9\u06c1 \u06c1\u0645 \u0646\u06d2 \u0627\u067e\u0646\u06d2 \u0688\u06cc\u0679\u0627 \u0645\u0627\u0688\u0644 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631 \u062f\u06cc \u06c1\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 API \u0631\u0648\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u06c1\u0645\u0627\u0631\u06cc \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u06a9\u0648 \u0627\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>API \u0631\u0648\u0679 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0633\u06d2 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 MongoDB \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u0633\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0639\u0646\u0648\u0627\u0646\u0627\u062a \u0627\u0648\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0628\u0646\u0627\u0646\u06d2 \u0627\u0648\u0631 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0622\u0626\u06cc\u06d2 \u0679\u0627\u067e\u06a9 API \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u062f\u0648 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u06cc \u062d\u0645\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<p>\u0627\u0646\u062f\u0631 <code>src\/app\/api\/subjects<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>route.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { NextResponse } from \"next\/server\";\nimport dbConnect from \"@\/lib\/db\";\nimport Subject from \"@\/lib\/models\/Subject\";\n\nexport async function GET() {\n  try {\n    await dbConnect();\n    const subjects = await Subject.find({}).sort({ createdAt: -1 });\n    return NextResponse.json(subjects);\n  } catch (error) {\n    console.error(\"Error fetching subjects:\", error);\n    return NextResponse.json(\n      { error: \"Failed to fetch subjects\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function POST(request: Request) {\n  try {\n    await dbConnect();\n    const body = await request.json();\n    const { name, description, color } = body;\n\n    if (!name) {\n      return NextResponse.json(\n        { error: \"Subject name is required\" },\n        { status: 400 }\n      );\n    }\n\n    const subject = await Subject.create({\n      name,\n      description: description || \"\",\n      color: color || \"#6366f1\",\n    });\n\n    return NextResponse.json(subject);\n  } catch (error) {\n    console.error(\"Error creating subject:\", error);\n    return NextResponse.json(\n      { error: \"Failed to create subject\" },\n      { status: 500 }\n    );\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>GET<\/code>: \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u0628 \u0633\u06d2 \u062d\u0627\u0644\u06cc\u06c1 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u062a\u0645\u0627\u0645 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4 <code>find({})<\/code> \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 &quot;\u0633\u0628 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba&#8221;\u06d4 JSON \u06a9\u06d2 \u0628\u0637\u0648\u0631 \u0644\u0648\u0679\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>POST<\/code>: \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0645\u0648\u0636\u0648\u0639 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 \u067e\u0691\u06be\u06cc\u06ba <code>name<\/code>, <code>description<\/code>\u0627\u0648\u0631 <code>color<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u062c\u0633\u0645 \u0645\u06cc\u06ba\u06d4 \u06c1\u0645 \u0627\u0633 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>name<\/code> \u06cc\u06c1 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>Subject.create()<\/code> \u0627\u0633\u06d2 MongoDB \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631\u062f\u06c1 \u0645\u0648\u0636\u0648\u0639 \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>status: 400<\/code>: \u063a\u0644\u0637 \u062f\u0631\u062e\u0648\u0627\u0633\u062a (\u0644\u0627\u067e\u062a\u06c1 \u0688\u06cc\u0679\u0627)\u06d4 <code>status: 500<\/code>: \u0633\u0631\u0648\u0631 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc (\u062c\u06cc\u0633\u06d2 \u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc)\u06d4<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"heading-flashcards-api-list-and-create\">Flashcards API &#8211; \u0641\u06c1\u0631\u0633\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h4>\n<p>\u0627\u06af\u0644\u0627\u060c \u0622\u0626\u06cc\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 API \u0631\u0648\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u0622\u067e \u06a9\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0646\u0626\u06d2 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646\u062f\u0631 <code>src\/app\/api\/flashcards<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>route.ts<\/code> \u0627\u06cc\u06a9 \u06a9\u0648\u0688 \u0628\u0644\u0627\u06a9 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { NextResponse } from \"next\/server\";\nimport dbConnect from \"@\/lib\/db\";\nimport Flashcard from \"@\/lib\/models\/Flashcard\";\n\nexport async function GET(request: Request) {\n  try {\n    await dbConnect();\n    const { searchParams } = new URL(request.url);\n    const subjectId = searchParams.get(\"subjectId\");\n\n    const query = subjectId ? { subjectId } : {};\n    const flashcards = await Flashcard.find(query)\n      .populate(\"subjectId\", \"name color\")\n      .sort({ createdAt: -1 });\n\n    return NextResponse.json(flashcards);\n  } catch (error) {\n    console.error(\"Error fetching flashcards:\", error);\n    return NextResponse.json(\n      { error: \"Failed to fetch flashcards\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function POST(request: Request) {\n  try {\n    await dbConnect();\n    const body = await request.json();\n    const { subjectId, front, back } = body;\n\n    if (!subjectId || !front || !back) {\n      return NextResponse.json(\n        { error: \"Subject, front, and back are required\" },\n        { status: 400 }\n      );\n    }\n\n    const flashcard = await Flashcard.create({\n      subjectId,\n      front,\n      back,\n    });\n\n    const populated = await Flashcard.findById(flashcard._id).populate(\n      \"subjectId\",\n      \"name color\"\n    );\n\n    return NextResponse.json(populated);\n  } catch (error) {\n    console.error(\"Error creating flashcard:\", error);\n    return NextResponse.json(\n      { error: \"Failed to create flashcard\" },\n      { status: 500 }\n    );\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>searchParams.get(\"subjectId\")<\/code>: \u06a9\u06d2 \u0644\u06cc\u06d2 <code>GET \/api\/flashcards?subjectId=abc123<\/code>\u0645\u0648\u0636\u0648\u0639 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0641\u0644\u0679\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0646\u06c1\u06cc\u06ba <code>subjectId<\/code>\u062a\u0645\u0627\u0645 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>.populate(\"subjectId\", \"name color\")<\/code>: \u062e\u0627\u0645 \u0622\u0626\u06cc \u0688\u06cc \u06a9\u0648 \u0645\u0648\u0636\u0648\u0639 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0633\u06d2 \u0628\u062f\u0644\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0635\u0631\u0641 \u0627\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>name<\/code> \u0627\u0648\u0631 <code>color<\/code>. \u0622\u067e \u0627\u067e\u0646\u06d2 UI \u0645\u06cc\u06ba \u0645\u0636\u0627\u0645\u06cc\u0646 \u06a9\u06d2 \u0646\u0627\u0645 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0688\u0633\u067e\u0644\u06d2 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><code>POST<\/code>:\u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 <code>subjectId<\/code>, <code>front<\/code>\u0627\u0648\u0631 <code>back<\/code>. \u062a\u062e\u0644\u06cc\u0642 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba: <code>populate<\/code> \u0644\u06c1\u0630\u0627\u060c \u062c\u0648\u0627\u0628 \u0645\u06cc\u06ba \u0645\u0636\u0645\u0648\u0646 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-part-4-editing-and-deleting-dynamic-api-routes\">\u062d\u0635\u06c1 4: \u062a\u0631\u0645\u06cc\u0645 \u0627\u0648\u0631 \u062d\u0630\u0641 \u06a9\u0631\u06cc\u06ba (\u0645\u062a\u062d\u0631\u06a9 API \u067e\u0627\u062a\u06be)<\/h3>\n<p>\u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0645\u0636\u0627\u0645\u06cc\u0646 \u0627\u0648\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <strong>\u0645\u062a\u062d\u0631\u06a9 \u0631\u0627\u0633\u062a\u06c1<\/strong>. Next.js \u0645\u06cc\u06ba <code>[id]<\/code> \u0641\u0648\u0644\u0688\u0631 \u06a9\u06d2 \u0646\u0627\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0631\u0627\u0633\u062a\u06c1 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0648 \u062f\u06cc\u06af\u0631 IDs \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 <code>\/api\/subjects\/123<\/code> \u0627\u0648\u0631 <code>\/api\/subjects\/456<\/code> \u0622\u067e \u0648\u06c1\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0627\u062e\u062a\u06cc\u0627\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h4 id=\"heading-subject-api-route\">\u0679\u0627\u067e\u06a9 API \u067e\u0627\u062a\u06be<\/h4>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0639\u0646\u0648\u0627\u0646\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062a\u062d\u0631\u06a9 \u0631\u0627\u0633\u062a\u06d2 \u0628\u0646\u0627 \u06a9\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u0622\u067e \u06a9\u0648 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u06a9\u0648 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u06d2\u060c \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646\u062f\u0631 <code>src\/app\/api\/subjects\/[id]<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>route.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { NextResponse } from \"next\/server\";\nimport dbConnect from \"@\/lib\/db\";\nimport Subject from \"@\/lib\/models\/Subject\";\nimport Flashcard from \"@\/lib\/models\/Flashcard\";\nimport Progress from \"@\/lib\/models\/Progress\";\n\nexport async function GET(\n  _request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n    const subject = await Subject.findById(id);\n\n    if (!subject) {\n      return NextResponse.json({ error: \"Subject not found\" }, { status: 404 });\n    }\n\n    return NextResponse.json(subject);\n  } catch (error) {\n    console.error(\"Error fetching subject:\", error);\n    return NextResponse.json(\n      { error: \"Failed to fetch subject\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function PUT(\n  request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n    const body = await request.json();\n    const { name, description, color } = body;\n\n    const subject = await Subject.findByIdAndUpdate(\n      id,\n      { name, description, color },\n      { new: true }\n    );\n\n    if (!subject) {\n      return NextResponse.json({ error: \"Subject not found\" }, { status: 404 });\n    }\n\n    return NextResponse.json(subject);\n  } catch (error) {\n    console.error(\"Error updating subject:\", error);\n    return NextResponse.json(\n      { error: \"Failed to update subject\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function DELETE(\n  _request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n\n    await Flashcard.deleteMany({ subjectId: id });\n    await Progress.deleteMany({ subjectId: id });\n    const subject = await Subject.findByIdAndDelete(id);\n\n    if (!subject) {\n      return NextResponse.json({ error: \"Subject not found\" }, { status: 404 });\n    }\n\n    return NextResponse.json({ message: \"Subject deleted\" });\n  } catch (error) {\n    console.error(\"Error deleting subject:\", error);\n    return NextResponse.json(\n      { error: \"Failed to delete subject\" },\n      { status: 500 }\n    );\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>params<\/code>: Next.js 15+ \u0645\u06cc\u06ba <code>params<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0648\u0639\u062f\u06c1 \u06c1\u06d2\u06d4 \u06c1\u0645 <code>await<\/code> \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u06d4 <code>{ id: \"abc123\" }<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>findByIdAndUpdate(id, updates, { new: true })<\/code>: \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u067e \u0688\u06cc\u0679 \u0634\u062f\u06c1 \u0648\u0631\u0698\u0646 \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>{ new: true }<\/code> \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 &quot;\u0646\u0626\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0648\u0627\u067e\u0633 \u06a9\u0631\u06cc\u06ba\u060c \u067e\u0631\u0627\u0646\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0646\u06c1\u06cc\u06ba\u06d4&#8221;<\/p>\n<\/li>\n<li>\n<p><code>DELETE<\/code>: \u0627\u06af\u0631 \u0622\u067e \u06a9\u0633\u06cc \u0645\u0636\u0645\u0648\u0646 \u06a9\u0648 \u062d\u0630\u0641 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u0633 \u0645\u0648\u0636\u0648\u0639 \u06a9\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0631\u0641\u062a \u06a9\u06d2 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u0628\u06be\u06cc \u062d\u0630\u0641 \u06a9\u0631 \u062f\u06cc\u06d2 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u062f\u0648\u0633\u0631\u06cc \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c \u06cc\u062a\u06cc\u0645 \u0688\u06cc\u0679\u0627 \u0648\u0627\u0642\u0639 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627.<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"heading-flashcard-by-id-get-update-delete\">\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0628\u0630\u0631\u06cc\u0639\u06c1 ID &#8211; \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba\u060c \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u060c \u062d\u0630\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/h4>\n<p>\u0627\u0628 \u0622\u0626\u06cc\u06d2 \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062a\u062d\u0631\u06a9 \u0631\u0627\u0633\u062a\u06d2 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u0622\u067e \u06a9\u0648 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u0646\u06d2\u060c \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646\u062f\u0631 <code>src\/app\/api\/flashcards\/[id]<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>route.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { NextResponse } from \"next\/server\";\nimport dbConnect from \"@\/lib\/db\";\nimport Flashcard from \"@\/lib\/models\/Flashcard\";\n\nexport async function GET(\n  _request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n    const flashcard = await Flashcard.findById(id).populate(\n      \"subjectId\",\n      \"name color\"\n    );\n\n    if (!flashcard) {\n      return NextResponse.json(\n        { error: \"Flashcard not found\" },\n        { status: 404 }\n      );\n    }\n\n    return NextResponse.json(flashcard);\n  } catch (error) {\n    console.error(\"Error fetching flashcard:\", error);\n    return NextResponse.json(\n      { error: \"Failed to fetch flashcard\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function PUT(\n  request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n    const body = await request.json();\n    const { front, back } = body;\n\n    const flashcard = await Flashcard.findByIdAndUpdate(\n      id,\n      { front, back },\n      { new: true }\n    ).populate(\"subjectId\", \"name color\");\n\n    if (!flashcard) {\n      return NextResponse.json(\n        { error: \"Flashcard not found\" },\n        { status: 404 }\n      );\n    }\n\n    return NextResponse.json(flashcard);\n  } catch (error) {\n    console.error(\"Error updating flashcard:\", error);\n    return NextResponse.json(\n      { error: \"Failed to update flashcard\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function DELETE(\n  _request: Request,\n  { params }: { params: Promise<{ id: string }> }\n) {\n  try {\n    await dbConnect();\n    const { id } = await params;\n    const flashcard = await Flashcard.findByIdAndDelete(id);\n\n    if (!flashcard) {\n      return NextResponse.json(\n        { error: \"Flashcard not found\" },\n        { status: 404 }\n      );\n    }\n\n    return NextResponse.json({ message: \"Flashcard deleted\" });\n  } catch (error) {\n    console.error(\"Error deleting flashcard:\", error);\n    return NextResponse.json(\n      { error: \"Failed to delete flashcard\" },\n      { status: 500 }\n    );\n  }\n}\n<\/code><\/pre>\n<h3 id=\"heading-part-5-progress-tracking-api\">\u062d\u0635\u06c1 5: \u067e\u0631\u0648\u06af\u0631\u06cc\u0633 \u0679\u0631\u06cc\u06a9\u0646\u06af API<\/h3>\n<p>\u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u0635\u0627\u0631\u0641 \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0633\u06cc\u0634\u0646 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u06a9\u0648 \u062f\u0631\u0633\u062a \u06cc\u0627 \u063a\u0644\u0637 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0646\u0634\u0627\u0646 \u0632\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u06c1\u0645 \u0627\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u06c1\u0631 \u0645\u0636\u0645\u0648\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u0633\u062a \u0641\u06cc\u0635\u062f\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627\u060c \u0622\u0626\u06cc\u06d2 \u062a\u0631\u0642\u06cc \u06a9\u0648 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 API \u0631\u0648\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u0646\u062f\u0631 <code>src\/app\/api\/progress<\/code>\u0646\u0627\u0645 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 <code>route.ts<\/code> \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { NextResponse } from \"next\/server\";\nimport dbConnect from \"@\/lib\/db\";\nimport Progress from \"@\/lib\/models\/Progress\";\n\nexport async function GET(request: Request) {\n  try {\n    await dbConnect();\n    const { searchParams } = new URL(request.url);\n    const subjectId = searchParams.get(\"subjectId\");\n\n    const query = subjectId ? { subjectId } : {};\n    const progress = await Progress.find(query).sort({ reviewedAt: -1 });\n\n    const stats = await Progress.aggregate([\n      { $match: query },\n      {\n        $group: {\n          _id: \"$subjectId\",\n          total: { $sum: 1 },\n          correct: { $sum: { $cond: [\"$correct\", 1, 0] } },\n        },\n      },\n    ]);\n\n    return NextResponse.json({ progress, stats });\n  } catch (error) {\n    console.error(\"Error fetching progress:\", error);\n    return NextResponse.json(\n      { error: \"Failed to fetch progress\" },\n      { status: 500 }\n    );\n  }\n}\n\nexport async function POST(request: Request) {\n  try {\n    await dbConnect();\n    const body = await request.json();\n    const { flashcardId, subjectId, correct } = body;\n\n    if (!flashcardId || !subjectId || typeof correct !== \"boolean\") {\n      return NextResponse.json(\n        { error: \"flashcardId, subjectId, and correct are required\" },\n        { status: 400 }\n      );\n    }\n\n    const progress = await Progress.create({\n      flashcardId,\n      subjectId,\n      correct,\n    });\n\n    return NextResponse.json(progress);\n  } catch (error) {\n    console.error(\"Error recording progress:\", error);\n    return NextResponse.json(\n      { error: \"Failed to record progress\" },\n      { status: 500 }\n    );\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u0648\u0688 \u0645\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>aggregate<\/code>: MongoDB \u06a9\u06cc \u0645\u062c\u0645\u0648\u0639\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646\u06d4 \u06c1\u0645 \u06af\u0631\u0648\u06c1 \u062f\u0631 \u06af\u0631\u0648\u06c1 <code>subjectId<\/code> \u062c\u0627\u0626\u0632\u0648\u06ba \u06a9\u06cc \u06a9\u0644 \u062a\u0639\u062f\u0627\u062f \u0627\u0648\u0631 \u062f\u0631\u0633\u062a \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4 <code>$cond: [\"$correct\", 1, 0]<\/code> \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 &quot;\u0627\u06af\u0631 \u062f\u0631\u0633\u062a \u06c1\u0648 \u062a\u0648 1 \u06a9\u0627 \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u06cc\u06ba\u060c \u0648\u0631\u0646\u06c1 0 \u06a9\u0627 \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4&#8221;<\/p>\n<\/li>\n<li>\n<p><code>stats<\/code>: \u06a9\u0686\u06be \u0627\u0633 \u0637\u0631\u062d \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2: <code>[{ _id: \"subjectId123\", total: 20, correct: 16 }]<\/code>. \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0627\u0633\u06d2 \u0645\u0648\u0636\u0648\u0639 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 &quot;80% \u062f\u0631\u0633\u062a\u06af\u06cc&#8221; \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-ui-implementation\">UI \u06a9\u0627 \u0646\u0641\u0627\u0630<\/h2>\n<p>\u0627\u0628 \u0622\u0626\u06cc\u06d2 \u0648\u06c1 \u0635\u0641\u062d\u06c1 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627\u06d4 \u06c1\u0645 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u06c1\u06a9\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba<code>useState<\/code>, <code>useEffect<\/code>) \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u0646\u0638\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 <code>fetch<\/code> API \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-subjects-page\">\u0645\u0648\u0636\u0648\u0639 \u06a9\u0627 \u0635\u0641\u062d\u06c1<\/h3>\n<p>\u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u067e\u0631\u060c \u0645\u0648\u0636\u0648\u0639 API \u0633\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0646\u06cc\u0627 \u0645\u0648\u0636\u0648\u0639 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4 \u06c1\u0631 \u0645\u0648\u0636\u0648\u0639 \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u0688 \u06c1\u06d2 \u062c\u0648 \u0627\u06cc\u06a9 \u062a\u0641\u0635\u06cc\u0644\u06cc \u0635\u0641\u062d\u06c1 \u0633\u06d2 \u0644\u0646\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u0646\u0637\u0642:<\/p>\n<ol>\n<li>\n<p><code>useEffect<\/code>    \u062c\u0628 \u0646\u0635\u0628 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u0627\u0648\u0631 \u067e\u06a9\u0627\u0631\u0627 \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 <code>fetch(\"\/api\/subjects\")<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0627\u0633\u0679\u0627\u0626\u0644\u0627\u0626\u0632\u0688 <code>onSubmit<\/code> \u0641\u0648\u0646 \u06a9\u0627\u0644 <code>fetch(\"\/api\/subjects\", { method: \"POST\", ... })<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06c1\u0645 \u0641\u0627\u0631\u0645 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>fetchSubjects()<\/code> \u0641\u06c1\u0631\u0633\u062a \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0627\u0632\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-tsx\">\/\/ Simplified structure - see full code in src\/app\/subjects\/page.tsx\nconst [subjects, setSubjects] = useState<subject>([]);\nconst [showForm, setShowForm] = useState(false);\n\nuseEffect(() => {\n  fetch(\"\/api\/subjects\")\n    .then((res) => res.json())\n    .then((data) => setSubjects(data));\n}, []);\n\nconst handleSubmit = async (e) => {\n  e.preventDefault();\n  await fetch(\"\/api\/subjects\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application\/json\" },\n    body: JSON.stringify({ name, description, color }),\n  });\n  fetchSubjects(); \n};\n<\/subject><\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787779060_707_Nextjs-\u0627\u0648\u0631-MongoDB-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0641\u0644\u06cc\u0634-\u06a9\u0627\u0631\u0688-\u0644\u0631\u0646\u0646\u06af.jpg\" alt=\"\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0627\u0633\u0679\u0688\u06cc \u0644\u0633\u0679\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-the-subject-detail-page-creating-and-editing-flashcards\">\u0645\u0648\u0636\u0648\u0639 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0627 \u0635\u0641\u062d\u06c1 (\u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba)<\/h3>\n<p>\u06cc\u06c1 \u0635\u0641\u062d\u06c1 \u0627\u06cc\u06a9 \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0646\u0626\u06d2 \u06a9\u0627\u0631\u0688\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u0645\u0648\u062c\u0648\u062f\u06c1 \u06a9\u0627\u0631\u0688\u0632 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645\/\u062d\u0630\u0641 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 URL \u06c1\u06d2: <code>\/subjects\/[id]<\/code>\u062a\u0648 \u06c1\u0645 <code>useParams()<\/code> \u0645\u0648\u0636\u0648\u0639 \u06a9\u06cc \u0634\u0646\u0627\u062e\u062a \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u0646\u0637\u0642:<\/p>\n<ol>\n<li>\n<p><code>useParams()<\/code>    \u06c1\u0645\u06cc\u06ba \u062f\u06cc\u062a\u0627 \u06c1\u06d2 <code>id<\/code> URL \u0633\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06c1\u0645 \u0645\u0627\u0624\u0646\u0679 \u0633\u06d2 \u0639\u0646\u0648\u0627\u0646\u0627\u062a \u0627\u0648\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0644\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>&quot;Flashcard \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba&#8221; \u0641\u0627\u0631\u0645 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u0627\u06d4 POST \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062c\u0645\u0639 \u06a9\u0631\u0648\u0627\u0626\u06cc\u06ba\u06d4 <code>\/api\/flashcards<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>subjectId<\/code>, <code>front<\/code>\u0627\u0648\u0631 <code>back<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u06c1\u0631 \u06a9\u0627\u0631\u0688 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u0627\u0648\u0631 \u062d\u0630\u0641 \u06a9\u06d2 \u0628\u0679\u0646 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0646 \u0644\u0627\u0626\u0646 \u0641\u0627\u0631\u0645 \u0645\u06cc\u06ba \u0633\u0648\u0626\u0686\u0632 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0688\u06cc\u0644\u06cc\u0679 \u06a9\u0627\u0644 \u0648\u0627\u067e\u0633 \u0622\u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 <code>DELETE \/api\/flashcards\/[id]<\/code>.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-tsx\">\/\/ Creating a flashcard\nconst handleCreate = async (e) => {\n  e.preventDefault();\n  await fetch(\"\/api\/flashcards\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application\/json\" },\n    body: JSON.stringify({ subjectId: id, front, back }),\n  });\n  fetchFlashcards(); \/\/ Refresh\n};\n\n\/\/ Updating a flashcard\nconst handleUpdate = async (e) => {\n  e.preventDefault();\n  await fetch(`\/api\/flashcards\/${editingId}`, {\n    method: \"PUT\",\n    headers: { \"Content-Type\": \"application\/json\" },\n    body: JSON.stringify({ front: editFront, back: editBack }),\n  });\n  setEditingId(null);\n  fetchFlashcards();\n};\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787779060_874_Nextjs-\u0627\u0648\u0631-MongoDB-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0641\u0644\u06cc\u0634-\u06a9\u0627\u0631\u0688-\u0644\u0631\u0646\u0646\u06af.jpg\" alt=\"\u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0627 \u0635\u0641\u062d\u06c1\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h3 id=\"heading-the-study-page-flipping-cards\">\u062a\u062d\u0642\u06cc\u0642\u06cc \u0635\u0641\u062d\u06c1 &#8211; \u067e\u0644\u0679\u0627\u0626\u06cc\u06ba \u06a9\u0627\u0631\u0688<\/h3>\n<p>\u062a\u062d\u0642\u06cc\u0642\u06cc \u0635\u0641\u062d\u0627\u062a \u06a9\u06cc \u062a\u06cc\u0646 \u0627\u06c1\u0645 \u062d\u0627\u0644\u062a\u06cc\u06ba \u06c1\u06cc\u06ba:<\/p>\n<ol>\n<li>\n<p><strong>\u0644\u06d2 \u0644\u0648<\/strong>: \u0635\u0627\u0631\u0641 \u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u0636\u0648\u0639 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba\u06d4<\/strong>: \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u06a9\u06d2 \u0633\u0627\u062a\u06be &#8216;Start Study&#8217; \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0637\u0627\u0644\u0639\u06c1<\/strong>: \u0627\u06cc\u06a9 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u0688 \u062f\u06a9\u06be\u0627\u0626\u06cc\u06ba\u06d4 \u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u067e\u0644\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u06cc\u06c1 \u062f\u0631\u0633\u062a \u06c1\u06d2 \u06cc\u0627 \u063a\u0644\u0637\u06d4 \u0627\u06af\u0644\u06d2 \u06a9\u0627\u0631\u0688 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n<h4 id=\"heading-the-flip-animation\">\u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u067e\u0644\u0679\u0627\u0626\u06cc\u06ba<\/h4>\n<p>\u06c1\u0645 CSS 3D \u0679\u0631\u0627\u0646\u0633\u0641\u0627\u0631\u0645\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0641\u0644\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u062f\u0648 \u0686\u06c1\u0631\u06d2 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0633\u0627\u0645\u0646\u06d2 \u0633\u0648\u0627\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06cc\u0686\u06be\u06d2 \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u062c\u0628 <code>flipped<\/code> \u06c1\u06d2 <code>true<\/code>\u06a9\u0627\u0631\u0688 \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06a9\u0648 180 \u0688\u06af\u0631\u06cc \u06af\u06be\u0645\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0645 \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba <code>backface-visibility: hidden<\/code> \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06af\u0631\u062f\u0634 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0635\u0631\u0641 \u0645\u0646\u0627\u0633\u0628 \u0686\u06c1\u0631\u06d2 \u06c1\u06cc \u0646\u0638\u0631 \u0622\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06cc \u0641\u0644\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0627\u0633\u0679\u0627\u0626\u0644\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06a9\u06be\u0648\u0644\u06cc\u06ba: <code>src\/app\/globals.css<\/code> \u0627\u0648\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-css\">\/* Flashcard flip animation *\/\n.perspective-1000 {\n  perspective: 1000px;\n}\n\n.preserve-3d {\n  transform-style: preserve-3d;\n}\n\n.backface-hidden {\n  backface-visibility: hidden;\n}\n\n\/* Lined paper effect for the card background *\/\n.lined-paper {\n  background-image: repeating-linear-gradient(\n    transparent,\n    transparent 27px,\n    #e5e7eb 27px,\n    #e5e7eb 28px\n  );\n}\n<\/code><\/pre>\n<p>\u06a9\u06c1 <code>lined-paper<\/code> \u06a9\u0644\u0627\u0633 \u0627\u0641\u0642\u06cc \u0633\u0631\u0645\u0626\u06cc \u0644\u06a9\u06cc\u0631\u06cc\u06ba (\u062c\u06cc\u0633\u06d2 \u0646\u0648\u0679 \u0628\u06a9 \u067e\u06cc\u067e\u0631) \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u06c1\u0631\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06af\u0631\u06cc\u0688\u06cc\u0646\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u0627\u0646\u0648\u0633\u060c \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0633\u062a\u0627\u0646\u06c1 \u0627\u062d\u0633\u0627\u0633 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u0627\u0631\u0688 \u06a9\u06cc \u0633\u0627\u062e\u062a:<\/p>\n<pre><code class=\"language-tsx\"><div classname=\"{`preserve-3d\" transition-transform=\"\" duration-500=\"\" flipped=\"\" :=\"\">\n  {\/* Front face - Question *\/}\n  <p>\n    {currentCard.front}\n  <\/p>\n  {\/* Back face - Answer *\/}\n  <p>\n    {currentCard.back}\n  <\/p>\n<\/div>\n<\/code><\/pre>\n<p>\u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0627\u0631\u0688 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06cc\u06c1 \u0628\u062f\u0644 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>flipped<\/code>. \u067e\u06cc\u0631\u0646\u0679 \u06af\u06be\u0645\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0635\u062d\u06cc\u062d \u0637\u0631\u0641 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1787779060_106_Nextjs-\u0627\u0648\u0631-MongoDB-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u0641\u0644\u06cc\u0634-\u06a9\u0627\u0631\u0688-\u0644\u0631\u0646\u0646\u06af.jpg\" alt=\"a92a03c7-c562-4600-ba2c-ecd6e85ab00c\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h4 id=\"heading-recording-progress\">\u0631\u06cc\u06a9\u0627\u0631\u0688\u0646\u06af \u062c\u0627\u0631\u06cc \u06c1\u06d2\u06d4<\/h4>\n<p>\u062c\u0628 \u0635\u0627\u0631\u0641 &quot;\u0645\u06cc\u06ba \u0633\u0645\u062c\u06be\u062a\u0627 \u06c1\u0648\u06ba!&#8221; \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u0627 &quot;\u0645\u06cc\u06ba \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u062a\u0627&#8221;\u060c \u06c1\u0645:<\/p>\n<ol>\n<li>\n<p>\u067e\u0631 \u067e\u0648\u0633\u0679 \u06a9\u06cc\u0627 \u06af\u06cc\u0627: <code>\/api\/progress<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>flashcardId<\/code>, <code>subjectId<\/code>\u0627\u0648\u0631 <code>correct<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0645\u0642\u0627\u0645\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u06a9\u0627\u0631\u06cc (<code>sessionCorrect<\/code> \u06cc\u0627 <code>sessionWrong<\/code>) \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0644\u06d2 \u06a9\u0627\u0631\u0688 \u067e\u0631 \u062c\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u062a\u0645\u0627\u0645 \u06a9\u0627\u0631\u0688\u0632 \u0645\u06a9\u0645\u0644 \u06a9\u0631 \u0644\u06cc\u06ba \u06af\u06d2\u060c &#8216;\u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u0633\u0679\u0688\u06cc&#8217; \u0627\u0633\u06a9\u0631\u06cc\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u0645\u0648\u062f\u0627\u0631 \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-tsx\">const handleKnow = () => {\n  recordProgress(true);\n  setFlipped(false);\n  if (currentIndex < flashcards.length - 1) {\n    setCurrentIndex((i) => i + 1);\n  } else {\n    setStudyStarted(false);\n    setCurrentIndex(0);\n  }\n};\n<\/code><\/pre>\n<h3 id=\"heading-the-progress-page\">\u062a\u0631\u0642\u06cc \u06a9\u0627 \u0635\u0641\u062d\u06c1<\/h3>\n<p>\u06cc\u06c1\u0627\u06ba \u06c1\u0645\u06cc\u06ba \u0645\u0648\u0636\u0648\u0639 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0631\u0641\u062a \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u0645\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06c1\u0631 \u0645\u0648\u0636\u0648\u0639 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 (\u062c\u0627\u0626\u0632\u0648\u06ba \u06a9\u06cc \u06a9\u0644 \u062a\u0639\u062f\u0627\u062f\u060c \u062f\u0631\u0633\u062a \u0634\u0645\u0627\u0631) \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0641\u06cc\u0635\u062f \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0648 \u0627\u0648\u067e\u0631\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0645\u062c\u0645\u0648\u0639\u06cc \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u0627\u0648\u0631 \u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0645\u0648\u0636\u0648\u0639\u0627\u062a\u06cc \u062e\u0631\u0627\u0628\u06cc \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<pre><code class=\"language-tsx\">const getSubjectStats = (subjectId) => {\n  const stat = stats.find((s) => s._id === subjectId);\n  return stat\n    ? {\n        total: stat.total,\n        correct: stat.correct,\n        pct: Math.round((stat.correct \/ stat.total) * 100),\n      }\n    : null;\n};\n<\/code><\/pre>\n<h3 id=\"heading-optional-lined-paper-and-paperclip-icon\">\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc: \u0642\u0637\u0627\u0631 \u0648\u0627\u0644\u0627 \u06a9\u0627\u063a\u0630 \u0627\u0648\u0631 \u067e\u06cc\u067e\u0631 \u06a9\u0644\u067e \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646<\/h3>\n<p>\u0622\u067e \u06a9\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 \u0645\u0632\u06cc\u062f \u0679\u0686\u0627\u0626\u0644 \u06a9\u0627 \u0627\u062d\u0633\u0627\u0633 \u062f\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u067e \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u0648\u0627\u0644\u0627 \u06a9\u0627\u063a\u0630 \u06a9\u0627 \u0627\u062b\u0631 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u067e\u06cc\u067e\u0631 \u06a9\u0644\u067e \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u06a9\u0644\u067e \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 SVG \u062c\u0632\u0648 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">\/\/ src\/components\/PaperclipIcon.tsx\nexport default function PaperclipIcon({ className }: { className?: string }) {\n  return (\n    <svg classname=\"{className}\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokewidth=\"1.5\">\n      <path d=\"M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48\"\/>\n    <\/svg>\n  );\n}\n<\/code><\/pre>\n<p>\u0627\u0633\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u0648\u067e\u0631\u06cc \u0645\u0631\u06a9\u0632 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>lined-paper<\/code> \u0644\u06cc\u067e \u0679\u0627\u067e \u06a9\u06d2 \u0627\u062b\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0645\u0648\u0627\u062f \u0648\u0627\u0644\u06d2 \u062d\u0635\u06d2 \u067e\u0631 \u0627\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0644\u06af\u0627\u0626\u06cc \u06af\u0626\u06cc \u062a\u06be\u06cc\u06d4<\/p>\n<h2 id=\"heading-best-practices\">\u0628\u06c1\u062a\u0631\u06cc\u0646 \u0637\u0631\u0632 \u0639\u0645\u0644<\/h2>\n<h3 id=\"heading-code-organization\">\u06a9\u0648\u0688 \u0622\u0631\u06af\u0646\u0627\u0626\u0632\u06cc\u0634\u0646<\/h3>\n<ul>\n<li>\n<p><strong>\u0645\u0627\u0688\u0644<\/strong> \u06a9\u0648 <code>lib\/models\/<\/code>: \u0641\u06cc \u0645\u0627\u0688\u0644 \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644\u06d4 \u0627\u067e\u0646\u0627 \u0633\u06a9\u06cc\u0645\u0627 \u0627\u06cc\u06a9 \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>API \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1<\/strong> \u06a9\u0648 <code>app\/api\/<\/code>: \u0648\u0633\u0627\u0626\u0644 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u06af\u0631\u0648\u067e (\u0645\u0648\u0636\u0648\u0639\u060c \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632\u060c \u067e\u06cc\u0634\u0631\u0641\u062a)\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>[id]<\/code> \u0645\u062a\u062d\u0631\u06a9 \u0631\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u062c\u0632\u0627\u0621<\/strong>: <code>PaperclipIcon<\/code> \u06cc\u06c1 \u0627\u0646\u062f\u0631 \u06c1\u06d2\u06d4 <code>components\/<\/code>. \u062f\u06c1\u0631\u0627\u0626\u06d2 \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0633\u06cc \u0628\u06be\u06cc UI \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-error-handling\">\u06c1\u06cc\u0646\u0688\u0644\u0646\u06af \u0645\u06cc\u06ba \u062e\u0631\u0627\u0628\u06cc<\/h3>\n<ul>\n<li>\n<p><strong>API \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1<\/strong>: \u06c1\u0645\u06cc\u0634\u06c1 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0644\u067e\u06cc\u0679\u062a\u0627 \u06c1\u06d2\u06d4 <code>try\/catch<\/code>. \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u0679\u06cc\u0679\u0633 \u06a9\u0648\u0688 \u0648\u0627\u067e\u0633 \u06a9\u0631\u06cc\u06ba (\u062e\u0631\u0627\u0628 \u0627\u0646 \u067e\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 400\u060c \u0646\u06c1 \u0645\u0644\u0646\u06d2 \u067e\u0631 404\u060c \u0633\u0631\u0648\u0631 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 500)\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0633\u0627\u0645\u0646\u06d2 \u06a9\u0627 \u0627\u062e\u062a\u062a\u0627\u0645<\/strong>: \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 <code>res.ok<\/code> \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <code>res.json()<\/code>. \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0644\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u062e\u0631\u0627\u0628\u06cc \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u062f\u06a9\u06be\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-performance-tips\">\u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06cc \u062a\u062c\u0627\u0648\u06cc\u0632<\/h3>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0679\u0627 \u0628\u06cc\u0633 \u06a9\u0646\u06a9\u0634\u0646<\/strong>: \u06a9\u0646\u06a9\u0634\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba (\u06c1\u0645\u0627\u0631\u0627 <code>dbConnect<\/code> \u06cc\u06c1 \u06a9\u0631\u0648)\u06d4 \u062c\u0628 \u0628\u06be\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06cc \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0631\u0627\u0628\u0637\u06c1 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u06be\u0648\u0691\u0627 \u0633\u0627 \u0628\u06be\u0631\u06cc\u06ba\u06d4<\/strong>: \u0635\u0631\u0641 <code>.populate()<\/code> \u062c\u0633 \u0641\u06cc\u0644\u0688 \u06a9\u06cc \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0641\u06cc\u0644\u0688\u0632 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba: <code>.populate(\"subjectId\", \"name color\")<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>\u0644\u0648\u0688 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a<\/strong>: \u062f\u0631\u0622\u0645\u062f \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u0633\u067e\u0646\u0631 \u062f\u06a9\u06be\u0627\u0626\u06cc\u06ba\u06d4 \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062a\u0627\u062b\u0631\u0627\u062a \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0641\u0644 \u0627\u0633\u0679\u06cc\u06a9 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u067e \u0628\u0646\u0627\u0626\u06cc:<\/p>\n<ul>\n<li>\n<p><strong>Next.js<\/strong> \u0627\u06cc\u067e \u0627\u0648\u0631 API \u0631\u0648\u0679\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2<\/p>\n<\/li>\n<li>\n<p><strong>MongoDB + Mongoose<\/strong> \u0645\u0636\u0627\u0645\u06cc\u0646\u060c \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0627\u0648\u0631 \u067e\u06cc\u0634 \u0631\u0641\u062a \u06a9\u0648 \u0628\u0686\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u062f \u0639\u0645\u0644<\/strong> \u0641\u0627\u0631\u0645\u0632\u060c \u0641\u06c1\u0631\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u0641\u0644\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be UI \u06a9\u06d2 \u0644\u06cc\u06d2<\/p>\n<\/li>\n<li>\n<p><strong>\u0679\u06cc\u0644 \u0648\u0646\u0688 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633<\/strong> \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-possible-improvements\">\u0645\u0645\u06a9\u0646\u06c1 \u0628\u06c1\u062a\u0631\u06cc<\/h3>\n<p>\u0627\u0633 \u0627\u06cc\u067e \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0626\u06cc \u0641\u06cc\u0686\u0631\u0632 \u0628\u0646\u0627\u0626\u06d2 \u062c\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u062a\u0635\u062f\u06cc\u0642 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0644\u0627\u06af \u0627\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u06c1\u0631 \u0635\u0627\u0631\u0641 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u0645\u0648\u0636\u0648\u0639 \u0627\u0648\u0631 \u06a9\u0627\u0631\u0688 \u06c1\u0648\u06d4 NextAuth.js \u06cc\u0627 \u06a9\u0644\u0631\u06a9 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u062f\u0648\u0633\u0631\u0627\u060c \u0622\u067e \u0641\u0627\u0635\u0644\u06c1 \u062f\u06c1\u0631\u0627\u0646\u06d2 \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u0642\u0641\u0648\u06ba \u067e\u0631 \u06a9\u0627\u0631\u0688\u0632 \u0688\u0633\u067e\u0644\u06d2 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0631\u0648\u06af\u0631\u06cc\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (\u0645\u062b\u0644\u0627\u064b \u0648\u06c1 \u06a9\u0627\u0631\u0688 \u062c\u0648 \u0627\u06a9\u062b\u0631 \u063a\u0644\u0637 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba)\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627\u060c \u0622\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u06cc\u0627 \u0633\u06cc\u0634\u0646 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u067e\u0631 \u06a9\u0646\u0641\u06cc\u0679\u06cc \u0627\u062b\u0631\u0627\u062a\u06d4<\/p>\n<p>\u0622\u067e \u0645\u0648\u0628\u0627\u0626\u0644 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648\u06cc\u0646\u0633 \u0628\u06be\u06cc \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u0627 \u0645\u0646\u0638\u0631 \u0645\u0648\u0628\u0627\u0626\u0644 \u0641\u0648\u0646\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0628\u0631\u0622\u0645\u062f\/\u062f\u0631\u0622\u0645\u062f \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0645\u0641\u06cc\u062f \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641 \u0628\u06cc\u06a9 \u0627\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0648 JSON \u06cc\u0627 CSV \u06a9\u06d2 \u0628\u0637\u0648\u0631 \u0627\u06cc\u06a9\u0633\u067e\u0648\u0631\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-next-steps\">\u0627\u06af\u0644\u06d2 \u0627\u0642\u062f\u0627\u0645\u0627\u062a<\/h3>\n<p>\u0645\u0632\u06cc\u062f \u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0686\u0644\u0627\u0626\u06cc\u06ba: <code>npm run dev<\/code> \u0627\u0648\u0631 \u0627\u06cc\u067e \u06a9\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u0686\u06be \u0645\u0636\u0627\u0645\u06cc\u0646 \u0627\u0648\u0631 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u067e\u06be\u0631 \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u0627 \u0645\u0648\u0688 \u0622\u0632\u0645\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u067e\u06be\u0631 \u0627\u067e\u0646\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 MongoDB Compass \u06cc\u0627 Atlas \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4 \u0627\u067e\u0646\u06d2 \u06a9\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u062c\u0631\u0628\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 \u0631\u0646\u06af \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0641\u06cc\u0644\u0688\u0632 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0641\u0644\u067e \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0637\u0627\u0644\u0639\u06c1 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u0632\u06c1 \u0622\u0626\u06d2!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u06cc\u06a9 \u0631\u0627\u062a \u067e\u06c1\u0644\u06d2 \u06a9\u0628\u06be\u06cc \u0679\u06cc\u0633\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u06a9\u0631 \u0644\u06af\u0627\u06cc\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u06cc\u0627\u062f \u0631\u06a9\u06be\u0646\u0627 \u06a9\u062a\u0646\u0627 \u0645\u0634\u06a9\u0644 \u06c1\u06d2\u06d4 \u0641\u0644\u06cc\u0634 \u06a9\u0627\u0631\u0688\u0632 \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0633\u0628 \u0633\u06d2 \u0645\u0648\u062b\u0631 \u0679\u0648\u0644\u0632 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc\u06ba\u06d4 \u0641\u0639\u0627\u0644 \u06cc\u0627\u062f: \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0646\u0648\u0679\u0633 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0641\u0639\u0627\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u0648 \u06cc\u0627\u062f \u0631\u06a9\u06be\u0646\u06d2 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":28348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-28347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/28347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=28347"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/28347\/revisions"}],"predecessor-version":[{"id":28349,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/28347\/revisions\/28349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/28348"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=28347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=28347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=28347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}