├── .DS_Store ├── .gitignore ├── .gitmodules ├── 01. HTML CSS ├── .DS_Store ├── 01. Orientation Class - hello_world_website │ └── index.html ├── 02. Structural and semantic markups │ └── index.html ├── 03. lists │ └── index.html ├── 04. Links │ ├── about.html │ ├── contact.html │ ├── index.html │ └── service │ │ └── services.html ├── 05. images │ ├── .DS_Store │ ├── images │ │ ├── github.png │ │ ├── laptop.jpg │ │ └── laptop960.jpg │ └── index.html ├── 06. tables │ ├── .DS_Store │ └── index.html ├── 07. forms │ └── index.html ├── 08. css hello world │ ├── index.html │ └── style.css ├── 09. css selectors │ ├── index.html │ └── style.css ├── 10. text │ ├── fonts │ │ └── Roboto-Light.ttf │ └── index.html ├── 11. Boxes │ └── index.html ├── 12. Media query │ └── index.html ├── 13. Flexbox │ ├── download.png │ ├── flex box plan.png │ ├── flexbox task.png │ ├── images │ │ └── logo.webp │ └── index.html ├── 14. Flexbox task │ ├── .DS_Store │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ └── 5.png ├── 15. Man-Hair-Salon-master │ ├── .DS_Store │ ├── .gitattributes │ ├── blog-default.html │ ├── blog-single.html │ ├── contact.html │ ├── css │ │ ├── bootstrap.min.css │ │ ├── font-awesome.min.css │ │ └── style.css │ ├── fonts │ │ ├── .DS_Store │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ ├── fontawesome-webfont.woff2 │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── images │ │ ├── .DS_Store │ │ ├── about-img.jpg │ │ ├── aligntright.jpg │ │ ├── author.jpg │ │ ├── cta-section-img.jpg │ │ ├── hero-img.jpg │ │ ├── left-image.jpg │ │ ├── logo-old.png │ │ ├── logo.png │ │ ├── page-header.jpg │ │ ├── post-img-1.jpg │ │ ├── post-img-2.jpg │ │ ├── post-img-large-1.jpg │ │ ├── post-img.jpg │ │ ├── recent-post-img-1.jpg │ │ ├── recent-post-img-2.jpg │ │ ├── recent-post-img.jpg │ │ ├── related-post-1.jpg │ │ ├── related-post.jpg │ │ ├── service-icon-1.png │ │ ├── service-icon-2.png │ │ ├── service-icon-3.png │ │ ├── service-single.jpg │ │ ├── sticky.png │ │ ├── user-pic-1.jpg │ │ ├── user-pic-2.jpg │ │ ├── user-pic-3.jpg │ │ └── user-pic-4.jpg │ ├── index.html │ ├── js │ │ ├── .DS_Store │ │ ├── back-to-top.js │ │ ├── bootstrap.min.js │ │ ├── jquery.min.js │ │ ├── jquery.sticky.js │ │ ├── menumaker.js │ │ ├── menumaker.min.js │ │ ├── slider-carousel.js │ │ └── sticky-header.js │ ├── service-detail.html │ ├── service-list.html │ ├── styleguide.html │ └── testimonial.html └── 16. positions │ ├── .DS_Store │ └── index.html ├── 02. javascript ├── .DS_Store ├── 01. hello world │ ├── app.js │ └── index.html ├── 02. variables │ └── index.html ├── 03. number variables │ └── index.html ├── 04. legal illegal names │ └── index.html ├── 05. input output and math expressions familiar operator │ └── index.html ├── 06. even odd program without if else │ └── index.html ├── 07. math exp, unfamiliar operator │ └── index.html ├── 08. condition checking │ └── index.html ├── 08. weather checking app with if else │ └── index.html ├── 09. comparision operators │ └── index.html ├── 10. logical operators │ ├── index.html │ └── number scale.png ├── 11. nested if statment │ └── index.html ├── 12.Array │ └── index.html ├── 13. memory allocation │ ├── index.html │ └── memory allocation.png ├── 14. 2D Array │ └── index.html ├── 15. cloning array │ └── index.html ├── 16. destructuring array │ └── index.html ├── 17. array methods │ └── index.html ├── 18. array looping │ └── index.html ├── 19. print table with for loop │ └── index.html ├── 20. array with for loop │ └── index.html ├── 21. nested array with nested loop │ └── index.html ├── 22. ternery operator │ └── index.html ├── 23. Switch case │ └── index.html ├── 24. functions │ └── index.html ├── 25. functions library │ └── index.html ├── 26. es6 arrow function │ └── index.html ├── 27. Matrix sum with nested loop │ └── index.html ├── 28. es6 objects │ └── index.html ├── 29. Weather app task │ └── index.html └── 30. client │ └── index.html ├── 03. nodejs ├── .DS_Store ├── 1. nodejs hello world │ └── index.mjs ├── 2. hello world server │ ├── .gitignore │ ├── index.mjs │ ├── package-lock.json │ └── package.json ├── 3. heroku deployment │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ └── server.mjs ├── 4. restful-api-server-heroku │ ├── .DS_Store │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── server.mjs ├── 5. restful api principles │ └── readme.txt ├── 6. express login signup without database │ ├── .DS_Store │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── server.mjs ├── 7. express login signup with database │ ├── .DS_Store │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ └── server.mjs └── 8. product list (CRUD operation) │ ├── .DS_Store │ ├── .gitignore │ ├── img │ └── airpod.webp │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── products.html │ └── server.mjs ├── 04. ReactJs ├── .DS_Store ├── 1. Hello world │ └── index.html ├── 10. auth guard - login signup │ ├── .DS_Store │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── assets │ │ └── background.jpeg │ │ ├── components │ │ ├── about │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── gallery │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── home │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── login │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── navbar │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── profile │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── signup │ │ │ ├── index.css │ │ │ └── index.jsx │ │ └── weatherCard │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── context │ │ ├── context.js │ │ └── reducer.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── 11. eCommerce CRUD │ ├── .DS_Store │ ├── .github │ │ └── workflows │ │ │ ├── firebase-hosting-merge.yml │ │ │ └── firebase-hosting-pull-request.yml │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ │ ├── .firebase │ │ └── hosting.YnVpbGQ.cache │ │ ├── .firebaserc │ │ ├── .gitignore │ │ ├── README.md │ │ ├── firebase.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── .well-known │ │ │ └── assetlinks.json │ │ ├── android │ │ │ ├── android-launchericon-144-144.png │ │ │ ├── android-launchericon-192-192.png │ │ │ ├── android-launchericon-48-48.png │ │ │ ├── android-launchericon-512-512.png │ │ │ ├── android-launchericon-72-72.png │ │ │ └── android-launchericon-96-96.png │ │ ├── favicon.ico │ │ ├── icons.json │ │ ├── index.html │ │ ├── ios │ │ │ ├── 100.png │ │ │ ├── 1024.png │ │ │ ├── 114.png │ │ │ ├── 120.png │ │ │ ├── 128.png │ │ │ ├── 144.png │ │ │ ├── 152.png │ │ │ ├── 16.png │ │ │ ├── 167.png │ │ │ ├── 180.png │ │ │ ├── 192.png │ │ │ ├── 20.png │ │ │ ├── 256.png │ │ │ ├── 29.png │ │ │ ├── 32.png │ │ │ ├── 40.png │ │ │ ├── 50.png │ │ │ ├── 512.png │ │ │ ├── 57.png │ │ │ ├── 58.png │ │ │ ├── 60.png │ │ │ ├── 64.png │ │ │ ├── 72.png │ │ │ ├── 76.png │ │ │ ├── 80.png │ │ │ └── 87.png │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ ├── screenshot1.png │ │ ├── screenshot2.png │ │ ├── sw.js │ │ └── windows11 │ │ │ ├── LargeTile.scale-100.png │ │ │ ├── LargeTile.scale-125.png │ │ │ ├── LargeTile.scale-150.png │ │ │ ├── LargeTile.scale-200.png │ │ │ ├── LargeTile.scale-400.png │ │ │ ├── SmallTile.scale-100.png │ │ │ ├── SmallTile.scale-125.png │ │ │ ├── SmallTile.scale-150.png │ │ │ ├── SmallTile.scale-200.png │ │ │ ├── SmallTile.scale-400.png │ │ │ ├── SplashScreen.scale-100.png │ │ │ ├── SplashScreen.scale-125.png │ │ │ ├── SplashScreen.scale-150.png │ │ │ ├── SplashScreen.scale-200.png │ │ │ ├── SplashScreen.scale-400.png │ │ │ ├── Square150x150Logo.scale-100.png │ │ │ ├── Square150x150Logo.scale-125.png │ │ │ ├── Square150x150Logo.scale-150.png │ │ │ ├── Square150x150Logo.scale-200.png │ │ │ ├── Square150x150Logo.scale-400.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-16.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-20.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-24.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-256.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-30.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-32.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-36.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-40.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-44.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-48.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-60.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-64.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-72.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-80.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-96.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-16.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-20.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-24.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-256.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-30.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-32.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-36.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-40.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-44.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-48.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-60.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-64.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-72.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-80.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-96.png │ │ │ ├── Square44x44Logo.scale-100.png │ │ │ ├── Square44x44Logo.scale-125.png │ │ │ ├── Square44x44Logo.scale-150.png │ │ │ ├── Square44x44Logo.scale-200.png │ │ │ ├── Square44x44Logo.scale-400.png │ │ │ ├── Square44x44Logo.targetsize-16.png │ │ │ ├── Square44x44Logo.targetsize-20.png │ │ │ ├── Square44x44Logo.targetsize-24.png │ │ │ ├── Square44x44Logo.targetsize-256.png │ │ │ ├── Square44x44Logo.targetsize-30.png │ │ │ ├── Square44x44Logo.targetsize-32.png │ │ │ ├── Square44x44Logo.targetsize-36.png │ │ │ ├── Square44x44Logo.targetsize-40.png │ │ │ ├── Square44x44Logo.targetsize-44.png │ │ │ ├── Square44x44Logo.targetsize-48.png │ │ │ ├── Square44x44Logo.targetsize-60.png │ │ │ ├── Square44x44Logo.targetsize-64.png │ │ │ ├── Square44x44Logo.targetsize-72.png │ │ │ ├── Square44x44Logo.targetsize-80.png │ │ │ ├── Square44x44Logo.targetsize-96.png │ │ │ ├── StoreLogo.scale-100.png │ │ │ ├── StoreLogo.scale-125.png │ │ │ ├── StoreLogo.scale-150.png │ │ │ ├── StoreLogo.scale-200.png │ │ │ ├── StoreLogo.scale-400.png │ │ │ ├── Wide310x150Logo.scale-100.png │ │ │ ├── Wide310x150Logo.scale-125.png │ │ │ ├── Wide310x150Logo.scale-150.png │ │ │ ├── Wide310x150Logo.scale-200.png │ │ │ └── Wide310x150Logo.scale-400.png │ │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── assets │ │ └── background.jpeg │ │ ├── components │ │ ├── login │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── navbar │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── products │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── profile │ │ │ ├── index.css │ │ │ └── index.jsx │ │ └── signup │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── context │ │ ├── context.js │ │ └── reducer.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── 12. fileupload │ ├── .DS_Store │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── 2. hello world in your computer │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ └── index.js ├── 3. Dynamic Resuable Components │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── img │ │ └── bus.jpg │ │ ├── index.css │ │ └── index.js ├── 4. Stateful component │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── img │ │ └── bus.jpg │ │ ├── index.css │ │ └── index.js ├── 5. useEffect │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── img │ │ └── bus.jpg │ │ ├── index.css │ │ └── index.jsx ├── 6. React Weather App │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ ├── about │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── gallery │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── home │ │ │ ├── index.css │ │ │ └── index.jsx │ │ └── weatherCard │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── 7. Routing - login signup │ ├── .DS_Store │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── components │ │ ├── about │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── gallery │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── home │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── login │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── signup │ │ │ ├── index.css │ │ │ └── index.jsx │ │ └── weatherCard │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── 8. Context Api - login signup │ ├── .DS_Store │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── components │ │ ├── about │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── gallery │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── home │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── login │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── navbar │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── signup │ │ │ ├── index.css │ │ │ └── index.jsx │ │ └── weatherCard │ │ │ ├── index.css │ │ │ └── index.jsx │ │ ├── context.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reducer.js │ │ ├── reportWebVitals.js │ │ └── setupTests.js └── 9. JWT authentication - login signup │ ├── .DS_Store │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── server.mjs │ └── web │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.jsx │ ├── App.test.js │ ├── components │ ├── about │ │ ├── index.css │ │ └── index.jsx │ ├── gallery │ │ ├── index.css │ │ └── index.jsx │ ├── home │ │ ├── index.css │ │ └── index.jsx │ ├── login │ │ ├── index.css │ │ └── index.jsx │ ├── navbar │ │ ├── index.css │ │ └── index.jsx │ ├── profile │ │ ├── index.css │ │ └── index.jsx │ ├── signup │ │ ├── index.css │ │ └── index.jsx │ └── weatherCard │ │ ├── index.css │ │ └── index.jsx │ ├── context.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reducer.js │ ├── reportWebVitals.js │ └── setupTests.js ├── LICENSE ├── README.md └── Web Development Course - Sir Inzamam Malik.pdf /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/.DS_Store -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/.gitmodules -------------------------------------------------------------------------------- /01. HTML CSS/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/01. Orientation Class - hello_world_website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my bio website 9 | 10 | 11 | 12 | 13 |

My Bio Data

14 | 15 | My name is Inzamam Malik 16 | I live in Karachi 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /01. HTML CSS/02. Structural and semantic markups/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

hello world

13 |

hello world

14 |

15 | this is a simple paragraph. 16 |

Now go to the File menu and select Save as... 17 | You will need to save the file somewhere you can remember. 18 | If you like, you could create a folder for any examples 19 | that you try out from this book. Save this file as first-test.html. You will probably see a window like 20 | the 21 | screen shot to the left. 22 |

23 | 24 |

25 | Prof 26 | Stephen Hawking is a theoretical physicist and cosmologist. 27 |

28 |

29 | 30 | NASA 31 | 32 | do some crazy space stuff. 33 |

34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /01. HTML CSS/03. lists/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /01. HTML CSS/04. Links/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | Home 12 | Services 13 | Contact 14 | About 15 | 16 |

About Page

17 | 18 |

19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /01. HTML CSS/04. Links/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | Home 11 | Services 12 | Contact 13 | About 14 | 15 | 16 |

Contact Page

17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /01. HTML CSS/04. Links/service/services.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | Home 14 | Services 15 | Contact 16 | About 17 | 18 | 19 |

Service Page

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /01. HTML CSS/05. images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/05. images/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/05. images/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/05. images/images/github.png -------------------------------------------------------------------------------- /01. HTML CSS/05. images/images/laptop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/05. images/images/laptop.jpg -------------------------------------------------------------------------------- /01. HTML CSS/05. images/images/laptop960.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/05. images/images/laptop960.jpg -------------------------------------------------------------------------------- /01. HTML CSS/05. images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

14 | This tells the browser where 15 | it can find the image file. This will usually be a relative URL pointing to an image on your own site. (Here you 16 | can see that the images are in a child folder called images — relative URLs were covered on pages 83-84). 17 |

18 | 19 | 20 | A woman is working on laptop and ipad 22 | 23 | 24 |

25 | This tells the browser where 26 | it can find the image file. This will usually be a relative URL pointing to an image on your own site. (Here you 27 | can see that the images are in a child folder called images — relative URLs were covered on pages 83-84). 28 |

29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /01. HTML CSS/06. tables/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/06. tables/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/08. css hello world/style.css: -------------------------------------------------------------------------------- 1 | .heading1 { 2 | color: royalblue; 3 | } 4 | 5 | input { 6 | border: 1px solid red; 7 | } -------------------------------------------------------------------------------- /01. HTML CSS/09. css selectors/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * { 3 | color: red; 4 | } 5 | */ 6 | 7 | 8 | /* p { 9 | background-color: rgb(255, 163, 110); 10 | } */ 11 | 12 | 13 | #introduction { 14 | background-color: rgb(255, 163, 110); 15 | } 16 | 17 | 18 | .note { 19 | background-color: rgb(255, 245, 158); 20 | font-style: italic; 21 | } 22 | 23 | p.note { 24 | border: 1px solid green; 25 | border-radius: 10px; 26 | } 27 | 28 | li>a { 29 | color: green 30 | } 31 | 32 | 33 | span+p { 34 | background-color: red; 35 | } 36 | span+p{ 37 | background-color: rgb(195, 163, 240); 38 | } 39 | p { 40 | background-color: aqua; 41 | } 42 | 43 | span~p { 44 | border: 2px solid purple; 45 | } 46 | 47 | #firstChild { 48 | color: rgb(0, 255, 4); 49 | } 50 | 51 | #firstChild+span { 52 | color: rgb(183, 252, 184); 53 | 54 | } 55 | 56 | #firstChild+span+span { 57 | color: rgb(124, 124, 124); 58 | 59 | } 60 | 61 | #firstChild+span+span+span { 62 | color: rgb(255, 45, 45); 63 | 64 | } 65 | 66 | #firstChild { 67 | color: rgb(255, 45, 45); 68 | } 69 | 70 | p{ 71 | color: #636394; 72 | } -------------------------------------------------------------------------------- /01. HTML CSS/10. text/fonts/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/10. text/fonts/Roboto-Light.ttf -------------------------------------------------------------------------------- /01. HTML CSS/12. Media query/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 34 | 35 | 36 | 37 | 38 |

Media Query

39 | 40 | 41 |
42 | this is a div 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01. HTML CSS/13. Flexbox/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/13. Flexbox/download.png -------------------------------------------------------------------------------- /01. HTML CSS/13. Flexbox/flex box plan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/13. Flexbox/flex box plan.png -------------------------------------------------------------------------------- /01. HTML CSS/13. Flexbox/flexbox task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/13. Flexbox/flexbox task.png -------------------------------------------------------------------------------- /01. HTML CSS/13. Flexbox/images/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/13. Flexbox/images/logo.webp -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/1.png -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/2.png -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/3.png -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/4.png -------------------------------------------------------------------------------- /01. HTML CSS/14. Flexbox task/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/14. Flexbox task/5.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/about-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/about-img.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/aligntright.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/aligntright.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/author.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/cta-section-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/cta-section-img.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/hero-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/hero-img.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/left-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/left-image.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/logo-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/logo-old.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/logo.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/page-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/page-header.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-1.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-2.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-large-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/post-img-large-1.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/post-img.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img-1.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img-2.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/recent-post-img.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/related-post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/related-post-1.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/related-post.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/related-post.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-1.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-2.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/service-icon-3.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/service-single.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/service-single.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/sticky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/sticky.png -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-1.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-2.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-3.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/images/user-pic-4.jpg -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/15. Man-Hair-Salon-master/js/.DS_Store -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/js/back-to-top.js: -------------------------------------------------------------------------------- 1 | $(document).on('ready', function() { 2 | // browser window scroll (in pixels) after which the "back to top" link is shown 3 | var offset = 300, 4 | //browser window scroll (in pixels) after which the "back to top" link opacity is reduced 5 | offset_opacity = 1200, 6 | //duration of the top scrolling animation (in ms) 7 | scroll_top_duration = 700, 8 | //grab the "back to top" link 9 | $back_to_top = $('.cd-top'); 10 | 11 | //hide or show the "back to top" link 12 | $(window).scroll(function(){ 13 | ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); 14 | if( $(this).scrollTop() > offset_opacity ) { 15 | $back_to_top.addClass('cd-fade-out'); 16 | } 17 | }); 18 | 19 | //smooth scroll to top 20 | $back_to_top.on('click', function(event){ 21 | event.preventDefault(); 22 | $('body,html').animate({ 23 | scrollTop: 0 , 24 | }, scroll_top_duration 25 | ); 26 | }); 27 | 28 | }); -------------------------------------------------------------------------------- /01. HTML CSS/15. Man-Hair-Salon-master/js/sticky-header.js: -------------------------------------------------------------------------------- 1 | // JavaScript Document 2 | 3 | $(document).ready(function(){ 4 | "use strict"; 5 | if( $( window ).width() >= "768" ) { 6 | $(".header").sticky({topSpacing:0}); 7 | } 8 | 9 | }); 10 | -------------------------------------------------------------------------------- /01. HTML CSS/16. positions/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/01. HTML CSS/16. positions/.DS_Store -------------------------------------------------------------------------------- /02. javascript/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/02. javascript/.DS_Store -------------------------------------------------------------------------------- /02. javascript/01. hello world/app.js: -------------------------------------------------------------------------------- 1 | alert(`Hello world Inzamam`); 2 | -------------------------------------------------------------------------------- /02. javascript/01. hello world/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |

JavaScript Hello World

15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /02. javascript/02. variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Variables

13 | 14 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /02. javascript/03. number variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Number Variables

14 | 15 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /02. javascript/08. condition checking/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Condition Checking with If statment

14 | 15 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /02. javascript/09. comparision operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Comparison Operators

11 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /02. javascript/10. logical operators/number scale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/02. javascript/10. logical operators/number scale.png -------------------------------------------------------------------------------- /02. javascript/11. nested if statment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Nested If statement

14 | 15 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /02. javascript/13. memory allocation/memory allocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/02. javascript/13. memory allocation/memory allocation.png -------------------------------------------------------------------------------- /02. javascript/16. destructuring array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

de-structuring array

13 | 14 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /02. javascript/17. array methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Array Methods

13 | 14 | 15 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /02. javascript/18. array looping/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Array loop through

14 | 15 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /02. javascript/19. print table with for loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Table

13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 |
24 | 25 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /02. javascript/25. functions library/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |

15 | function library 16 |

17 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /03. nodejs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/.DS_Store -------------------------------------------------------------------------------- /03. nodejs/1. nodejs hello world/index.mjs: -------------------------------------------------------------------------------- 1 | console.log("Hello world Nodejs"); 2 | 3 | let userName = "John"; 4 | 5 | console.log("userName: ", userName); -------------------------------------------------------------------------------- /03. nodejs/2. hello world server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /03. nodejs/2. hello world server/index.mjs: -------------------------------------------------------------------------------- 1 | import express from 'express' 2 | const app = express() 3 | const port = 3000 4 | 5 | app.get('/', (req, res) => { 6 | res.send('Hello World!') 7 | }) 8 | 9 | app.listen(port, () => { 10 | console.log(`Hello world server listening on port ${port}`) 11 | }) -------------------------------------------------------------------------------- /03. nodejs/2. hello world server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2.-hello-world-server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.18.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /03. nodejs/3. heroku deployment/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /03. nodejs/3. heroku deployment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world-server-nodejs", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "start": "node server.mjs" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/malikasinger1/hello-world-server-nodejs.git" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/malikasinger1/hello-world-server-nodejs/issues" 17 | }, 18 | "homepage": "https://github.com/malikasinger1/hello-world-server-nodejs#readme", 19 | "description": "", 20 | "dependencies": { 21 | "cors": "^2.8.5", 22 | "express": "^4.18.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /03. nodejs/3. heroku deployment/server.mjs: -------------------------------------------------------------------------------- 1 | import express from 'express' 2 | import cors from 'cors'; 3 | 4 | const app = express(); 5 | app.use(cors()); 6 | 7 | app.get('/home', (req, res) => { 8 | res.send('I am home page!') 9 | }) 10 | 11 | app.get('/profile', (req, res) => { 12 | res.send('I am profile page!') 13 | }) 14 | app.get('/weather', (req, res) => { 15 | 16 | res.send({ 17 | weather: 'sunny', 18 | temperature: '20', 19 | city: 'London' 20 | }) 21 | 22 | }) 23 | 24 | const port = process.env.PORT || 3000; 25 | 26 | app.listen(port, () => { 27 | console.log(`Example app listening on port ${port}`) 28 | }) -------------------------------------------------------------------------------- /03. nodejs/4. restful-api-server-heroku/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/4. restful-api-server-heroku/.DS_Store -------------------------------------------------------------------------------- /03. nodejs/4. restful-api-server-heroku/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /03. nodejs/4. restful-api-server-heroku/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 13 | }, 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 18 | }, 19 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 20 | "dependencies": { 21 | "cors": "^2.8.5", 22 | "express": "^4.18.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /03. nodejs/6. express login signup without database/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/6. express login signup without database/.DS_Store -------------------------------------------------------------------------------- /03. nodejs/6. express login signup without database/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /03. nodejs/6. express login signup without database/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "cors": "^2.8.5", 23 | "express": "^4.18.1", 24 | "nanoid": "^4.0.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /03. nodejs/7. express login signup with database/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/7. express login signup with database/.DS_Store -------------------------------------------------------------------------------- /03. nodejs/7. express login signup with database/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /03. nodejs/7. express login signup with database/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cors": "^2.8.5", 24 | "express": "^4.18.1", 25 | "mongoose": "^6.5.2", 26 | "nanoid": "^4.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /03. nodejs/8. product list (CRUD operation)/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/8. product list (CRUD operation)/.DS_Store -------------------------------------------------------------------------------- /03. nodejs/8. product list (CRUD operation)/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /03. nodejs/8. product list (CRUD operation)/img/airpod.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/03. nodejs/8. product list (CRUD operation)/img/airpod.webp -------------------------------------------------------------------------------- /03. nodejs/8. product list (CRUD operation)/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cors": "^2.8.5", 24 | "express": "^4.18.1", 25 | "mongoose": "^6.5.2", 26 | "nanoid": "^4.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /04. ReactJs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/1. Hello world/index.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cookie-parser": "^1.4.6", 24 | "cors": "^2.8.5", 25 | "express": "^4.18.1", 26 | "jsonwebtoken": "^8.5.1", 27 | "mongoose": "^6.5.2", 28 | "nanoid": "^4.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/App.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | height: 100vh; 3 | background-color: #150F11; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .loading>div { 11 | color: white; 12 | } 13 | .loading>img { 14 | width: 100%; 15 | 16 | } -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/assets/background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/assets/background.jpeg -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/about/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/about/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/about/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | 4 | 5 | let About = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am About component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default About; 24 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/gallery/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/gallery/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/gallery/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context/context'; 3 | 4 | 5 | let Gallery = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am Gallery component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default Gallery; 24 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/home/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/home/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/login/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/login/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/navbar/index.css: -------------------------------------------------------------------------------- 1 | .nav{ 2 | background-color: black; 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | .nav>ul { 8 | display: flex; 9 | list-style: none; 10 | justify-content: flex-end; 11 | 12 | } 13 | 14 | .nav>ul>li { 15 | /* border: 1px solid black; */ 16 | margin: 10px; 17 | padding: 5px 10px 5px 10px; 18 | border-radius: 10px; 19 | background-color: #0d6efd; 20 | font-size: 10px; 21 | } 22 | 23 | .nav>ul>li>a { 24 | text-decoration: none; 25 | color: white; 26 | } 27 | 28 | .nav > .userName { 29 | color: white; 30 | margin: 10px; 31 | padding: 5px 10px 5px 10px; 32 | } -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/profile/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/profile/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/profile/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useState } from "react"; 2 | import { GlobalContext } from '../../context/context'; 3 | import axios from "axios"; 4 | 5 | let Profile = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | 11 | 12 | return ( 13 |
14 | {(state.user === null) ? 15 |
Loading...
16 | : 17 |
18 | _id: {state.user?._id} 19 |
20 | name: {state.user?.firstName} {state.user?.lastName} 21 |
22 | email: {state.user?.email} 23 |
24 | age: {state.user?.age} 25 |
26 | } 27 | 28 |
29 | ); 30 | } 31 | 32 | export default Profile; 33 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/signup/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/10. auth guard - login signup/web/src/components/signup/index.css -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/weatherCard/index.css: -------------------------------------------------------------------------------- 1 | .card { 2 | 3 | border: 1px solid black; 4 | border-radius: 30px; 5 | margin: 20px; 6 | padding:20px; 7 | background-color: whitesmoke; 8 | 9 | } -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/components/weatherCard/index.jsx: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | import moment from "moment"; 3 | import { Card, Button } from 'react-bootstrap' 4 | 5 | let WeatherCard = ({ date, temp, min, max }) => { 6 | return ( 7 | //
8 | 9 | //
{moment(date).format("dddd ha")}
10 | //

{temp}°C

11 | //
{min}°C - {max}°C
12 | //
13 | 14 | 18 | 19 | {moment(date).format("dddd ha")} 20 | 21 |

{temp}°C

22 | 23 | {min}°C - {max}°C 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default WeatherCard; 31 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/context/context.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react' 2 | import { reducer } from './reducer'; 3 | 4 | 5 | export const GlobalContext = createContext("Initial Value"); 6 | 7 | 8 | let data = { 9 | user: {}, 10 | isLogin: null, 11 | darkTheme: true, 12 | myNum: 5 13 | } 14 | 15 | 16 | export default function ContextProvider({ children }) { 17 | const [state, dispatch] = useReducer(reducer, data) 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/context/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | 3 | switch (action.type) { 4 | case "ADD": { 5 | return { ...state, myNum: state.myNum + 1 } 6 | } 7 | case "SUB": { 8 | return { ...state, myNum: state.myNum - 1 } 9 | } 10 | case "USER_LOGIN": { 11 | return { ...state, user: action.payload, isLogin: true } 12 | } 13 | case "USER_LOGOUT": { 14 | return { ...state, user: null, isLogin: false } 15 | } 16 | case "CHANGE_THEME": { 17 | return { ...state, darkTheme: !state.darkTheme } 18 | } 19 | default: { 20 | return state 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | import ContextProvider from "./context/context" 8 | 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/10. auth guard - login signup/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/.github/workflows/firebase-hosting-merge.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on merge 5 | 'on': 6 | push: 7 | branches: 8 | - main 9 | jobs: 10 | build_and_deploy: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: FirebaseExtended/action-hosting-deploy@v0 15 | with: 16 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 17 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ECOM_25516 }}' 18 | channelId: live 19 | projectId: ecom-25516 20 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/.github/workflows/firebase-hosting-pull-request.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on PR 5 | 'on': pull_request 6 | jobs: 7 | build_and_preview: 8 | if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: FirebaseExtended/action-hosting-deploy@v0 13 | with: 14 | repoToken: '${{ secrets.GITHUB_TOKEN }}' 15 | firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ECOM_25516 }}' 16 | projectId: ecom-25516 17 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cookie-parser": "^1.4.6", 24 | "cors": "^2.8.5", 25 | "express": "^4.18.1", 26 | "jsonwebtoken": "^8.5.1", 27 | "mongoose": "^6.5.2" 28 | } 29 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "ecom-25516" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/.well-known/assetlinks.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "relation": ["delegate_permission/common.handle_all_urls"], 3 | "target" : { "namespace": "android_app", "package_name": "app.web.ecom_25516.twa", 4 | "sha256_cert_fingerprints": ["DD:54:DC:64:B4:A3:30:96:2E:1D:67:F6:E8:C2:D0:CF:E5:D7:C0:06:59:DD:33:DA:96:D6:F7:FC:82:0C:C3:84"] } 5 | } 6 | ] -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-144-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-144-144.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-192-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-192-192.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-48-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-48-48.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-512-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-512-512.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-72-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-72-72.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-96-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/android/android-launchericon-96-96.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/icons.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/icons.json -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/1024.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/114.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/120.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/128.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/144.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/152.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/16.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/167.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/180.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/192.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/20.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/256.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/29.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/32.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/40.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/50.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/512.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/57.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/58.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/60.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/64.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/72.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/76.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/80.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/ios/87.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/ios/87.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/screenshot1.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/screenshot2.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/LargeTile.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SmallTile.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/SplashScreen.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square150x150Logo.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-16.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-20.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-24.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-256.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-30.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-32.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-36.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-40.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-44.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-48.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-60.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-64.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-72.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-80.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.altform-unplated_targetsize-96.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-16.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-20.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-24.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-256.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-30.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-32.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-36.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-40.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-44.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-48.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-60.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-64.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-72.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-80.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Square44x44Logo.targetsize-96.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/StoreLogo.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-100.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-125.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-150.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-200.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/public/windows11/Wide310x150Logo.scale-400.png -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/App.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | height: 100vh; 3 | background-color: #150F11; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .loading>div { 11 | color: white; 12 | } 13 | .loading>img { 14 | width: 100%; 15 | 16 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/assets/background.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/src/assets/background.jpeg -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/login/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/src/components/login/index.css -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/navbar/index.css: -------------------------------------------------------------------------------- 1 | .nav{ 2 | background-color: black; 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | .nav>ul { 8 | display: flex; 9 | list-style: none; 10 | justify-content: flex-end; 11 | 12 | } 13 | 14 | .nav>ul>li { 15 | /* border: 1px solid black; */ 16 | margin: 10px; 17 | padding: 5px 10px 5px 10px; 18 | border-radius: 10px; 19 | background-color: #0d6efd; 20 | font-size: 10px; 21 | } 22 | 23 | .nav>ul>li>a { 24 | text-decoration: none; 25 | color: white; 26 | } 27 | 28 | .nav > .userName { 29 | color: white; 30 | margin: 10px; 31 | padding: 5px 10px 5px 10px; 32 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/products/index.css: -------------------------------------------------------------------------------- 1 | .errorMessage{ 2 | color: red; 3 | font-size: 10px; 4 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/profile/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/src/components/profile/index.css -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/profile/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useState } from "react"; 2 | import { GlobalContext } from '../../context/context'; 3 | import axios from "axios"; 4 | 5 | let Profile = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | 11 | 12 | return ( 13 |
14 | {(state.user === null) ? 15 |
Loading...
16 | : 17 |
18 | _id: {state.user?._id} 19 |
20 | name: {state.user?.firstName} {state.user?.lastName} 21 |
22 | email: {state.user?.email} 23 |
24 | age: {state.user?.age} 25 |
26 | } 27 | 28 |
29 | ); 30 | } 31 | 32 | export default Profile; 33 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/components/signup/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/11. eCommerce CRUD/web/src/components/signup/index.css -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/context/context.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react' 2 | import { reducer } from './reducer'; 3 | 4 | 5 | export const GlobalContext = createContext("Initial Value"); 6 | 7 | 8 | let data = { 9 | user: {}, 10 | isLogin: null, 11 | darkTheme: true, 12 | myNum: 5, 13 | baseUrl: (window.location.href.indexOf("https") === -1) ? "http://localhost:5001" : "https://ecommerce-crud-production.up.railway.app" 14 | } 15 | 16 | export default function ContextProvider({ children }) { 17 | const [state, dispatch] = useReducer(reducer, data) 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/context/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | 3 | switch (action.type) { 4 | case "ADD": { 5 | return { ...state, myNum: state.myNum + 1 } 6 | } 7 | case "SUB": { 8 | return { ...state, myNum: state.myNum - 1 } 9 | } 10 | case "USER_LOGIN": { 11 | return { ...state, user: action.payload, isLogin: true } 12 | } 13 | case "USER_LOGOUT": { 14 | return { ...state, user: null, isLogin: false } 15 | } 16 | case "CHANGE_THEME": { 17 | return { ...state, darkTheme: !state.darkTheme } 18 | } 19 | default: { 20 | return state 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | import ContextProvider from "./context/context" 8 | 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/11. eCommerce CRUD/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/12. fileupload/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "12.-fileupload", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "bcrypt-inzi": "^1.0.7", 15 | "cors": "^2.8.5", 16 | "express": "^4.18.2", 17 | "firebase-admin": "^11.1.0", 18 | "mongoose": "^6.6.5", 19 | "multer": "^1.4.5-lts.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fileupload", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.1.2", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/12. fileupload/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/12. fileupload/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/12. fileupload/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/12. fileupload/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/2. hello world in your computer/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/2. hello world in your computer/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/2. hello world in your computer/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/2. hello world in your computer/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | function Hi() { 5 | return
Hello World!
; 6 | } 7 | 8 | ReactDOM.render(, document.querySelector('#root')); -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/3. Dynamic Resuable Components/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/3. Dynamic Resuable Components/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/3. Dynamic Resuable Components/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/src/img/bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/3. Dynamic Resuable Components/src/img/bus.jpg -------------------------------------------------------------------------------- /04. ReactJs/3. Dynamic Resuable Components/src/index.css: -------------------------------------------------------------------------------- 1 | .red { 2 | color: red; 3 | } 4 | 5 | .green { 6 | color: green; 7 | } 8 | 9 | .box { 10 | border: 1px solid black 11 | } 12 | 13 | .mediaCard { 14 | border: 1px solid black; 15 | padding: 20px; 16 | margin-bottom: 15px 17 | } -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/4. Stateful component/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/4. Stateful component/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/4. Stateful component/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/src/img/bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/4. Stateful component/src/img/bus.jpg -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/src/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #root, 4 | .room { 5 | height: 100%; 6 | margin: 0; 7 | } 8 | 9 | .lit { 10 | background-color: white; 11 | color: black; 12 | } 13 | 14 | .dark { 15 | background-color: black; 16 | color: white; 17 | } -------------------------------------------------------------------------------- /04. ReactJs/4. Stateful component/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { useState } from "react"; 4 | import "./index.css"; 5 | 6 | function Room() { 7 | 8 | const [isLit, setLit] = useState(true); 9 | 10 | return ( 11 |
12 | 13 |
the room is {(isLit) ? "lit" : "dark"}
14 | 15 | 18 | 19 |
20 | ); 21 | } 22 | 23 | ReactDOM.render(, document.getElementById('root')); 24 | -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^6.2.0", 7 | "@fortawesome/free-regular-svg-icons": "^6.2.0", 8 | "@fortawesome/free-solid-svg-icons": "^6.2.0", 9 | "@fortawesome/react-fontawesome": "^0.2.0", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^0.27.2", 14 | "babel-plugin-macros": "^3.1.0", 15 | "moment": "^2.29.4", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-scripts": "5.0.1", 19 | "web-vitals": "^2.1.4" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/5. useEffect/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/5. useEffect/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/5. useEffect/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/src/img/bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/5. useEffect/src/img/bus.jpg -------------------------------------------------------------------------------- /04. ReactJs/5. useEffect/src/index.css: -------------------------------------------------------------------------------- 1 | .red { 2 | color: red; 3 | } 4 | 5 | .green { 6 | color: green; 7 | } 8 | 9 | .post { 10 | border: 1px solid black; 11 | border-radius: 20px; 12 | width: 300px; 13 | padding: 20px; 14 | margin: 20px; 15 | background-color: whitesmoke; 16 | box-shadow: 0px 0px 20px 2px black; 17 | } 18 | 19 | .post .postHeader { 20 | display: flex; 21 | align-items: center; 22 | margin-bottom: 10px; 23 | } 24 | 25 | .post .profilePhoto { 26 | width: 50px; 27 | height: 50px; 28 | border-radius: 50%; 29 | margin-right: 10px; 30 | } 31 | .post .postImage{ 32 | width: 300px; 33 | margin-top: 10px; 34 | margin-bottom: 10px; 35 | 36 | } 37 | .post .postFooter{ 38 | display: flex; 39 | justify-content: space-around; 40 | } 41 | 42 | .page{ 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | } -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weatherapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.27.2", 10 | "bootstrap": "^5.2.1", 11 | "moment": "^2.29.4", 12 | "react": "^18.2.0", 13 | "react-bootstrap": "^2.5.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Home from "./components/home"; 3 | import About from "./components/about"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 | {/* */} 11 | 12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/about/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/src/components/about/index.css -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/about/index.jsx: -------------------------------------------------------------------------------- 1 | let Home = () => { 2 | return ( 3 |
4 | I am home component 5 |
6 | ); 7 | } 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/gallery/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/src/components/gallery/index.css -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/gallery/index.jsx: -------------------------------------------------------------------------------- 1 | let Gallery = () => { 2 | return ( 3 |
4 | I am Gallery component 5 |
6 | ); 7 | } 8 | 9 | export default Gallery; 10 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/home/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/6. React Weather App/src/components/home/index.css -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/weatherCard/index.css: -------------------------------------------------------------------------------- 1 | .card { 2 | 3 | border: 1px solid black; 4 | border-radius: 30px; 5 | margin: 20px; 6 | padding:20px; 7 | background-color: whitesmoke; 8 | 9 | } -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/components/weatherCard/index.jsx: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | import moment from "moment"; 3 | import { Card, Button } from 'react-bootstrap' 4 | 5 | let WeatherCard = ({ date, temp, min, max }) => { 6 | return ( 7 | //
8 | 9 | //
{moment(date).format("dddd ha")}
10 | //

{temp}°C

11 | //
{min}°C - {max}°C
12 | //
13 | 14 | 18 | 19 | {moment(date).format("dddd ha")} 20 | 21 |

{temp}°C

22 | 23 | {min}°C - {max}°C 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default WeatherCard; 31 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | 8 | 9 | const root = ReactDOM.createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/6. React Weather App/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cors": "^2.8.5", 24 | "express": "^4.18.1", 25 | "mongoose": "^6.5.2", 26 | "nanoid": "^4.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weatherapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.10.4", 7 | "@emotion/styled": "^11.10.4", 8 | "@mui/icons-material": "^5.10.3", 9 | "@mui/material": "^5.10.5", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^0.27.2", 14 | "bootstrap": "^5.2.1", 15 | "moment": "^2.29.4", 16 | "react": "^18.2.0", 17 | "react-bootstrap": "^2.5.0", 18 | "react-dom": "^18.2.0", 19 | "react-router-dom": "^6.4.0", 20 | "react-scripts": "5.0.1", 21 | "web-vitals": "^2.1.4" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .nav>ul { 4 | display: flex; 5 | list-style: none; 6 | width: 100%; 7 | justify-content: flex-end; 8 | 9 | } 10 | 11 | .nav>ul>li { 12 | /* border: 1px solid black; */ 13 | margin: 10px; 14 | padding: 5px 10px 5px 10px; 15 | border-radius: 10px; 16 | background-color: #0d6efd; 17 | font-size: 10px; 18 | } 19 | 20 | .nav>ul>li>a { 21 | text-decoration: none; 22 | color: white; 23 | } -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/about/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/src/components/about/index.css -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/about/index.jsx: -------------------------------------------------------------------------------- 1 | let Home = () => { 2 | return ( 3 |
4 | I am home component 5 |
6 | ); 7 | } 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/gallery/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/src/components/gallery/index.css -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/gallery/index.jsx: -------------------------------------------------------------------------------- 1 | let Gallery = () => { 2 | return ( 3 |
4 | I am Gallery component 5 |
6 | ); 7 | } 8 | 9 | export default Gallery; 10 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/home/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/src/components/home/index.css -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/login/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/src/components/login/index.css -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/signup/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/7. Routing - login signup/web/src/components/signup/index.css -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/weatherCard/index.css: -------------------------------------------------------------------------------- 1 | .card { 2 | 3 | border: 1px solid black; 4 | border-radius: 30px; 5 | margin: 20px; 6 | padding:20px; 7 | background-color: whitesmoke; 8 | 9 | } -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/components/weatherCard/index.jsx: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | import moment from "moment"; 3 | import { Card, Button } from 'react-bootstrap' 4 | 5 | let WeatherCard = ({ date, temp, min, max }) => { 6 | return ( 7 | //
8 | 9 | //
{moment(date).format("dddd ha")}
10 | //

{temp}°C

11 | //
{min}°C - {max}°C
12 | //
13 | 14 | 18 | 19 | {moment(date).format("dddd ha")} 20 | 21 |

{temp}°C

22 | 23 | {min}°C - {max}°C 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default WeatherCard; 31 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | 8 | 9 | const root = ReactDOM.createRoot(document.getElementById('root')); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/7. Routing - login signup/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cors": "^2.8.5", 24 | "express": "^4.18.1", 25 | "mongoose": "^6.5.2", 26 | "nanoid": "^4.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | 3 | import NavBar from "./components/navbar"; 4 | import Home from "./components/home"; 5 | import About from "./components/about"; 6 | import Gallery from "./components/gallery"; 7 | import Login from "./components/login"; 8 | import Signup from "./components/signup"; 9 | 10 | import { 11 | BrowserRouter as Router, 12 | Routes, 13 | Route, 14 | } from "react-router-dom"; 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | function App() { 23 | return ( 24 | 25 | 26 | 27 | 28 | 29 | 30 | } /> 31 | } /> 32 | 33 | } /> 34 | } /> 35 | } /> 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default App; 43 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/about/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/src/components/about/index.css -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/about/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | 4 | 5 | let About = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am About component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default About; 24 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/gallery/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/src/components/gallery/index.css -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/gallery/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | 4 | 5 | let Gallery = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am Gallery component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default Gallery; 24 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/home/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/src/components/home/index.css -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/login/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/src/components/login/index.css -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/navbar/index.css: -------------------------------------------------------------------------------- 1 | .nav{ 2 | background-color: black; 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | .nav>ul { 8 | display: flex; 9 | list-style: none; 10 | justify-content: flex-end; 11 | 12 | } 13 | 14 | .nav>ul>li { 15 | /* border: 1px solid black; */ 16 | margin: 10px; 17 | padding: 5px 10px 5px 10px; 18 | border-radius: 10px; 19 | background-color: #0d6efd; 20 | font-size: 10px; 21 | } 22 | 23 | .nav>ul>li>a { 24 | text-decoration: none; 25 | color: white; 26 | } 27 | 28 | .nav > .userName { 29 | color: white; 30 | margin: 10px; 31 | padding: 5px 10px 5px 10px; 32 | } -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/navbar/index.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { Link } from "react-router-dom"; 4 | import "./index.css" 5 | import { useContext } from "react"; 6 | import { GlobalContext } from '../../context'; 7 | 8 | 9 | export default function NavBar() { 10 | 11 | let { state, dispatch } = useContext(GlobalContext); 12 | 13 | 14 | return ( 15 | 26 | ) 27 | } -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/signup/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/8. Context Api - login signup/web/src/components/signup/index.css -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/weatherCard/index.css: -------------------------------------------------------------------------------- 1 | .card { 2 | 3 | border: 1px solid black; 4 | border-radius: 30px; 5 | margin: 20px; 6 | padding:20px; 7 | background-color: whitesmoke; 8 | 9 | } -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/components/weatherCard/index.jsx: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | import moment from "moment"; 3 | import { Card, Button } from 'react-bootstrap' 4 | 5 | let WeatherCard = ({ date, temp, min, max }) => { 6 | return ( 7 | //
8 | 9 | //
{moment(date).format("dddd ha")}
10 | //

{temp}°C

11 | //
{min}°C - {max}°C
12 | //
13 | 14 | 18 | 19 | {moment(date).format("dddd ha")} 20 | 21 |

{temp}°C

22 | 23 | {min}°C - {max}°C 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default WeatherCard; 31 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react' 2 | import { reducer } from './reducer'; 3 | 4 | 5 | export const GlobalContext = createContext("Initial Value"); 6 | 7 | 8 | let data = { 9 | user: {}, 10 | darkTheme: true, 11 | myNum: 5 12 | } 13 | 14 | 15 | export default function ContextProvider({ children }) { 16 | const [state, dispatch] = useReducer(reducer, data) 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | import ContextProvider from "./context" 8 | 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | 3 | switch (action.type) { 4 | case "ADD": { 5 | return { ...state, myNum: state.myNum+1 } 6 | } 7 | case "SUB": { 8 | return { ...state, myNum: state.myNum-1 } 9 | } 10 | case "USER_LOGIN": { 11 | return { ...state, user: action.payload } 12 | } 13 | case "USER_LOGOUT": { 14 | return { ...state, user: null } 15 | } 16 | case "CHANGE_THEME": { 17 | return { ...state, darkTheme: !state.darkTheme } 18 | } 19 | default: { 20 | return state 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/8. Context Api - login signup/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/.DS_Store -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restful-api-server-heroku", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.mjs", 9 | "dev": "nodemon server.mjs" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/malikasinger1/restful-api-server-heroku.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/malikasinger1/restful-api-server-heroku/issues" 19 | }, 20 | "homepage": "https://github.com/malikasinger1/restful-api-server-heroku#readme", 21 | "dependencies": { 22 | "bcrypt-inzi": "^1.0.7", 23 | "cookie-parser": "^1.4.6", 24 | "cors": "^2.8.5", 25 | "express": "^4.18.1", 26 | "jsonwebtoken": "^8.5.1", 27 | "mongoose": "^6.5.2", 28 | "nanoid": "^4.0.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/public/favicon.ico -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/public/logo192.png -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/public/logo512.png -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/about/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/about/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/about/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | 4 | 5 | let About = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am About component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default About; 24 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/gallery/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/gallery/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/gallery/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | 4 | 5 | let Gallery = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | return ( 11 |
12 | I am Gallery component - {state.myNum} 13 | 14 | 19 |
20 | ); 21 | } 22 | 23 | export default Gallery; 24 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/home/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/home/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/login/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/login/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/navbar/index.css: -------------------------------------------------------------------------------- 1 | .nav{ 2 | background-color: black; 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | .nav>ul { 8 | display: flex; 9 | list-style: none; 10 | justify-content: flex-end; 11 | 12 | } 13 | 14 | .nav>ul>li { 15 | /* border: 1px solid black; */ 16 | margin: 10px; 17 | padding: 5px 10px 5px 10px; 18 | border-radius: 10px; 19 | background-color: #0d6efd; 20 | font-size: 10px; 21 | } 22 | 23 | .nav>ul>li>a { 24 | text-decoration: none; 25 | color: white; 26 | } 27 | 28 | .nav > .userName { 29 | color: white; 30 | margin: 10px; 31 | padding: 5px 10px 5px 10px; 32 | } -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/profile/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/profile/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/profile/index.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useEffect, useState } from "react"; 2 | import { GlobalContext } from '../../context'; 3 | import axios from "axios"; 4 | 5 | let Profile = () => { 6 | 7 | let { state, dispatch } = useContext(GlobalContext); 8 | 9 | 10 | 11 | 12 | return ( 13 |
14 | {(state.user === null) ? 15 |
Loading...
16 | : 17 |
18 | _id: {state.user?._id} 19 |
20 | name: {state.user?.firstName} {state.user?.lastName} 21 |
22 | email: {state.user?.email} 23 |
24 | age: {state.user?.age} 25 |
26 | } 27 | 28 |
29 | ); 30 | } 31 | 32 | export default Profile; 33 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/signup/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/04. ReactJs/9. JWT authentication - login signup/web/src/components/signup/index.css -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/weatherCard/index.css: -------------------------------------------------------------------------------- 1 | .card { 2 | 3 | border: 1px solid black; 4 | border-radius: 30px; 5 | margin: 20px; 6 | padding:20px; 7 | background-color: whitesmoke; 8 | 9 | } -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/components/weatherCard/index.jsx: -------------------------------------------------------------------------------- 1 | import "./index.css" 2 | import moment from "moment"; 3 | import { Card, Button } from 'react-bootstrap' 4 | 5 | let WeatherCard = ({ date, temp, min, max }) => { 6 | return ( 7 | //
8 | 9 | //
{moment(date).format("dddd ha")}
10 | //

{temp}°C

11 | //
{min}°C - {max}°C
12 | //
13 | 14 | 18 | 19 | {moment(date).format("dddd ha")} 20 | 21 |

{temp}°C

22 | 23 | {min}°C - {max}°C 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default WeatherCard; 31 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/context.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react' 2 | import { reducer } from './reducer'; 3 | 4 | 5 | export const GlobalContext = createContext("Initial Value"); 6 | 7 | 8 | let data = { 9 | user: {}, 10 | isLogin: null, 11 | darkTheme: true, 12 | myNum: 5 13 | } 14 | 15 | 16 | export default function ContextProvider({ children }) { 17 | const [state, dispatch] = useReducer(reducer, data) 18 | return ( 19 | 20 | {children} 21 | 22 | ) 23 | } -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | import ContextProvider from "./context" 8 | 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | // If you want to start measuring performance in your app, pass a function 20 | // to log results (for example: reportWebVitals(console.log)) 21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 22 | reportWebVitals(); 23 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | 3 | switch (action.type) { 4 | case "ADD": { 5 | return { ...state, myNum: state.myNum + 1 } 6 | } 7 | case "SUB": { 8 | return { ...state, myNum: state.myNum - 1 } 9 | } 10 | case "USER_LOGIN": { 11 | return { ...state, user: action.payload, isLogin: true } 12 | } 13 | case "USER_LOGOUT": { 14 | return { ...state, user: null, isLogin: false } 15 | } 16 | case "CHANGE_THEME": { 17 | return { ...state, darkTheme: !state.darkTheme } 18 | } 19 | default: { 20 | return state 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /04. ReactJs/9. JWT authentication - login signup/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Inzamam Malik 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Web Development Course - Sir Inzamam Malik.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mInzamamMalik/MERN-Stack-Web-Development-Class/7b77b57cc4762beb33f8061b741221b2367f1ec5/Web Development Course - Sir Inzamam Malik.pdf --------------------------------------------------------------------------------