# AGENTS.md ## परियोजना अवलोकन यो वेब विकासको आधारभूत ज्ञान सिकाउनका लागि तयार गरिएको शैक्षिक पाठ्यक्रमको भण्डार हो। पाठ्यक्रम माइक्रोसफ्ट क्लाउड एड्भोकेट्सद्वारा विकसित गरिएको १२ हप्ताको व्यापक कोर्स हो, जसमा जाभास्क्रिप्ट, CSS, र HTML समेटिएका २४ व्यावहारिक पाठहरू छन्। ### मुख्य घटकहरू - **शैक्षिक सामग्री**: परियोजनामा आधारित मोड्युलहरूमा व्यवस्थित २४ संरचित पाठहरू - **व्यावहारिक परियोजनाहरू**: टेरारियम, टाइपिङ गेम, ब्राउजर एक्सटेन्सन, स्पेस गेम, बैंकिङ एप, कोड एडिटर, र AI च्याट सहायक - **इन्टरएक्टिभ क्विजहरू**: प्रत्येक पाठको लागि ३ प्रश्नसहित ४८ क्विजहरू (पाठ अघि/पछिको मूल्याङ्कन) - **बहुभाषा समर्थन**: GitHub Actions मार्फत ५०+ भाषाहरूमा स्वचालित अनुवाद - **प्रविधिहरू**: HTML, CSS, जाभास्क्रिप्ट, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाहरूका लागि) ### वास्तुकला - पाठमा आधारित संरचनासहितको शैक्षिक भण्डार - प्रत्येक पाठको फोल्डरमा README, कोड उदाहरणहरू, र समाधानहरू समावेश - स्वतन्त्र परियोजनाहरू छुट्टाछुट्टै निर्देशिकामा (quiz-app, विभिन्न पाठ परियोजनाहरू) - GitHub Actions (co-op-translator) प्रयोग गरेर अनुवाद प्रणाली - Docsify मार्फत सेवा गरिएको दस्तावेजीकरण र PDF रूपमा उपलब्ध ## सेटअप आदेशहरू यो भण्डार मुख्यत: शैक्षिक सामग्री उपभोगका लागि हो। विशेष परियोजनाहरूमा काम गर्नका लागि: ### मुख्य भण्डार सेटअप ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` ### क्विज एप सेटअप (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Start development server npm run build # Build for production npm run lint # Run ESLint ``` ### बैंक परियोजना API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Start API server npm run lint # Run ESLint npm run format # Format with Prettier ``` ### ब्राउजर एक्सटेन्सन परियोजनाहरू ```bash cd 5-browser-extension/solution npm install # Follow browser-specific extension loading instructions ``` ### स्पेस गेम परियोजनाहरू ```bash cd 6-space-game/solution npm install # Open index.html in browser or use Live Server ``` ### च्याट परियोजना (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai # Set GITHUB_TOKEN environment variable python api.py ``` ## विकास कार्यप्रवाह ### सामग्री योगदानकर्ताहरूका लागि 1. **भण्डारलाई आफ्नो GitHub खातामा फोर्क गर्नुहोस्** 2. **फोर्कलाई स्थानीय रूपमा क्लोन गर्नुहोस्** 3. **आफ्नो परिवर्तनहरूको लागि नयाँ शाखा बनाउनुहोस्** 4. पाठ सामग्री वा कोड उदाहरणहरूमा परिवर्तन गर्नुहोस् 5. सम्बन्धित परियोजना निर्देशिकाहरूमा कोड परिवर्तनहरू परीक्षण गर्नुहोस् 6. योगदान दिशानिर्देशहरू पालना गर्दै पुल अनुरोधहरू पेश गर्नुहोस् ### सिक्नेहरूका लागि 1. भण्डारलाई फोर्क वा क्लोन गर्नुहोस् 2. क्रमिक रूपमा पाठ निर्देशिकाहरूमा जानुहोस् 3. प्रत्येक पाठको README फाइलहरू पढ्नुहोस् 4. https://ff-quizzes.netlify.app/web/ मा पाठ अघि क्विजहरू पूरा गर्नुहोस् 5. पाठ फोल्डरहरूमा कोड उदाहरणहरूमा काम गर्नुहोस् 6. असाइनमेन्टहरू र चुनौतीहरू पूरा गर्नुहोस् 7. पाठ पछि क्विजहरू लिनुहोस् ### प्रत्यक्ष विकास - **दस्तावेजीकरण**: रूटमा `docsify serve` चलाउनुहोस् (पोर्ट 3000) - **क्विज एप**: quiz-app निर्देशिकामा `npm run dev` चलाउनुहोस् - **परियोजनाहरू**: HTML परियोजनाहरूका लागि VS Code Live Server एक्सटेन्सन प्रयोग गर्नुहोस् - **API परियोजनाहरू**: सम्बन्धित API निर्देशिकाहरूमा `npm start` चलाउनुहोस् ## परीक्षण निर्देशनहरू ### क्विज एप परीक्षण ```bash cd quiz-app npm run lint # Check for code style issues npm run build # Verify build succeeds ``` ### बैंक API परीक्षण ```bash cd 7-bank-project/api npm run lint # Check for code style issues node server.js # Verify server starts without errors ``` ### सामान्य परीक्षण दृष्टिकोण - यो शैक्षिक भण्डार हो, व्यापक स्वचालित परीक्षणहरू छैनन् - म्यानुअल परीक्षणमा ध्यान केन्द्रित: - कोड उदाहरणहरू त्रुटि बिना चल्छन् - दस्तावेजीकरणका लिंकहरू सही रूपमा काम गर्छन् - परियोजना निर्माण सफलतापूर्वक पूरा हुन्छ - उदाहरणहरू उत्कृष्ट अभ्यासहरू पालना गर्छन् ### पेश गर्नु अघि जाँचहरू - `npm run lint` चलाउनुहोस् package.json भएका निर्देशिकाहरूमा - Markdown लिंकहरू मान्य छन् भनी सुनिश्चित गर्नुहोस् - ब्राउजर वा Node.js मा कोड उदाहरणहरू परीक्षण गर्नुहोस् - अनुवादहरूले उचित संरचना कायम राखेको सुनिश्चित गर्नुहोस् ## कोड शैली दिशानिर्देश ### जाभास्क्रिप्ट - आधुनिक ES6+ सिन्ट्याक्स प्रयोग गर्नुहोस् - परियोजनाहरूमा प्रदान गरिएको मानक ESLint कन्फिगरेसनहरू पालना गर्नुहोस् - शैक्षिक स्पष्टताका लागि अर्थपूर्ण भेरिएबल र फङ्सन नामहरू प्रयोग गर्नुहोस् - सिक्नेहरूका लागि अवधारणाहरू व्याख्या गर्ने टिप्पणीहरू थप्नुहोस् - जहाँ कन्फिगर गरिएको छ, Prettier प्रयोग गरेर फर्म्याट गर्नुहोस् ### HTML/CSS - सेम्यान्टिक HTML5 तत्वहरू - उत्तरदायी डिजाइन सिद्धान्तहरू - स्पष्ट क्लास नामकरण परम्पराहरू - सिक्नेहरूका लागि CSS प्रविधिहरू व्याख्या गर्ने टिप्पणीहरू ### Python - PEP 8 शैली दिशानिर्देशहरू - स्पष्ट, शैक्षिक कोड उदाहरणहरू - सिकाइका लागि सहायक टाइप हिन्टहरू ### Markdown दस्तावेजीकरण - स्पष्ट शीर्षक पदानुक्रम - भाषा निर्दिष्ट गरिएको कोड ब्लकहरू - थप स्रोतहरूमा लिंकहरू - `images/` निर्देशिकामा स्क्रिनसटहरू र छविहरू - पहुँचयोग्यताका लागि छविहरूको लागि Alt टेक्स्ट ### फाइल संगठन - पाठहरू क्रमिक रूपमा क्रमांकित (1-getting-started-lessons, 2-js-basics, आदि) - प्रत्येक परियोजनामा `solution/` र प्राय: `start/` वा `your-work/` निर्देशिकाहरू छन् - पाठ-विशिष्ट `images/` फोल्डरहरूमा छविहरू भण्डारण - अनुवादहरू `translations/{language-code}/` संरचनामा ## निर्माण र परिनियोजन ### क्विज एप परिनियोजन (Azure Static Web Apps) क्विज-एप Azure Static Web Apps परिनियोजनका लागि कन्फिगर गरिएको छ: ```bash cd quiz-app npm run build # Creates dist/ folder # Deploys via GitHub Actions workflow on push to main ``` Azure Static Web Apps कन्फिगरेसन: - **एप स्थान**: `/quiz-app` - **आउटपुट स्थान**: `dist` - **कार्यप्रवाह**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### दस्तावेजीकरण PDF निर्माण ```bash npm install # Install docsify-to-pdf npm run convert # Generate PDF from docs ``` ### Docsify दस्तावेजीकरण ```bash npm install -g docsify-cli # Install Docsify globally docsify serve # Serve on localhost:3000 ``` ### परियोजना-विशिष्ट निर्माणहरू प्रत्येक परियोजना निर्देशिकामा आफ्नै निर्माण प्रक्रिया हुन सक्छ: - Vue परियोजनाहरू: `npm run build` उत्पादन बन्डलहरू बनाउँछ - स्थिर परियोजनाहरू: कुनै निर्माण चरण छैन, फाइलहरू प्रत्यक्ष सेवा गर्नुहोस् ## पुल अनुरोध दिशानिर्देश ### शीर्षक ढाँचा परिवर्तनको क्षेत्र संकेत गर्ने स्पष्ट, वर्णनात्मक शीर्षकहरू प्रयोग गर्नुहोस्: - `[Quiz-app] पाठ X का लागि नयाँ क्विज थप्नुहोस्` - `[Lesson-3] टेरारियम परियोजनामा टाइपो सुधार गर्नुहोस्` - `[Translation] पाठ ५ का लागि स्पेनिश अनुवाद थप्नुहोस्` - `[Docs] सेटअप निर्देशनहरू अद्यावधिक गर्नुहोस्` ### आवश्यक जाँचहरू पुल अनुरोध पेश गर्नु अघि: 1. **कोड गुणस्तर**: - प्रभावित परियोजना निर्देशिकाहरूमा `npm run lint` चलाउनुहोस् - सबै लिन्टिङ त्रुटिहरू र चेतावनीहरू सुधार गर्नुहोस् 2. **निर्माण प्रमाणीकरण**: - लागू भएमा `npm run build` चलाउनुहोस् - कुनै निर्माण त्रुटि सुनिश्चित गर्नुहोस् 3. **लिंक प्रमाणीकरण**: - सबै Markdown लिंकहरू परीक्षण गर्नुहोस् - छवि सन्दर्भहरू काम गर्छन् भनी सुनिश्चित गर्नुहोस् 4. **सामग्री समीक्षा**: - वर्तनी र व्याकरणका लागि प्रूफरीड गर्नुहोस् - कोड उदाहरणहरू सही र शैक्षिक छन् भनी सुनिश्चित गर्नुहोस् - अनुवादहरूले मूल अर्थ कायम राखेको सुनिश्चित गर्नुहोस् ### योगदान आवश्यकताहरू - Microsoft CLA मा सहमति जनाउनुहोस् (पहिलो PR मा स्वचालित जाँच) - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) पालना गर्नुहोस् - विस्तृत दिशानिर्देशहरूको लागि [CONTRIBUTING.md](./CONTRIBUTING.md) हेर्नुहोस् - लागू भएमा PR विवरणमा मुद्दा नम्बरहरू सन्दर्भ गर्नुहोस् ### समीक्षा प्रक्रिया - PR हरू मर्मतकर्ताहरू र समुदायद्वारा समीक्षा गरिन्छ - शैक्षिक स्पष्टतालाई प्राथमिकता दिइन्छ - कोड उदाहरणहरूले हालको उत्कृष्ट अभ्यासहरू पालना गर्नुपर्छ - अनुवादहरू सटीकता र सांस्कृतिक उपयुक्तताका लागि समीक्षा गरिन्छ ## अनुवाद प्रणाली ### स्वचालित अनुवाद - co-op-translator कार्यप्रवाहसहित GitHub Actions प्रयोग गर्दछ - स्वचालित रूपमा ५०+ भाषाहरूमा अनुवाद गर्दछ - मुख्य निर्देशिकाहरूमा स्रोत फाइलहरू - अनुवादित फाइलहरू `translations/{language-code}/` निर्देशिकाहरूमा ### म्यानुअल अनुवाद सुधारहरू थप्दै 1. `translations/{language-code}/` मा फाइल पत्ता लगाउनुहोस् 2. संरचना कायम राख्दै सुधारहरू गर्नुहोस् 3. कोड उदाहरणहरू कार्यात्मक रहन्छन् भनी सुनिश्चित गर्नुहोस् 4. कुनै स्थानीयकृत क्विज सामग्री परीक्षण गर्नुहोस् ### अनुवाद मेटाडाटा अनुवादित फाइलहरूमा मेटाडाटा हेडर समावेश: ```markdown ``` ## डिबगिङ र समस्या समाधान ### सामान्य समस्याहरू **क्विज एप सुरु हुँदैन**: - Node.js संस्करण जाँच गर्नुहोस् (v14+ सिफारिस गरिएको) - `node_modules` र `package-lock.json` मेटाउनुहोस्, फेरि `npm install` चलाउनुहोस् - पोर्ट द्वन्द्व जाँच गर्नुहोस् (डिफल्ट: Vite पोर्ट 5173 प्रयोग गर्छ) **API सर्भर सुरु हुँदैन**: - Node.js संस्करण न्यूनतम आवश्यकताहरू पूरा गर्छ भनी सुनिश्चित गर्नुहोस् (node >=10) - पोर्ट पहिले नै प्रयोगमा छ भनी जाँच गर्नुहोस् - `npm install` प्रयोग गरेर सबै निर्भरता स्थापना सुनिश्चित गर्नुहोस् **ब्राउजर एक्सटेन्सन लोड हुँदैन**: - manifest.json सही रूपमा फर्म्याट गरिएको छ भनी सुनिश्चित गर्नुहोस् - ब्राउजर कन्सोलमा त्रुटिहरू जाँच गर्नुहोस् - ब्राउजर-विशिष्ट एक्सटेन्सन स्थापना निर्देशनहरू पालना गर्नुहोस् **Python च्याट परियोजनामा समस्या**: - OpenAI प्याकेज स्थापना गरिएको छ भनी सुनिश्चित गर्नुहोस्: `pip install openai` - GITHUB_TOKEN वातावरण चर सेट गरिएको छ भनी सुनिश्चित गर्नुहोस् - GitHub Models पहुँच अनुमति जाँच गर्नुहोस् **Docsify दस्तावेजीकरण सेवा हुँदैन**: - docsify-cli ग्लोबल रूपमा स्थापना गर्नुहोस्: `npm install -g docsify-cli` - भण्डारको रूट निर्देशिकाबाट चलाउनुहोस् - `docs/_sidebar.md` अवस्थित छ भनी जाँच गर्नुहोस् ### विकास वातावरण सुझावहरू - HTML परियोजनाहरूका लागि VS Code Live Server एक्सटेन्सन प्रयोग गर्नुहोस् - निरन्तर फर्म्याटिङका लागि ESLint र Prettier एक्सटेन्सनहरू स्थापना गर्नुहोस् - जाभास्क्रिप्ट डिबगिङका लागि ब्राउजर DevTools प्रयोग गर्नुहोस् - Vue परियोजनाहरूका लागि Vue DevTools ब्राउजर एक्सटेन्सन स्थापना गर्नुहोस् ### प्रदर्शन विचारहरू - अनुवादित फाइलहरूको ठूलो संख्या (५०+ भाषाहरू) का कारण पूर्ण क्लोनहरू ठूला हुन्छन् - shallow clone प्रयोग गर्नुहोस् यदि केवल सामग्रीमा काम गर्दै हुनुहुन्छ भने: `git clone --depth 1` - अंग्रेजी सामग्रीमा काम गर्दा अनुवादहरू खोजबाट बाहिर राख्नुहोस् - पहिलो रनमा निर्माण प्रक्रियाहरू ढिलो हुन सक्छन् (npm install, Vite build) ## सुरक्षा विचारहरू ### वातावरण चरहरू - API कुञ्जीहरू कहिल्यै भण्डारमा प्रतिबद्ध गर्नु हुँदैन - `.env` फाइलहरू प्रयोग गर्नुहोस् (पहिले नै `.gitignore` मा) - परियोजना README हरूमा आवश्यक वातावरण चरहरू दस्तावेज गर्नुहोस् ### Python परियोजनाहरू - भर्चुअल वातावरणहरू प्रयोग गर्नुहोस्: `python -m venv venv` - निर्भरता अद्यावधिक राख्नुहोस् - GitHub टोकनहरू न्यूनतम आवश्यक अनुमति राख्नुपर्छ ### GitHub Models पहुँच - GitHub Models का लागि व्यक्तिगत पहुँच टोकनहरू (PAT) आवश्यक - टोकनहरू वातावरण चरहरूका रूपमा भण्डारण गर्नुपर्छ - टोकनहरू वा प्रमाणहरू कहिल्यै प्रतिबद्ध नगर्नुहोस् ## थप नोटहरू ### लक्षित दर्शक - वेब विकासमा पूर्ण रूपमा नयाँ - विद्यार्थीहरू र आत्म-शिक्षार्थीहरू - कक्षाकोठामा पाठ्यक्रम प्रयोग गर्ने शिक्षकहरू - सामग्री पहुँचयोग्यताका लागि डिजाइन गरिएको छ र क्रमिक सीप निर्माणमा केन्द्रित छ ### शैक्षिक दर्शन - परियोजनामा आधारित सिकाइ दृष्टिकोण - बारम्बार ज्ञान जाँचहरू (क्विजहरू) - व्यावहारिक कोडिङ अभ्यासहरू - वास्तविक संसारको अनुप्रयोग उदाहरणहरू - फ्रेमवर्कहरू अघि आधारभूत कुरामा ध्यान केन्द्रित ### भण्डार मर्मत - सिक्नेहरू र योगदानकर्ताहरूको सक्रिय समुदाय - निर्भरता र सामग्रीमा नियमित अद्यावधिकहरू - मर्मतकर्ताहरूद्वारा मुद्दाहरू र छलफलहरू अनुगमन - GitHub Actions मार्फत अनुवाद अद्यावधिकहरू स्वचालित ### सम्बन्धित स्रोतहरू - [Microsoft Learn मोड्युलहरू](https://docs.microsoft.com/learn/) - [Student Hub स्रोतहरू](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) सिक्नेहरूका लागि सिफारिस गरिएको - थप पाठ्यक्रमहरू: Generative AI, Data Science, ML, IoT पाठ्यक्रमहरू उपलब्ध ### विशिष्ट परियोजनाहरूमा काम गर्दै व्यक्तिगत परियोजनाहरूमा विस्तृत निर्देशनहरूको लागि, README फाइलहरू हेर्नुहोस्: - `quiz-app/README.md` - Vue 3 क्विज एप्लिकेसन - `7-bank-project/README.md` - प्रमाणीकरणसहितको बैंकिङ एप्लिकेसन - `5-browser-extension/README.md` - ब्राउजर एक्सटेन्सन विकास - `6-space-game/README.md` - क्यानभास-आधारित गेम विकास - `9-chat-project/README.md` - AI च्याट सहायक परियोजना ### मोनोरिपो संरचना यद्यपि यो परम्परागत मोनोरिपो होइन, यो भण्डारमा धेरै स्वतन्त्र परियोजनाहरू समावेश छन्: - प्रत्येक पाठ आत्म-निहित छ - परियोजनाहरूले निर्भरता साझा गर्दैनन् - व्यक्तिगत परियोजनाहरूमा काम गर्दा अरूमा असर गर्दैन - पूर्ण पाठ्यक्रम अनुभवका लागि सम्पूर्ण भण्डार क्लोन गर्नुहोस् --- **अस्वीकरण**: यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरी अनुवाद गरिएको हो। हामी यथासम्भव सटीकता सुनिश्चित गर्न प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छन्। यसको मूल भाषामा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीका लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।