├── .gitignore ├── Books ├── Books.md ├── Javascript.md ├── Typescript.md ├── functional-programming.md ├── learning javascript design patterns.md └── micro-frontend.md ├── Contents ├── OWASP.md ├── Others.md ├── React │ ├── images │ │ ├── image-1.png │ │ ├── image.png │ │ └── image3.png │ └── virtualize-large-lists-with-react-window.md ├── blog-posts.md ├── file-structure-of-react-projects.md ├── frontend-system-design.md ├── interview.md ├── links-for-interview-questions.md ├── micro-frontend.md ├── react-re-renders-guide.md └── top-50-hr-interview-questions-javatpoint.md ├── README.md ├── Tutorials ├── GraphQL.md ├── PWA.md ├── RXJS.md ├── WebComponents.md ├── advanced-javascript.md ├── hard-parts-of-js.md ├── hard-parts-oop-js.md ├── images │ ├── hpjs-1.jpg │ ├── hpjs-10.jpg │ ├── hpjs-11.jpg │ ├── hpjs-12.jpg │ ├── hpjs-13.jpg │ ├── hpjs-14.jpg │ ├── hpjs-15.jpg │ ├── hpjs-16.jpg │ ├── hpjs-17.jpg │ ├── hpjs-18.jpg │ ├── hpjs-19.jpg │ ├── hpjs-2.jpg │ ├── hpjs-20.jpg │ ├── hpjs-21.jpg │ ├── hpjs-22.jpg │ ├── hpjs-23.jpg │ ├── hpjs-24.jpg │ ├── hpjs-25.jpg │ ├── hpjs-26.jpg │ ├── hpjs-27.jpg │ ├── hpjs-28.jpg │ ├── hpjs-29.jpg │ ├── hpjs-3.jpg │ ├── hpjs-30.jpg │ ├── hpjs-31.jpg │ ├── hpjs-32.jpg │ ├── hpjs-33.jpg │ ├── hpjs-34.jpg │ ├── hpjs-35.jpg │ ├── hpjs-36.jpg │ ├── hpjs-37.jpg │ ├── hpjs-38.jpg │ ├── hpjs-39.jpg │ ├── hpjs-4.jpg │ ├── hpjs-40.jpg │ ├── hpjs-41.jpg │ ├── hpjs-42.jpg │ ├── hpjs-43.png │ ├── hpjs-44.jpg │ ├── hpjs-5.jpg │ ├── hpjs-6.jpg │ ├── hpjs-7.jpg │ ├── hpjs-8.jpg │ ├── hpjs-9.jpg │ ├── immu.png │ ├── map.png │ └── test1.png ├── javascript.md ├── mock-apis.md ├── next.md ├── object-oriented-programming-in-javaScript.md ├── react-authentication.md ├── react-jsx.md ├── react-states.md ├── react-testing.md ├── react-tsx.md ├── telegram-webapps.md ├── test.md └── typescript.md └── _Example ├── GraphQLv1 ├── db.json ├── package-lock.json ├── package.json ├── schema │ └── schema.js └── server.js ├── PWA-without-tools ├── README.MD ├── functions │ ├── index.js │ ├── package-lock.json │ └── package.json ├── package-lock.json ├── package.json └── public │ ├── 404.html │ ├── favicon.ico │ ├── help │ └── index.html │ ├── index.html │ ├── manifest.json │ ├── offline.html │ ├── src │ ├── css │ │ ├── app.css │ │ ├── feed.css │ │ └── help.css │ ├── images │ │ ├── icons │ │ │ ├── app-icon-144x144.png │ │ │ ├── app-icon-192x192.png │ │ │ ├── app-icon-256x256.png │ │ │ ├── app-icon-384x384.png │ │ │ ├── app-icon-48x48.png │ │ │ ├── app-icon-512x512.png │ │ │ ├── app-icon-96x96.png │ │ │ ├── apple-icon-114x114.png │ │ │ ├── apple-icon-120x120.png │ │ │ ├── apple-icon-144x144.png │ │ │ ├── apple-icon-152x152.png │ │ │ ├── apple-icon-180x180.png │ │ │ ├── apple-icon-57x57.png │ │ │ ├── apple-icon-60x60.png │ │ │ ├── apple-icon-72x72.png │ │ │ └── apple-icon-76x76.png │ │ ├── main-image-lg.jpg │ │ ├── main-image-sm.jpg │ │ ├── main-image.jpg │ │ └── sf-boat.jpg │ └── js │ │ ├── app.js │ │ ├── feed.js │ │ ├── fetch.js │ │ ├── idb.js │ │ ├── material.min.js │ │ ├── promise.js │ │ └── utility.js │ └── sw.js ├── PWASW-workbox └── sw-base.js ├── decorators ├── LoginController.ts ├── RootController.ts └── decorators │ ├── MetadataKeys.ts │ ├── Methods.ts │ ├── bodyValidator.ts │ ├── controller.ts │ ├── index.ts │ ├── routes.ts │ └── use.ts ├── frontcast-basic ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ └── index.html └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── Main │ │ └── Main.js │ ├── Product │ │ ├── Product.css │ │ └── Product.js │ └── ProductList │ │ └── ProductList.js │ ├── context │ └── auth-context.js │ ├── hoc │ ├── Container.js │ └── Wrapper.js │ ├── index.css │ └── index.js ├── microfronted ├── .DS_Store └── ecomm │ ├── cart │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── bootstrap.js │ │ └── index.js │ └── webpack.config.js │ ├── container │ ├── dist │ │ ├── index.html │ │ └── main.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── bootstrap.js │ │ └── index.js │ └── webpack.config.js │ ├── mfp │ └── packages │ │ ├── auth │ │ ├── package-lock.json │ │ └── package.json │ │ ├── container │ │ ├── config │ │ │ ├── webpack.common.js │ │ │ ├── webpack.dev.js │ │ │ └── webpack.prod.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── index.html │ │ └── src │ │ │ ├── App.js │ │ │ ├── bootstrap.js │ │ │ ├── components │ │ │ ├── Header.js │ │ │ └── MarketingApp.js │ │ │ └── index.js │ │ ├── dashboard │ │ ├── package-lock.json │ │ └── package.json │ │ └── marketing │ │ ├── config │ │ ├── webpack.common.js │ │ ├── webpack.dev.js │ │ └── webpack.prod.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ └── src │ │ ├── App.js │ │ ├── bootstrap.js │ │ ├── components │ │ ├── Landing.js │ │ └── Pricing.js │ │ └── index.js │ └── products │ ├── dist │ └── main.js │ ├── package-lock.json │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── bootstrap.js │ └── index.js │ └── webpack.config.js ├── mo-coin ├── .eslintrc.json ├── .gitignore ├── README.md ├── apps │ ├── coin │ │ ├── coinBehaviours.ts │ │ ├── coinsQuery.ts │ │ └── senderCoindHelper.ts │ └── state │ │ ├── general │ │ └── errorSlice.ts │ │ ├── hooks.ts │ │ └── store.ts ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.tsx │ └── index.tsx ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── logo.png │ └── vercel.svg ├── styles │ └── globals.css ├── tailwind.config.js ├── template │ ├── client │ │ └── home │ │ │ ├── HomeTemplate.tsx │ │ │ └── components │ │ │ ├── CoinPartial.tsx │ │ │ ├── CoinsPartial.tsx │ │ │ └── HeaderPartial.tsx │ └── layout │ │ ├── Hook │ │ └── useDarkMode.tsx │ │ ├── UI │ │ ├── AlertComponent.tsx │ │ ├── CrightComponent.tsx │ │ ├── LightButtonComponent.tsx │ │ └── LoadingComponent.tsx │ │ └── layout.tsx └── tsconfig.json ├── nextjs-event-page ├── README.md ├── components │ ├── error-alert │ │ ├── error-alert.js │ │ └── error-alert.module.css │ ├── event-detail │ │ ├── event-content.js │ │ ├── event-content.module.css │ │ ├── event-logistics.js │ │ ├── event-logistics.module.css │ │ ├── event-summary.js │ │ ├── event-summary.module.css │ │ ├── logistics-item.js │ │ └── logistics-item.module.css │ ├── events │ │ ├── event-item.js │ │ ├── event-item.module.css │ │ ├── event-list.js │ │ ├── event-list.module.css │ │ ├── events-search.js │ │ └── events-search.module.css │ ├── icons │ │ ├── address-icon.js │ │ ├── arrow-right-icon.js │ │ └── date-icon.js │ ├── layout │ │ ├── layout.js │ │ ├── main-header.js │ │ └── main-header.module.css │ ├── results-title │ │ ├── results-title.js │ │ └── results-title.module.css │ └── ui │ │ ├── button.js │ │ └── button.module.css ├── dummy-data.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── events │ │ ├── [...slug].js │ │ ├── [eventId].js │ │ └── index.js │ └── index.js ├── public │ ├── favicon.ico │ ├── images │ │ ├── coding-event.jpg │ │ ├── extrovert-event.jpg │ │ └── introvert-event.jpg │ └── vercel.svg └── styles │ └── globals.css ├── nextjs-using-data-fetchs ├── README.md ├── data │ └── dummy-backend.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── [uid].js │ ├── _app.js │ ├── api │ │ └── hello.js │ ├── index.js │ ├── last-sales.js │ ├── products │ │ └── [pid].js │ └── user-profile.js ├── public │ ├── favicon.ico │ └── vercel.svg └── styles │ ├── Home.module.css │ └── globals.css ├── react-testing ├── .env ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── json-server.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── json-server │ │ └── index.html │ └── vite.svg ├── setup.ts ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── CharacterSelect.test.tsx │ │ ├── CharacterSelect.tsx │ │ ├── ComboModal.test.tsx │ │ ├── ComboModal.tsx │ │ ├── SelectComponent.test.tsx │ │ ├── SelectComponent.tsx │ │ ├── TotalCostCalculator.test.tsx │ │ └── TotalCostCalculator.tsx │ ├── entities.ts │ ├── index.css │ ├── main.tsx │ ├── mocks │ │ ├── handlers.ts │ │ └── server.ts │ ├── routes.tsx │ └── vite-env.d.ts ├── tailwind.config.ts ├── test-utils │ ├── index.ts │ └── render.tsx ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── vitest.config.ts ├── redux ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── images │ │ ├── airpods.jpg │ │ ├── apple-watch.jpg │ │ ├── iphone-12.jpg │ │ ├── iphone-se.jpg │ │ ├── macbook.jpg │ │ └── mouse.jpg │ └── index.html ├── src │ ├── App.js │ ├── action │ │ ├── cartAction.js │ │ └── productAction.js │ ├── components │ │ ├── Footer │ │ │ └── Footer.js │ │ ├── Header │ │ │ ├── Header.css │ │ │ └── Header.js │ │ └── Product │ │ │ └── Product.js │ ├── index.css │ ├── index.js │ ├── pages │ │ ├── Cart.js │ │ ├── Home.js │ │ └── Product.js │ ├── products.js │ ├── reducer │ │ ├── cartReducer.js │ │ └── productReducer.js │ └── store.js └── yarn.lock ├── sample-package.json ├── tailwind ├── FUNCTION-DIRECTIVES │ ├── css │ │ └── style.css │ ├── index.html │ ├── input.css │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── bookmark │ ├── css │ │ └── style.css │ ├── images │ │ ├── bg-dots.svg │ │ ├── bookmark.png │ │ ├── favicon-32x32.png │ │ ├── icon-arrow.svg │ │ ├── icon-close.svg │ │ ├── icon-error.svg │ │ ├── icon-facebook.svg │ │ ├── icon-hamburger.svg │ │ ├── icon-twitter.svg │ │ ├── illustration-features-tab-1.svg │ │ ├── illustration-features-tab-2.svg │ │ ├── illustration-features-tab-3.svg │ │ ├── illustration-hero.svg │ │ ├── logo-bookmark-footer.svg │ │ ├── logo-bookmark.svg │ │ ├── logo-chrome.svg │ │ ├── logo-firefox.svg │ │ └── logo-opera.svg │ ├── index.html │ ├── input.css │ ├── js │ │ └── script.js │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── fylo │ ├── css │ │ └── style.css │ ├── images │ │ ├── bg-curvy-dark-mode.svg │ │ ├── bg-curvy-light-mode.svg │ │ ├── bg-quotes.png │ │ ├── facebook.svg │ │ ├── favicon-32x32.png │ │ ├── fylo.png │ │ ├── icon-access-anywhere.svg │ │ ├── icon-any-file.svg │ │ ├── icon-arrow.svg │ │ ├── icon-collaboration.svg │ │ ├── icon-email.svg │ │ ├── icon-location.svg │ │ ├── icon-phone.svg │ │ ├── icon-security.svg │ │ ├── illustration-intro.png │ │ ├── illustration-stay-productive.png │ │ ├── instagram.svg │ │ ├── instagram_icon.svg │ │ ├── logo-dark-mode.svg │ │ ├── logo-light-mode.svg │ │ ├── profile-1.jpg │ │ ├── profile-2.jpg │ │ ├── profile-3.jpg │ │ └── twitter.svg │ ├── index.html │ ├── input.css │ ├── js │ │ └── script.js │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── index.html ├── loopstudios │ ├── css │ │ └── style.css │ ├── images │ │ ├── desktop │ │ │ ├── image-curiosity.jpg │ │ │ ├── image-deep-earth.jpg │ │ │ ├── image-fisheye.jpg │ │ │ ├── image-from-above.jpg │ │ │ ├── image-grid.jpg │ │ │ ├── image-hero.jpg │ │ │ ├── image-interactive.jpg │ │ │ ├── image-night-arcade.jpg │ │ │ ├── image-pocket-borealis.jpg │ │ │ └── image-soccer-team.jpg │ │ ├── favicon-32x32.png │ │ ├── icon-close.svg │ │ ├── icon-facebook.svg │ │ ├── icon-hamburger.svg │ │ ├── icon-instagram.svg │ │ ├── icon-pinterest.svg │ │ ├── icon-twitter.svg │ │ ├── logo.svg │ │ ├── loopstudios.png │ │ └── mobile │ │ │ ├── image-curiosity.jpg │ │ │ ├── image-deep-earth.jpg │ │ │ ├── image-fisheye.jpg │ │ │ ├── image-from-above.jpg │ │ │ ├── image-grid.jpg │ │ │ ├── image-hero.jpg │ │ │ ├── image-interactive.jpg │ │ │ ├── image-night-arcade.jpg │ │ │ ├── image-pocket-borealis.jpg │ │ │ └── image-soccer-team.jpg │ ├── index.html │ ├── input.css │ ├── js │ │ └── script.js │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── mini-projects │ ├── email-subscribe │ │ ├── images │ │ │ ├── email-subscribe.png │ │ │ └── image.jpg │ │ ├── index.html │ │ └── readme.md │ ├── image-gallery │ │ ├── images │ │ │ ├── bookmark.svg │ │ │ ├── image-gallery.png │ │ │ ├── image1.jpg │ │ │ ├── image2.jpg │ │ │ ├── image3.jpg │ │ │ ├── image4.jpg │ │ │ ├── image5.jpg │ │ │ └── image6.jpg │ │ ├── index.html │ │ └── readme.md │ ├── login-modal │ │ ├── images │ │ │ ├── facebook.png │ │ │ ├── google.png │ │ │ ├── image.jpg │ │ │ └── login-modal.png │ │ ├── index.html │ │ └── readme.md │ ├── pricing-cards │ │ ├── images │ │ │ └── pricing-cards.png │ │ ├── index.html │ │ └── readme.md │ └── product-modal │ │ ├── images │ │ ├── headphone.png │ │ ├── heart.png │ │ ├── product-modal.png │ │ └── weight.png │ │ ├── index.html │ │ └── readme.md ├── shortly │ ├── css │ │ └── style.css │ ├── images │ │ ├── bg-boost-desktop.svg │ │ ├── bg-boost-mobile.svg │ │ ├── bg-shorten-desktop.svg │ │ ├── bg-shorten-mobile.svg │ │ ├── favicon-32x32.png │ │ ├── icon-brand-recognition.svg │ │ ├── icon-detailed-records.svg │ │ ├── icon-facebook.svg │ │ ├── icon-fully-customizable.svg │ │ ├── icon-instagram.svg │ │ ├── icon-pinterest.svg │ │ ├── icon-twitter.svg │ │ ├── illustration-working.svg │ │ ├── logo.svg │ │ └── shortly.png │ ├── index.html │ ├── input.css │ ├── js │ │ └── script.js │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── simple-tailwind-starter │ ├── css │ │ └── style.css │ ├── index.html │ ├── input.css │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── tailwind-sandbox │ ├── 01-utility-first │ │ └── index.html │ ├── 02-colors │ │ └── index.html │ ├── 03-container-spacing │ │ └── index.html │ ├── 04-typography │ │ └── index.html │ ├── 05-sizing │ │ └── index.html │ ├── 06-layout-position │ │ └── index.html │ ├── 07-backgrounds-shadows │ │ └── index.html │ ├── 08-borders │ │ └── index.html │ ├── 09-filters │ │ └── index.html │ ├── 10-interactivity │ │ └── index.html │ ├── 11-breakpoints │ │ └── index.html │ ├── 12-columns │ │ └── index.html │ ├── 13-flex │ │ └── index.html │ ├── 14-grid │ │ └── index.html │ ├── 15-transform-transition │ │ └── index.html │ ├── 16-animation │ │ └── index.html │ ├── 17-customization │ │ └── index.html │ ├── 18-dark-mode │ │ └── index.html │ ├── assets │ │ └── img │ │ │ ├── img1.jpg │ │ │ ├── img2.jpg │ │ │ ├── img3.jpg │ │ │ ├── img4.jpg │ │ │ ├── img5.jpg │ │ │ ├── img6.jpg │ │ │ ├── img7.jpg │ │ │ ├── img8.jpg │ │ │ ├── img9.jpg │ │ │ └── warning.svg │ └── index.html ├── testmonial-grid │ ├── css │ │ └── style.css │ ├── images │ │ ├── bg-pattern-quotation.svg │ │ ├── favicon-32x32.png │ │ ├── image-daniel.jpg │ │ ├── image-jeanette.jpg │ │ ├── image-jonathan.jpg │ │ ├── image-kira.jpg │ │ ├── image-patrick.jpg │ │ └── testimonial-grid.png │ ├── index.html │ ├── input.css │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js └── website-project │ ├── css │ └── style.css │ ├── images │ ├── bg-header-desktop.png │ ├── bg-header-mobile.png │ ├── clipboard.png │ ├── favicon-32x32.png │ ├── icon-blacklist.svg │ ├── icon-facebook.svg │ ├── icon-instagram.svg │ ├── icon-preview.svg │ ├── icon-text.svg │ ├── icon-twitter.svg │ ├── image-computer.png │ ├── image-devices.png │ ├── logo-google.png │ ├── logo-hp.png │ ├── logo-ibm.png │ ├── logo-microsoft.png │ ├── logo-vector-graphics.png │ └── logo.svg │ ├── index.html │ ├── input.css │ ├── package-lock.json │ ├── package.json │ └── tailwind.config.js ├── test-driven-carousel ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .stylelintignore ├── .stylelintrc.cjs ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── Carousel.test.tsx │ ├── Carousel.tsx │ ├── CarouselButton.test.tsx │ ├── CarouselButton.tsx │ ├── CarouselSlide.test.tsx │ ├── CarouselSlide.tsx │ ├── __snapshots__ │ │ └── CarouselSlide.test.tsx.snap │ ├── assets │ │ └── react.svg │ ├── example │ │ ├── ExampleCarousel.tsx │ │ └── slides.tsx │ ├── index.css │ ├── main.tsx │ ├── useSlideIndex.tsx │ ├── useTimeout.tsx │ └── vite-env.d.ts ├── test-setup.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── test-driven-palindromes ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── package-lock.json ├── package.json ├── palindromes.js └── palindromes.test.js ├── video-chat-webrtc ├── index.js ├── package-lock.json ├── package.json └── public │ ├── chat.js │ ├── index.html │ └── styles.css └── web ├── .cache ├── 16 │ └── 9f69da45f5ed515991825eb0fca29b.json ├── 19 │ └── f194352ea2096411009e3a0a6ce7a6.json ├── 23 │ └── 105cbba487142fbd82f451a3eeacf4.json ├── 27 │ └── 1844260f8fc95de375bd40f8c7a58b.json ├── 34 │ └── cd13ba6cad4d84cb8be9e635e3f3c0.json ├── 48 │ └── e2d75c22ae20844607d1c7dcf1fa4b.json ├── 51 │ └── 321fa56059004eff959edd530069e2.json ├── 54 │ └── ae3b19c1302f3ff1bcd36280eebce8.json ├── 60 │ ├── 4d58f0e2cc4a623a1d83af4b8f7fab.json │ └── 6fec1f965db64fb4673ab03b9f1eda.json ├── 61 │ └── d55a15d77a6f5b8812f2a35e36b8c0.json ├── 63 │ └── e79347b4789c20322143d561bff615.json ├── 72 │ └── 33170206c29a510f757bfa28cab4c1.json ├── 73 │ └── 18bd1db402551267ee625eda4659f5.json ├── 79 │ └── 05476d06c3971716f63a4ccae45c19.json ├── 80 │ └── ffd3a2152b7ae28f1c054ffb556fa6.json ├── 84 │ └── e872d06429e28e02502607a13acc0d.json ├── 01 │ └── 39065ebdaaffecbeebc2e0d305b17a.json ├── 1b │ ├── 20aba0fa290c543145110d7dbe661f.json │ └── 9da5a71d861759d65f9cd5cc95ef2b.json ├── 1f │ └── 0eb6bdbba7055935a5c0a57fcc7cf7.json ├── 2d │ └── 9c73661f26415b7a79ff651c9ac5aa.json ├── 3b │ └── 853f413e9ab5327a3ebd9e28cd2d74.json ├── 3f │ └── a51987d0e5cd9c7cb2fca3109341c5.json ├── 4b │ └── 12c18c9ecb85df776557c2902cfa82.json ├── 4f │ └── 0a9998e53040f8ff348125e5b93269.json ├── 5e │ └── 5558ad158e85a7fb3a02c79ba83f43.json ├── 5f │ └── e20938993063993369b2151f6d723e.json ├── 8e │ └── f9e69d8bda4226dcae7755d75fd932.json ├── 9d │ └── 09084ad9714936a4cec978b44c7374.json ├── a2 │ └── 2f59ed2c8814d5d90764153a860ed3.json ├── a4 │ └── d4b224e98056071a4810b756ab0df6.json ├── a5 │ └── ba9e528709dc19c49c7b3ab5804069.json ├── aa │ └── e4f389164343c8a72c4424fc4dca9d.json ├── ab │ └── 4f86cbb6d21062fcb2507d078c2952.json ├── ad │ └── 13f75b64a4c69c72aba7ba0e3721c4.json ├── b0 │ └── d83cc74542455fa35f9d5de41555db.json ├── b2 │ ├── 55a7dc119233d9bbae00fe91eab5ce.json │ └── 8c2994cafc5a3ff1e197a74bf4806c.json ├── b5 │ ├── 1ee259007dffbb14a4260587a0e60d.json │ └── be63a774f9e0388779548bd467a7dd.json ├── bf │ ├── 59a1384be77ca896a7229e040649a5.json │ └── cafbbd1780155e439a79e6d1a6ae4d.json ├── c0 │ └── 1ed1880a73280354288618f0d73b2a.json ├── c1 │ └── 81eb2df9cfd4aa8c42961b5d1f4b68.json ├── c2 │ └── 0296e297d1c66ce0780cdd7eed0d7a.json ├── c3 │ └── a99576ae9fde73f812d85729809303.json ├── d8 │ └── 629efe1a75bd4ecf95ad3571444e7c.json ├── da │ └── 8125c8d4f6565b7e15f9b252ae10db.json ├── e9 │ └── 42fa50c18afa7ea3c8337cdf59225b.json ├── ea │ └── e5de234c623632d4d1ac309332d09b.json ├── f8 │ └── 8fbb67728232e3151e9a690771d4d2.json └── fe │ └── 9c845021b66ef466b2764246e658a2.json ├── db.json ├── dist ├── index.html ├── src.f10117fe.js └── src.f10117fe.js.map ├── index.html ├── package-lock.json ├── package.json ├── src ├── index.ts ├── models │ ├── ApiSync.ts │ ├── Attributes.ts │ ├── Collection.ts │ ├── Eventing.ts │ ├── Model.ts │ └── User.ts └── views │ ├── CollectionView.ts │ ├── UserEdit.ts │ ├── UserForm.ts │ ├── UserList.ts │ ├── UserShow.ts │ └── View.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store -------------------------------------------------------------------------------- /Books/Books.md: -------------------------------------------------------------------------------- 1 | # کتاب‌های مباحث مربوط به مباحث فرانت‌اند 2 | 3 | 1. Web Scalability for Startup Engineers 4 | 2. Learning Patterns 5 | 3. Image Optimization -------------------------------------------------------------------------------- /Books/Javascript.md: -------------------------------------------------------------------------------- 1 | # کتاب‌های جاوااسکریپت 2 | 3 | 1. Practical Modern JavaScript 4 | 2. Mastering Modular JavaScript 5 | 3. Responsible Javascript -------------------------------------------------------------------------------- /Books/Typescript.md: -------------------------------------------------------------------------------- 1 | # کتاب‌های جاوااسکریپت 2 | 3 | 1. Effective Typescript -------------------------------------------------------------------------------- /Books/functional-programming.md: -------------------------------------------------------------------------------- 1 | # کتاب‌های برنامه‌نویسی فانکشنال 2 | 3 | 1. Functional Programming Made Easier -------------------------------------------------------------------------------- /Books/micro-frontend.md: -------------------------------------------------------------------------------- 1 | # کتاب‌های میکرو‌فرانت‌اند 2 | 3 | 1. Building Micro-Frontends 4 | 2. Micro Frontends in Action -------------------------------------------------------------------------------- /Contents/Others.md: -------------------------------------------------------------------------------- 1 | # محتوا دسته بندی نشده 2 | 3 | در این بخش یک سری لینک هایی که می توان در آینده دسته بندی کرد را قرار می دهم. برخی از محتوا های خوب در مورد جاوااسکریپت و React 4 | 5 | 6 | - https://github.com/antonioru/beautiful-react-hooks 7 | - https://www.npmjs.com/package/clsx 8 | - https://www.benmvp.com/blog/polymorphic-react-components-typescript/ 9 | - https://git.ir/udemy-redux-react-redux-redux-toolkit-rtk-complete-course-2023/ 10 | - https://www.bam.tech/article/redux-persist-how-it-works-and-how-to-change-the-structure-of-your-persisted-store 11 | - https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975 12 | -------------------------------------------------------------------------------- /Contents/React/images/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Contents/React/images/image-1.png -------------------------------------------------------------------------------- /Contents/React/images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Contents/React/images/image.png -------------------------------------------------------------------------------- /Contents/React/images/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Contents/React/images/image3.png -------------------------------------------------------------------------------- /Contents/frontend-system-design.md: -------------------------------------------------------------------------------- 1 | ## سیستم دیزاین در فرانت‌اند 2 | 3 | 4 | ## ریپازیتوری ها 5 | (https://github.com/devkodeio/frontend-system-design) 6 | 7 | --- 8 | 9 | ## پست‌های بلاگ‌ها 10 | 11 | (https://dev.to/hellonehha/system-design-guide-for-front-end-developers-5fkl) 12 | 13 | --- 14 | 15 | ## لینک‌های یوتیوب 16 | 17 | [Playlist](https://www.youtube.com/playlist?list=PLI9W87-Dqn7j_x6QtR6sUjycJR7nQLBqT) 18 | 19 | https://www.youtube.com/watch?v=Zpvzv8Uma8Q 20 | -------------------------------------------------------------------------------- /Contents/links-for-interview-questions.md: -------------------------------------------------------------------------------- 1 | # لینک های سوالات مصاحبه 2 | 3 | 1. دیوار: () 4 | -------------------------------------------------------------------------------- /Contents/micro-frontend.md: -------------------------------------------------------------------------------- 1 | # مباحث میکرو فرانت اند 2 | 3 | ## بلاگ‌ها 4 | 5 | 1. (https://martinfowler.com/articles/micro-frontends.html) 6 | 2. (https://micro-frontends.org/) 7 | 8 | --- 9 | 10 | ## ویدیوهای یوتیوب 11 | 12 | (https://www.youtube.com/watch?v=lKKsjpH09dU) -------------------------------------------------------------------------------- /Contents/top-50-hr-interview-questions-javatpoint.md: -------------------------------------------------------------------------------- 1 | Top 50 HR Interview Questions | Most Common Interview Questions (2023) - javatpoint 2 | 3 | - https://www.javatpoint.com/job-interview-questions 4 | - https://www.indeed.com/career-advice/interviewing/top-interview-questions-and-answers 5 | -------------------------------------------------------------------------------- /Tutorials/hard-parts-oop-js.md: -------------------------------------------------------------------------------- 1 | # JavaScript: The Hard Parts on Object-Oriented 2 | 3 | ## oo paradigm 4 | 5 | چرا پارادایمی داریم که کد رو سازمان دهی کنیم؟ 6 | وقتی هزاران خط کد می‌نویسیم نمی‌خوایم خط به خط کد رو ران کنیم نیاز به سازمان دهی کد داریم 7 | وقتی کد را ران میکنیم دیتایی رو سیو می‌کنیم و همچنینی فانکشنالیتی روی اون دیتا اعمال کنیم 8 | 9 | مثال در یک بازی 10 | چندین یوزر داریم 11 | هر یوزر یه فانکشنالیتی افزایش امتیاز داره روی دیتای مربوط به امتیاز اعمال میشه 12 | و همزمان مثلا یک quize question هم داریم که نیازی نیست روی این دیتا فانکشنالیتی افزایش امتیاز اعمال بشه 13 | فانکشنالیتی ها برای استفاده و تغییر و یا حتی رندر اون دیتا هست. 14 | 15 | پارادایم هر رویکرد برای ساماندهی کد هامون هست که کمک میکنه فیچرهای فانکشنالیتی های مختلف را به راحتی اضافه کنیم 16 | 17 | برای مثال اگر بخوایم یوزرهامون کاهش امتیاز قرار داده بشه براشون همه یوزرهامون به راحتی به این فیچر دسترسی خواهند داشت. 18 | در نهایت استراکچر مشخصی خواهیم داشت و از لحاظ پرفورمنس هزینه بر نیست برایمان 19 | 20 | با کمک ابجکت میتونیم دیتا رو دسته بندی کنیم تا فانکشنالیتی‌های مشخص اعمال بشوند روی این دیتا. 21 | -------------------------------------------------------------------------------- /Tutorials/images/hpjs-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-1.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-10.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-11.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-12.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-13.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-14.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-15.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-16.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-17.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-18.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-19.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-2.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-20.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-21.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-22.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-23.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-24.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-25.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-26.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-27.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-28.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-29.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-3.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-30.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-31.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-32.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-33.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-34.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-35.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-36.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-37.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-38.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-39.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-4.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-40.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-41.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-42.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-43.png -------------------------------------------------------------------------------- /Tutorials/images/hpjs-44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-44.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-5.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-6.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-7.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-8.jpg -------------------------------------------------------------------------------- /Tutorials/images/hpjs-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/hpjs-9.jpg -------------------------------------------------------------------------------- /Tutorials/images/immu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/immu.png -------------------------------------------------------------------------------- /Tutorials/images/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/map.png -------------------------------------------------------------------------------- /Tutorials/images/test1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/Tutorials/images/test1.png -------------------------------------------------------------------------------- /Tutorials/javascript.md: -------------------------------------------------------------------------------- 1 | # دوره جاوااسکریپت 2 | 3 | نت های مربوط به دوره 4 | 5 | 6 | ###### متغیر ها 7 | 8 | متغیر ها مثل یک جعبه در نظر بگیریم که هر چیزی از هر نوعی میشه داخلش قرار داد 9 | روی این باکس میشه لیبل قرار داد و نام گذاریش کرد 10 | -------------------------------------------------------------------------------- /Tutorials/mock-apis.md: -------------------------------------------------------------------------------- 1 | # داده های تستی و API های تستی برای یادگیری 2 | 3 | در این بخش سعی می کنم در مورد چگونگی ماک کردن API در جاوااسکریپت صحبت کنم و همینطور سمپل تست هایی برای اون در انواع تست بنویسم 4 | 5 | 6 | ### لینک های مربوط به API های تستی 7 | 8 | - https://mock.shop/ 9 | -------------------------------------------------------------------------------- /Tutorials/react-authentication.md: -------------------------------------------------------------------------------- 1 | # آموزش ساخت لاگین و ذخیره توکن در اپلیکیشن های react 2 | لازم به ذکر است از چند منبع این مطلب به روز رسانی می شود و همینطور راهای مختلف برای ساخت وب سایت امن تر در ری اکت توضیح داده می شود. 3 | 4 | ## منابع 5 | - https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications 6 | -------------------------------------------------------------------------------- /_Example/GraphQLv1/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "id": "23", 5 | "firstName": "Bill", 6 | "age": 20, 7 | "companyId": "1" 8 | }, 9 | { 10 | "id": "41", 11 | "firstName": "Nick", 12 | "age": 40, 13 | "companyId": "2" 14 | }, 15 | { 16 | "id": "40", 17 | "firstName": "Alex", 18 | "age": 10, 19 | "companyId": "2" 20 | } 21 | ], 22 | "companies": [ 23 | { 24 | "id": "1", 25 | "name": "Apple", 26 | "description": "iphone" 27 | }, 28 | { 29 | "id": "2", 30 | "name": "Google", 31 | "description": "search" 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /_Example/GraphQLv1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "users", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "json:server": "json-server --watch db.json", 9 | "dev": "nodemon server.js" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "axios": "^1.1.3", 15 | "express": "^4.18.2", 16 | "express-graphql": "^0.12.0", 17 | "graphql": "^15.8.0", 18 | "json-server": "^0.17.0", 19 | "lodash": "^4.17.21", 20 | "nodemon": "^2.0.20" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_Example/GraphQLv1/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const { graphqlHTTP } = require('express-graphql'); 3 | const schema = require('./schema/schema'); 4 | 5 | const app = express(); 6 | 7 | app.use('/graphql', graphqlHTTP({ schema: schema, graphiql: true })); 8 | 9 | app.listen(4000, () => { 10 | console.log('Listening ...'); 11 | }); 12 | -------------------------------------------------------------------------------- /_Example/PWA-without-tools/README.MD: -------------------------------------------------------------------------------- 1 | # Progressive Web Apps - Complete Guide 2 | This source code is part of Maximilian Schwarzmüller's "Progressive Web Apps - Complete Guide" course on udemy.com. 3 | 4 | # How to Use 5 | You need [Node.js](https://nodejs.org) installed on your machine. Simply download the installer from [nodejs.org](https://nodejs.org) and go through the installation steps. 6 | 7 | Once Node.js is installed, open your command prompt or terminal and **navigate into this project folder**. There, run `npm install` to install all required dependencies. 8 | 9 | Finally, run `npm start` to start the development server and visit [localhost:8080](http://localhost:8080) to see the running application. 10 | -------------------------------------------------------------------------------- /_Example/PWA-without-tools/functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "description": "Cloud Functions for Firebase", 4 | "dependencies": { 5 | "@google-cloud/storage": "^1.2.1", 6 | "busboy": "^0.2.14", 7 | "cors": "^2.8.4", 8 | "firebase-admin": "^4.2.1", 9 | "firebase-functions": "^0.5.7", 10 | "formidable": "^1.1.1", 11 | "uuid-v4": "^0.1.0", 12 | "web-push": "^3.2.2" 13 | }, 14 | "private": true, 15 | "scripts": { 16 | "web-push": "web-push" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /_Example/PWA-without-tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pwa-complete-guide", 3 | "version": "1.0.0", 4 | "description": "A complete guide to PWAs. Building a simple Instagram clone.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "http-server -c-1" 8 | }, 9 | "keywords": [ 10 | "pwa", 11 | "progressive", 12 | "web", 13 | "app", 14 | "complete", 15 | "tutorial" 16 | ], 17 | "author": "Maximilian Schwarzmüller", 18 | "license": "ISC", 19 | "devDependencies": { 20 | "http-server": "^0.10.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/favicon.ico -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/css/app.css: -------------------------------------------------------------------------------- 1 | .text-center { 2 | text-align: center; 3 | } 4 | 5 | .drawer-option { 6 | padding: 16px; 7 | } 8 | 9 | .enable-notifications { 10 | display: none; 11 | } -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/css/help.css: -------------------------------------------------------------------------------- 1 | 2 | .mdl-button { 3 | margin: 10px; 4 | } -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-144x144.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-192x192.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-256x256.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-384x384.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-48x48.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-512x512.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/app-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/app-icon-96x96.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/main-image-lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/main-image-lg.jpg -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/main-image-sm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/main-image-sm.jpg -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/main-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/main-image.jpg -------------------------------------------------------------------------------- /_Example/PWA-without-tools/public/src/images/sf-boat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/PWA-without-tools/public/src/images/sf-boat.jpg -------------------------------------------------------------------------------- /_Example/decorators/decorators/MetadataKeys.ts: -------------------------------------------------------------------------------- 1 | export enum MetadataKeys { 2 | method = 'method', 3 | path = 'path', 4 | middleware = 'middleware', 5 | validator = 'validator' 6 | } 7 | -------------------------------------------------------------------------------- /_Example/decorators/decorators/Methods.ts: -------------------------------------------------------------------------------- 1 | export enum Methods { 2 | get = 'get', 3 | post = 'post', 4 | patch = 'patch', 5 | del = 'delete', 6 | put = 'put' 7 | } 8 | -------------------------------------------------------------------------------- /_Example/decorators/decorators/bodyValidator.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | import { MetadataKeys } from './MetadataKeys'; 3 | 4 | export function bodyValidator(...keys: string[]) { 5 | return function(target: any, key: string, desc: PropertyDescriptor) { 6 | Reflect.defineMetadata(MetadataKeys.validator, keys, target, key); 7 | }; 8 | } 9 | -------------------------------------------------------------------------------- /_Example/decorators/decorators/index.ts: -------------------------------------------------------------------------------- 1 | export * from './controller'; 2 | export * from './routes'; 3 | export * from './use'; 4 | export * from './bodyValidator'; 5 | -------------------------------------------------------------------------------- /_Example/decorators/decorators/routes.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | import { RequestHandler } from 'express'; 3 | import { Methods } from './Methods'; 4 | import { MetadataKeys } from './MetadataKeys'; 5 | 6 | interface RouteHandlerDescriptor extends PropertyDescriptor { 7 | value?: RequestHandler; 8 | } 9 | 10 | function routeBinder(method: string) { 11 | return function(path: string) { 12 | return function(target: any, key: string, desc: RouteHandlerDescriptor) { 13 | Reflect.defineMetadata(MetadataKeys.path, path, target, key); 14 | Reflect.defineMetadata(MetadataKeys.method, method, target, key); 15 | }; 16 | }; 17 | } 18 | 19 | export const get = routeBinder(Methods.get); 20 | export const put = routeBinder(Methods.put); 21 | export const post = routeBinder(Methods.post); 22 | export const del = routeBinder(Methods.del); 23 | export const patch = routeBinder(Methods.patch); 24 | -------------------------------------------------------------------------------- /_Example/decorators/decorators/use.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | import { RequestHandler } from 'express'; 3 | import { MetadataKeys } from './MetadataKeys'; 4 | 5 | export function use(middleware: RequestHandler) { 6 | return function(target: any, key: string, desc: PropertyDescriptor) { 7 | const middlewares = 8 | Reflect.getMetadata(MetadataKeys.middleware, target, key) || []; 9 | 10 | Reflect.defineMetadata( 11 | MetadataKeys.middleware, 12 | [...middlewares, middleware], 13 | target, 14 | key 15 | ); 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /_Example/frontcast-basic/.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 | -------------------------------------------------------------------------------- /_Example/frontcast-basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.3.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 | -------------------------------------------------------------------------------- /_Example/frontcast-basic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | React App 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/App.css: -------------------------------------------------------------------------------- 1 | .center { 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/components/Product/Product.css: -------------------------------------------------------------------------------- 1 | .product { 2 | background: #ededf2; 3 | text-align: center; 4 | margin: 2rem auto; 5 | width: 50%; 6 | padding: 1rem; 7 | border-radius: 5px; 8 | box-shadow: 0 0 10px 5px rgb(0 0 0 / 33%); 9 | } -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/components/ProductList/ProductList.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Product from "../Product/Product"; 3 | 4 | class ProductList extends Component { 5 | shouldComponentUpdate(nextProps, nextState) { 6 | console.log("shouldComponentUpdate") 7 | return true 8 | } 9 | 10 | getSnapshotBeforeUpdate(prevProps, prevState) { 11 | console.log("getSnapshotBeforeUpdate") 12 | return null 13 | } 14 | 15 | componentDidUpdate() { 16 | console.log("componentDidUpdate") 17 | } 18 | 19 | render() { 20 | console.log(this.props) 21 | return this.props.products.map((item, index) => { 22 | return ( 23 | this.props.click(index)} 26 | title={item.title} 27 | price={item.price} 28 | change={(event) => this.props.change(event, item.id)} 29 | /> 30 | ) 31 | }) 32 | } 33 | } 34 | export default ProductList; -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/context/auth-context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const authContext = React.createContext({ 4 | auth: false, 5 | login: () => {} 6 | }) 7 | 8 | export default authContext; -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/hoc/Container.js: -------------------------------------------------------------------------------- 1 | const Container = props => props.children 2 | 3 | export default Container; -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/hoc/Wrapper.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Wrapper = (WrapperComponent, className) => { 4 | return (props) => ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Wrapper; -------------------------------------------------------------------------------- /_Example/frontcast-basic/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | font-family: sans-serif; 4 | } -------------------------------------------------------------------------------- /_Example/frontcast-basic/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 | 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); -------------------------------------------------------------------------------- /_Example/microfronted/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/microfronted/.DS_Store -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cart", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack serve" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "faker": "^5.1.0", 14 | "html-webpack-plugin": "^4.5.0", 15 | "webpack": "^5.4.0", 16 | "webpack-cli": "^4.3.0", 17 | "webpack-dev-server": "^3.11.0" 18 | } 19 | } -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/cart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/cart/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import faker from 'faker'; 2 | 3 | const mount = (el) => { 4 | const cartText = `
You have ${faker.random.number()} items in your cart
`; 5 | 6 | el.innerHTML = cartText; 7 | }; 8 | 9 | if (process.env.NODE_ENV === 'development') { 10 | const el = document.querySelector('#cart-dev'); 11 | 12 | if (el) { 13 | mount(el); 14 | } 15 | } 16 | 17 | export { mount }; 18 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/cart/src/index.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/cart/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devServer: { 7 | port: 8082, 8 | }, 9 | plugins: [ 10 | new ModuleFederationPlugin({ 11 | name: 'cart', 12 | filename: 'remoteEntry.js', 13 | exposes: { 14 | './CartShow': './src/bootstrap', 15 | }, 16 | shared: ['faker'] 17 | }), 18 | new HtmlWebpackPlugin({ 19 | template: './public/index.html', 20 | }), 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | hey 9 | 10 | 11 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "container", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack serve" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "nodemon": "^2.0.20", 14 | "html-webpack-plugin": "^v5.1.0", 15 | "webpack": "^5.4.0", 16 | "webpack-cli": "^4.5.0", 17 | "webpack-dev-server": "^3.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import { mount as productsMount } from 'products/ProductsIndex'; 2 | import { mount as cartMount } from 'cart/CartShow'; 3 | 4 | console.log('Container!'); 5 | 6 | productsMount(document.querySelector('#my-products')); 7 | cartMount(document.querySelector('#my-cart')); 8 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/src/index.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/container/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devServer: { 7 | port: 8080, 8 | }, 9 | plugins: [ 10 | new ModuleFederationPlugin({ 11 | name: 'container', 12 | remotes: { 13 | products: 'products@http://localhost:8081/remoteEntry.js', 14 | cart: 'cart@http://localhost:8082/remoteEntry.js', 15 | }, 16 | }), 17 | new HtmlWebpackPlugin({ 18 | template: './public/index.html', 19 | }), 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/auth/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "auth", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "test": "echo \"Error: no test specified\" && exit 1" 6 | }, 7 | "dependencies": { 8 | "@material-ui/core": "^4.11.0", 9 | "@material-ui/icons": "^4.9.1", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-router-dom": "^5.2.0" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.12.3", 16 | "@babel/plugin-transform-runtime": "^7.12.1", 17 | "@babel/preset-env": "^7.12.1", 18 | "@babel/preset-react": "^7.12.1", 19 | "babel-loader": "^8.1.0", 20 | "clean-webpack-plugin": "^3.0.0", 21 | "css-loader": "^5.0.0", 22 | "html-webpack-plugin": "^4.5.0", 23 | "style-loader": "^2.0.0", 24 | "webpack": "^5.4.0", 25 | "webpack-cli": "^4.1.0", 26 | "webpack-dev-server": "^3.11.0", 27 | "webpack-merge": "^5.2.0" 28 | } 29 | } -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/config/webpack.common.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | 3 | module.exports = { 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.m?js$/, 8 | exclude: /node_module/, 9 | use: { 10 | loader: 'babel-loader', 11 | options: { 12 | presets: ['@babel/preset-react', '@babel/preset-env'], 13 | plugins: ['@babel/plugin-transform-runtime'], 14 | }, 15 | }, 16 | }, 17 | ], 18 | }, 19 | plugins: [ 20 | new HtmlWebpackPlugin({ 21 | template: './public/index.html', 22 | }), 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | const commonConfig = require('./webpack.common'); 4 | const packageJson = require('../package.json'); 5 | 6 | const devConfig = { 7 | mode: 'development', 8 | devServer: { 9 | port: 8080, 10 | historyApiFallback: { 11 | index: 'index.html', 12 | }, 13 | }, 14 | plugins: [ 15 | new ModuleFederationPlugin({ 16 | name: 'container', 17 | remotes: { 18 | marketing: 'marketing@http://localhost:8081/remoteEntry.js', 19 | }, 20 | shared: packageJson.dependencies, 21 | }), 22 | ], 23 | }; 24 | 25 | module.exports = merge(commonConfig, devConfig); 26 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | const commonConfig = require('./webpack.common'); 4 | const packageJson = require('../package.json'); 5 | 6 | const domain = process.env.PRODUCTION_DOMAIN; 7 | 8 | const prodConfig = { 9 | mode: 'production', 10 | output: { 11 | filename: '[name].[contenthash].js', 12 | }, 13 | plugins: [ 14 | new ModuleFederationPlugin({ 15 | name: 'container', 16 | remotes: { 17 | marketing: `marketing@${domain}/marketing/remoteEntry.js`, 18 | }, 19 | shared: packageJson.dependencies, 20 | }), 21 | ], 22 | }; 23 | 24 | module.exports = merge(commonConfig, prodConfig); 25 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "container", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "webpack serve --config config/webpack.dev.js", 6 | "build": "webpack --config config/webpack.prod.js" 7 | }, 8 | "dependencies": { 9 | "@material-ui/core": "^4.11.0", 10 | "@material-ui/icons": "^4.9.1", 11 | "react": "^17.0.1", 12 | "react-dom": "^17.0.1", 13 | "react-router-dom": "^5.2.0" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.3", 17 | "@babel/plugin-transform-runtime": "^7.12.1", 18 | "@babel/preset-env": "^7.12.1", 19 | "@babel/preset-react": "^7.12.1", 20 | "babel-loader": "^8.1.0", 21 | "clean-webpack-plugin": "^3.0.0", 22 | "css-loader": "^5.0.0", 23 | "html-webpack-plugin": "^4.5.0", 24 | "style-loader": "^2.0.0", 25 | "webpack": "^5.4.0", 26 | "webpack-cli": "^4.1.0", 27 | "webpack-dev-server": "^3.11.0", 28 | "webpack-merge": "^5.2.0" 29 | } 30 | } -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | import { 4 | StylesProvider, 5 | createGenerateClassName, 6 | } from '@material-ui/core/styles'; 7 | import MarketingApp from './components/MarketingApp'; 8 | import Header from './components/Header'; 9 | 10 | const generateClassName = createGenerateClassName({ 11 | productionPrefix: 'co', 12 | }); 13 | 14 | export default () => { 15 | return ( 16 | 17 | 18 |
19 |
20 | 21 |
22 | 23 | 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.querySelector('#root')); 6 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/src/components/MarketingApp.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'marketing/MarketingApp'; 2 | import React, { useRef, useEffect } from 'react'; 3 | import { useHistory } from 'react-router-dom'; 4 | 5 | const MarketingApp = () => { 6 | const ref = useRef(null); 7 | const history = useHistory(); 8 | 9 | useEffect(() => { 10 | const { onParentNavigate } = mount(ref.current, { 11 | onNavigate: ({ pathname: nextPathname }) => { 12 | const { pathname } = history.location; 13 | if (pathname !== nextPathname) { 14 | history.push(nextPathname); 15 | } 16 | }, 17 | }); 18 | 19 | history.listen(onParentNavigate); 20 | }, []); 21 | 22 | return
; 23 | }; 24 | 25 | export default MarketingApp; 26 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/container/src/index.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/config/webpack.common.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.m?js$/, 6 | exclude: /node_module/, 7 | use: { 8 | loader: 'babel-loader', 9 | options: { 10 | presets: ['@babel/preset-react', '@babel/preset-env'], 11 | plugins: ['@babel/plugin-transform-runtime'], 12 | }, 13 | }, 14 | }, 15 | ], 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 4 | const commonConfig = require('./webpack.common'); 5 | const packageJson = require('../package.json'); 6 | 7 | const devConfig = { 8 | mode: 'development', 9 | devServer: { 10 | port: 8081, 11 | historyApiFallback: { 12 | index: 'index.html', 13 | }, 14 | }, 15 | plugins: [ 16 | new ModuleFederationPlugin({ 17 | name: 'marketing', 18 | filename: 'remoteEntry.js', 19 | exposes: { 20 | './MarketingApp': './src/bootstrap', 21 | }, 22 | shared: packageJson.dependencies, 23 | }), 24 | new HtmlWebpackPlugin({ 25 | template: './public/index.html', 26 | }), 27 | ], 28 | }; 29 | 30 | module.exports = merge(commonConfig, devConfig); 31 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | const commonConfig = require('./webpack.common'); 4 | const packageJson = require('../package.json'); 5 | 6 | 7 | const prodConfig = { 8 | mode: 'production', 9 | output: { 10 | filename: '[name].[contenthash].js', 11 | }, 12 | plugins: [ 13 | new ModuleFederationPlugin({ 14 | name: 'marketing', 15 | filename: 'remoteEntry.js', 16 | exposes: { 17 | './MarketingApp': './src/bootstrap', 18 | }, 19 | shared: packageJson.dependencies, 20 | }), 21 | ], 22 | }; 23 | 24 | module.exports = merge(commonConfig, prodConfig); 25 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marketing", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "webpack serve --config config/webpack.dev.js", 6 | "build": "webpack --config config/webpack.prod.js" 7 | }, 8 | "dependencies": { 9 | "@material-ui/core": "^4.11.0", 10 | "@material-ui/icons": "^4.9.1", 11 | "react": "^17.0.1", 12 | "react-dom": "^17.0.1", 13 | "react-router-dom": "^5.2.0" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.3", 17 | "@babel/plugin-transform-runtime": "^7.12.1", 18 | "@babel/preset-env": "^7.12.1", 19 | "@babel/preset-react": "^7.12.1", 20 | "babel-loader": "^8.1.0", 21 | "clean-webpack-plugin": "^3.0.0", 22 | "css-loader": "^5.0.0", 23 | "html-webpack-plugin": "^4.5.0", 24 | "style-loader": "^2.0.0", 25 | "webpack": "^5.4.0", 26 | "webpack-cli": "^4.1.0", 27 | "webpack-dev-server": "^3.11.0", 28 | "webpack-merge": "^5.2.0" 29 | } 30 | } -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Route, Router } from 'react-router-dom'; 3 | import { 4 | StylesProvider, 5 | createGenerateClassName, 6 | } from '@material-ui/core/styles'; 7 | 8 | import Landing from './components/Landing'; 9 | import Pricing from './components/Pricing'; 10 | 11 | const generateClassName = createGenerateClassName({ 12 | productionPrefix: 'ma', 13 | }); 14 | 15 | export default ({ history }) => { 16 | return ( 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/mfp/packages/marketing/src/index.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/products/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "products", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack serve" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "faker": "^5.1.0", 14 | "html-webpack-plugin": "^4.5.0", 15 | "webpack": "^5.4.0", 16 | "webpack-cli": "^4.3.0", 17 | "webpack-dev-server": "^3.11.0" 18 | } 19 | } -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/products/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/products/src/bootstrap.js: -------------------------------------------------------------------------------- 1 | import faker from 'faker'; 2 | 3 | const mount = (el) => { 4 | let products = ''; 5 | 6 | for (let i = 0; i < 5; i++) { 7 | const name = faker.commerce.productName(); 8 | products += `
${name}
`; 9 | } 10 | 11 | el.innerHTML = products; 12 | }; 13 | 14 | if (process.env.NODE_ENV === 'development') { 15 | const el = document.querySelector('#dev-products'); 16 | 17 | // Assuming our container doesnt have any element 18 | // with id 'dev-products'.... 19 | if (el) { 20 | // We are probably running in isolation 21 | mount(el); 22 | } 23 | } 24 | 25 | export { mount }; 26 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/products/src/index.js: -------------------------------------------------------------------------------- 1 | import('./bootstrap'); 2 | -------------------------------------------------------------------------------- /_Example/microfronted/ecomm/products/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | devServer: { 7 | port: 8081, 8 | }, 9 | plugins: [ 10 | new ModuleFederationPlugin({ 11 | name: 'products', 12 | filename: 'remoteEntry.js', 13 | exposes: { 14 | './ProductsIndex': './src/bootstrap', 15 | }, 16 | shared: ['faker'] 17 | }), 18 | new HtmlWebpackPlugin({ 19 | template: './public/index.html', 20 | }), 21 | ], 22 | }; 23 | 24 | // if this is set to singleton, it does matter how much 25 | // not same version for the libe it is going to be one 26 | // shared: { 27 | // faker: { 28 | // singleton: true, 29 | // }, 30 | // }, 31 | -------------------------------------------------------------------------------- /_Example/mo-coin/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /_Example/mo-coin/.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /_Example/mo-coin/apps/coin/coinBehaviours.ts: -------------------------------------------------------------------------------- 1 | // TODO: This file can be a place to cover functions and Typescript interfaces as Behaviours 2 | 3 | /* Defining the interface for the CoinType object. */ 4 | export interface CoinType { 5 | id: string; 6 | symbol: string; 7 | name: string; 8 | image: string; 9 | current_price: number; 10 | market_cap: number; 11 | total_volume: number; 12 | price_change_percentage_24h: number; 13 | price_change_percentage_7d_in_currency: number; 14 | last_updated: Date; 15 | circulating_supply: number; 16 | } 17 | 18 | /* Defining the interface for the CoinRequestType object. */ 19 | export interface CoinRequestType { 20 | page: number; 21 | currency: string; 22 | price_change?: string; 23 | per_page?: number; 24 | filter?: any; 25 | } 26 | -------------------------------------------------------------------------------- /_Example/mo-coin/apps/state/hooks.ts: -------------------------------------------------------------------------------- 1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; 2 | import type { RootState, AppDispatch } from './store'; 3 | 4 | // Use throughout your app instead of plain `useDispatch` and `useSelector` 5 | export const useAppDispatch = () => useDispatch(); 6 | /* A type definition for useSelector. */ 7 | export const useAppSelector: TypedUseSelectorHook = useSelector; 8 | -------------------------------------------------------------------------------- /_Example/mo-coin/apps/state/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'; 2 | import errorReducer from './general/errorSlice'; 3 | 4 | /* Creating a store with the reducer. */ 5 | export const store = configureStore({ 6 | reducer: { 7 | globalError: errorReducer, 8 | }, 9 | }); 10 | 11 | export type AppDispatch = typeof store.dispatch; 12 | export type RootState = ReturnType; 13 | export type AppThunk = ThunkAction< 14 | ReturnType, 15 | RootState, 16 | unknown, 17 | Action 18 | >; 19 | -------------------------------------------------------------------------------- /_Example/mo-coin/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | images: { 6 | remotePatterns: [ 7 | { 8 | protocol: 'https', 9 | hostname: 'assets.coingecko.com', 10 | }, 11 | ], 12 | }, 13 | } 14 | 15 | module.exports = nextConfig -------------------------------------------------------------------------------- /_Example/mo-coin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mo-coin", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@reduxjs/toolkit": "^1.8.6", 13 | "@tanstack/react-query": "^4.13.5", 14 | "axios": "^1.1.3", 15 | "next": "13.0.1", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "react-redux": "^8.0.4" 19 | }, 20 | "devDependencies": { 21 | "@tanstack/react-query-devtools": "^4.14.1", 22 | "@types/node": "18.11.8", 23 | "@types/react": "18.0.24", 24 | "@types/react-dom": "18.0.8", 25 | "autoprefixer": "^10.4.13", 26 | "eslint": "8.26.0", 27 | "eslint-config-next": "13.0.1", 28 | "postcss": "^8.4.18", 29 | "tailwindcss": "^3.2.1", 30 | "typescript": "4.8.4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /_Example/mo-coin/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css'; 2 | import type { AppProps } from 'next/app'; 3 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 4 | import Layout from '../template/layout/layout'; 5 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; 6 | import { Provider as ReduxProvider } from 'react-redux'; 7 | import { store } from '../apps/state/store'; 8 | 9 | const queryClient = new QueryClient(); 10 | 11 | // TODO: The ReactQueryDevtools component should be considered as a developer tools and can be deleted in production mode 12 | function MyApp({ Component, pageProps }: AppProps) { 13 | return ( 14 | <> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default MyApp; 28 | -------------------------------------------------------------------------------- /_Example/mo-coin/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /_Example/mo-coin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/mo-coin/public/favicon.ico -------------------------------------------------------------------------------- /_Example/mo-coin/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/mo-coin/public/logo.png -------------------------------------------------------------------------------- /_Example/mo-coin/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /_Example/mo-coin/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | body { 7 | @apply dark:bg-black; 8 | @apply bg-white; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_Example/mo-coin/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: 'class', 4 | content: ['./pages/**/*.{js,ts,jsx,tsx}', './template/**/*.{js,ts,jsx,tsx}'], 5 | theme: { 6 | extend: { 7 | container: { 8 | padding: '1.5rem', 9 | center: true, 10 | screens: { 11 | sm: '600px', 12 | md: '728px', 13 | lg: '984px', 14 | xl: '1000px', 15 | '2xl': '1200px', 16 | }, 17 | }, 18 | }, 19 | }, 20 | plugins: [], 21 | }; 22 | -------------------------------------------------------------------------------- /_Example/mo-coin/template/client/home/HomeTemplate.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from 'next'; 2 | import CoinsPartial from './components/CoinsPartial'; 3 | import HeaderPartial from './components/HeaderPartial'; 4 | import { CoinType } from '../../../apps/coin/coinBehaviours'; 5 | 6 | /* Defining the props that the HomeTemplate component will receive. */ 7 | interface HomeTemplateType { 8 | coins: CoinType[]; 9 | pagination: (action: 'previous' | 'next') => void; 10 | page: number; 11 | supportedCoins: () => void; 12 | resetData: () => void; 13 | } 14 | 15 | const HomeTemplate: NextPage = ({ 16 | coins, 17 | pagination, 18 | supportedCoins, 19 | resetData, 20 | }) => { 21 | return ( 22 | <> 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default HomeTemplate; 30 | -------------------------------------------------------------------------------- /_Example/mo-coin/template/layout/UI/CrightComponent.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from 'next'; 2 | 3 | const CrightComponent: NextPage = () => { 4 | return ( 5 |

6 | 7 | Made by Mishka.Group © 2020-2022 8 | 9 |

10 | ); 11 | }; 12 | 13 | export default CrightComponent; 14 | -------------------------------------------------------------------------------- /_Example/mo-coin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/error-alert/error-alert.js: -------------------------------------------------------------------------------- 1 | import classes from './error-alert.module.css'; 2 | 3 | function ErrorAlert(props) { 4 | return
{props.children}
; 5 | } 6 | 7 | export default ErrorAlert; 8 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/error-alert/error-alert.module.css: -------------------------------------------------------------------------------- 1 | .alert { 2 | margin: 1rem auto; 3 | padding: 1rem 2rem; 4 | width: 90%; 5 | max-width: 40rem; 6 | background-color: #d5bdfc; 7 | color: #38028d; 8 | font-weight: bold; 9 | font-size: 1.5rem; 10 | text-align: center; 11 | border-radius: 6px; 12 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/event-content.js: -------------------------------------------------------------------------------- 1 | import classes from './event-content.module.css'; 2 | 3 | function EventContent(props) { 4 | return ( 5 |
6 | {props.children} 7 |
8 | ); 9 | } 10 | 11 | export default EventContent; 12 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/event-content.module.css: -------------------------------------------------------------------------------- 1 | .content { 2 | font-size: 1.5rem; 3 | color: #3a3a3a; 4 | width: 90%; 5 | max-width: 40em; 6 | margin: auto; 7 | margin-top: 8rem; 8 | text-align: center; 9 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/event-summary.js: -------------------------------------------------------------------------------- 1 | import classes from './event-summary.module.css'; 2 | 3 | function EventSummary(props) { 4 | const { title } = props; 5 | 6 | return ( 7 |
8 |

{title}

9 |
10 | ); 11 | } 12 | 13 | export default EventSummary; -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/event-summary.module.css: -------------------------------------------------------------------------------- 1 | .summary { 2 | width: 100%; 3 | height: 30vh; 4 | background-image: linear-gradient(to bottom left, #008b79, #1180a1); 5 | } 6 | 7 | .summary h1 { 8 | margin: 0; 9 | padding-top: 3rem; 10 | font-size: 2rem; 11 | text-align: center; 12 | text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); 13 | color: white; 14 | } 15 | 16 | @media (min-width: 768px) { 17 | .summary h1 { 18 | font-size: 5rem; 19 | } 20 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/logistics-item.js: -------------------------------------------------------------------------------- 1 | import classes from './logistics-item.module.css'; 2 | 3 | function LogisticsItem(props) { 4 | const { icon: Icon } = props; 5 | 6 | return ( 7 |
  • 8 | 9 | 10 | 11 | {props.children} 12 |
    • 13 | ); 14 | } 15 | 16 | export default LogisticsItem; 17 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/event-detail/logistics-item.module.css: -------------------------------------------------------------------------------- 1 | .item { 2 | display: flex; 3 | font-size: 1.5rem; 4 | align-items: center; 5 | flex-direction: column; 6 | text-align: center; 7 | color: #aefff8; 8 | } 9 | 10 | .item span { 11 | display: block; 12 | } 13 | 14 | .icon { 15 | margin-right: 1rem; 16 | color: #18e0d0; 17 | } 18 | 19 | .icon svg { 20 | width: 2rem; 21 | height: 2rem; 22 | } 23 | 24 | @media (min-width: 768px) { 25 | .item { 26 | align-items: flex-start; 27 | text-align: left; 28 | } 29 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/events/event-list.js: -------------------------------------------------------------------------------- 1 | import EventItem from './event-item'; 2 | import classes from './event-list.module.css'; 3 | 4 | const EventList = (props) => { 5 | const { items } = props; 6 | 7 | return ( 8 |
      9 | {items.map((event) => ( 10 | 18 | ))} 19 |
    20 | ); 21 | }; 22 | 23 | export default EventList; 24 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/events/event-list.module.css: -------------------------------------------------------------------------------- 1 | .list { 2 | width: 90%; 3 | max-width: 40rem; 4 | margin: 5rem auto; 5 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/icons/address-icon.js: -------------------------------------------------------------------------------- 1 | function AddressIcon() { 2 | return ( 3 | 9 | 15 | 21 | 22 | ); 23 | } 24 | 25 | export default AddressIcon; 26 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/icons/arrow-right-icon.js: -------------------------------------------------------------------------------- 1 | function ArrowRightIcon() { 2 | return ( 3 | 8 | 13 | 14 | ); 15 | } 16 | 17 | export default ArrowRightIcon; 18 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/icons/date-icon.js: -------------------------------------------------------------------------------- 1 | function DateIcon() { 2 | return ( 3 | 9 | 15 | 16 | ); 17 | } 18 | 19 | export default DateIcon; -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/layout/layout.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react'; 2 | import MainHeader from './main-header'; 3 | 4 | const Layout = (props) => { 5 | return ( 6 | 7 | 8 |
    {props.children}
    9 |     10 | ); 11 | }; 12 | 13 | export default Layout; 14 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/layout/main-header.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import classes from './main-header.module.css'; 3 | 4 | const MainHeader = () => { 5 | return ( 6 |
    7 |
    8 | NextEvents 9 |
    10 | 11 | 18 |
    19 | ); 20 | }; 21 | 22 | export default MainHeader; 23 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/layout/main-header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | width: 100%; 3 | display: flex; 4 | justify-content: space-between; 5 | align-items: baseline; 6 | padding: 1rem 10%; 7 | height: 5rem; 8 | background-color: #202020; 9 | } 10 | 11 | .logo { 12 | font-size: 1.5rem; 13 | color: white; 14 | font-family: 'Fira', sans-serif; 15 | height: 100%; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | color: #94fdfd; 20 | } 21 | 22 | .logo a { 23 | text-decoration: none; 24 | color: #94fdfd; 25 | } 26 | 27 | .navigation a { 28 | text-decoration: none; 29 | color: #74dacc; 30 | font-size: 1rem; 31 | } 32 | 33 | @media (min-width: 768px) { 34 | .logo { 35 | font-size: 2.5rem; 36 | } 37 | 38 | .navigation a { 39 | font-size: 1.5rem; 40 | } 41 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/results-title/results-title.js: -------------------------------------------------------------------------------- 1 | import Button from '../ui/button'; 2 | import classes from './results-title.module.css'; 3 | 4 | function ResultsTitle(props) { 5 | const { date } = props; 6 | 7 | const humanReadableDate = new Date(date).toLocaleDateString('en-US', { 8 | month: 'long', 9 | year: 'numeric', 10 | }); 11 | 12 | return ( 13 |
    14 |

    Events in {humanReadableDate}

    15 | 16 |
    17 | ); 18 | } 19 | 20 | export default ResultsTitle; 21 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/results-title/results-title.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | margin: 2rem auto; 3 | width: 90%; 4 | max-width: 40rem; 5 | text-align: center; 6 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/ui/button.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import classes from './button.module.css'; 3 | 4 | const Button = (props) => { 5 | if (props.link) { 6 | return ( 7 | 8 | {props.children} 9 | 10 | ); 11 | } 12 | 13 | return ( 14 | 17 | ); 18 | }; 19 | 20 | export default Button; 21 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/components/ui/button.module.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | text-decoration: none; 3 | cursor: pointer; 4 | font: inherit; 5 | background-color: #03be9f; 6 | border: 1px solid #03be9f; 7 | border-radius: 6px; 8 | color: #dafff7; 9 | padding: 0.5rem 1.5rem; 10 | text-align: center; 11 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); 12 | } 13 | 14 | .btn:hover, 15 | .btn:active { 16 | background-color: #02afa1; 17 | border-color: #02afa1; 18 | } -------------------------------------------------------------------------------- /_Example/nextjs-event-page/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-course", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.2.5", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0" 15 | }, 16 | "devDependencies": { 17 | "eslint": "8.22.0", 18 | "eslint-config-next": "12.2.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/pages/_app.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/layout/layout'; 2 | import '../styles/globals.css'; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | export default MyApp; 13 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/pages/events/index.js: -------------------------------------------------------------------------------- 1 | import { getAllEvents } from '../../dummy-data'; 2 | import EventList from '../../components/events/event-list'; 3 | import EventSearch from '../../components/events/events-search'; 4 | import { Fragment } from 'react'; 5 | import { useRouter } from 'next/router'; 6 | 7 | const AllEventsPage = () => { 8 | const events = getAllEvents(); 9 | const router = useRouter(); 10 | 11 | function findEvenetsHandler(year, month) { 12 | const fullPath = `/events/${year}/${month}`; 13 | 14 | router.push(fullPath); 15 | } 16 | 17 | return ( 18 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default AllEventsPage; 26 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/pages/index.js: -------------------------------------------------------------------------------- 1 | import { getFeaturedEvents } from '../dummy-data'; 2 | import EvenList from '../components/events/event-list'; 3 | 4 | const HomePage = () => { 5 | const featuredEvents = getFeaturedEvents(); 6 | 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | }; 13 | 14 | export default HomePage; 15 | -------------------------------------------------------------------------------- /_Example/nextjs-event-page/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/nextjs-event-page/public/favicon.ico -------------------------------------------------------------------------------- /_Example/nextjs-event-page/public/images/coding-event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/nextjs-event-page/public/images/coding-event.jpg -------------------------------------------------------------------------------- /_Example/nextjs-event-page/public/images/extrovert-event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/nextjs-event-page/public/images/extrovert-event.jpg -------------------------------------------------------------------------------- /_Example/nextjs-event-page/public/images/introvert-event.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/nextjs-event-page/public/images/introvert-event.jpg -------------------------------------------------------------------------------- /_Example/nextjs-event-page/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: blue; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | .center { 19 | text-align: center; 20 | } 21 | 22 | @media (prefers-color-scheme: dark) { 23 | html { 24 | color-scheme: dark; 25 | } 26 | body { 27 | color: white; 28 | background: black; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/data/dummy-backend.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { "id": "p1", "title": "Product 1", "description": "This is product 1" }, 4 | { "id": "p2", "title": "Product 2", "description": "This is product 2" }, 5 | { "id": "p3", "title": "Product 3", "description": "This is product 3" } 6 | ] 7 | } -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-course", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "fs": "^0.0.1-security", 13 | "next": "12.2.5", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0", 16 | "swr": "^1.3.0" 17 | }, 18 | "devDependencies": { 19 | "eslint": "8.23.0", 20 | "eslint-config-next": "12.2.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/pages/[uid].js: -------------------------------------------------------------------------------- 1 | function UserIdPage(props) { 2 | return

    {props.id}

    ; 3 | } 4 | 5 | export default UserIdPage; 6 | 7 | export async function getServerSideProps(contex) { 8 | const { params } = contex; 9 | const userId = params.uid; 10 | 11 | return { 12 | props: { 13 | id: 'userid-' + userId, 14 | }, 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/pages/index.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import fs from 'fs/promises'; 3 | import Link from 'next/link'; 4 | 5 | function Home(props) { 6 | const { products } = props; 7 | 8 | return ( 9 |
      10 | {products.map((product) => ( 11 |
    • 12 | {product.title} 13 |
      • 14 | ))} 15 |
    16 | ); 17 | } 18 | 19 | export default Home; 20 | 21 | export async function getStaticProps() { 22 | console.log('Re Generate'); 23 | const filePath = path.join(process.cwd(), 'data', 'dummy-backend.json'); 24 | const jsonData = await fs.readFile(filePath); 25 | const data = JSON.parse(jsonData); 26 | 27 | return { 28 | props: { 29 | products: data.products, 30 | }, 31 | revalidate: 120, 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/pages/user-profile.js: -------------------------------------------------------------------------------- 1 | const UserProfilePage = (props) => { 2 | return

    {props.username}

    ; 3 | }; 4 | 5 | export default UserProfilePage; 6 | 7 | export async function getServerSideProps(contex) { 8 | const { params, req, res } = contex; 9 | 10 | console.log(req); 11 | console.log(res); 12 | 13 | console.log('Server Side Code'); 14 | 15 | return { 16 | props: { 17 | username: 'Shahryar', 18 | }, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/nextjs-using-data-fetchs/public/favicon.ico -------------------------------------------------------------------------------- /_Example/nextjs-using-data-fetchs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: blue; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /_Example/react-testing/.env: -------------------------------------------------------------------------------- 1 | VITE_AUTH0_DOMAIN= 2 | VITE_AUTH0_CLIENTID= -------------------------------------------------------------------------------- /_Example/react-testing/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended", 7 | "plugin:react-hooks/recommended", 8 | ], 9 | ignorePatterns: ["dist", ".eslintrc.cjs"], 10 | parser: "@typescript-eslint/parser", 11 | plugins: ["react-refresh"], 12 | rules: { 13 | "react-refresh/only-export-components": [ 14 | "warn", 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /_Example/react-testing/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | 27 | coverage/ 28 | /test-results/ 29 | /playwright-report/ 30 | /blob-report/ 31 | /playwright/.cache/ 32 | /test-results/ 33 | /playwright-report/ 34 | /blob-report/ 35 | /playwright/.cache/ 36 | /e2e/playwright/.auth/ -------------------------------------------------------------------------------- /_Example/react-testing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Testing React Apps 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_Example/react-testing/json-server.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 3000, 3 | "static": "./public/json-server" 4 | } 5 | -------------------------------------------------------------------------------- /_Example/react-testing/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /_Example/react-testing/public/json-server/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JSON Server 7 | 8 | 9 |

    JSON Server is running!

    10 | 11 | 12 | -------------------------------------------------------------------------------- /_Example/react-testing/setup.ts: -------------------------------------------------------------------------------- 1 | import { server } from './src/mocks/server'; 2 | import '@testing-library/jest-dom/vitest'; 3 | 4 | import { vi } from 'vitest'; 5 | 6 | const { getComputedStyle } = window; 7 | window.getComputedStyle = (elt) => getComputedStyle(elt); 8 | window.HTMLElement.prototype.scrollIntoView = () => {}; 9 | 10 | Object.defineProperty(window, 'matchMedia', { 11 | writable: true, 12 | value: vi.fn().mockImplementation((query) => ({ 13 | matches: false, 14 | media: query, 15 | onchange: null, 16 | addListener: vi.fn(), 17 | removeListener: vi.fn(), 18 | addEventListener: vi.fn(), 19 | removeEventListener: vi.fn(), 20 | dispatchEvent: vi.fn(), 21 | })), 22 | }); 23 | 24 | class ResizeObserver { 25 | observe() {} 26 | unobserve() {} 27 | disconnect() {} 28 | } 29 | 30 | window.ResizeObserver = ResizeObserver; 31 | 32 | beforeAll(() => server.listen({ onUnhandledRequest: 'error' })) 33 | afterAll(() => server.close()) 34 | afterEach(() => server.resetHandlers()) -------------------------------------------------------------------------------- /_Example/react-testing/src/App.css: -------------------------------------------------------------------------------- 1 | .dd{ 2 | padding:10px; 3 | } -------------------------------------------------------------------------------- /_Example/react-testing/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css" 2 | import CharacterSelect from "./components/CharacterSelect"; 3 | 4 | function App() { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /_Example/react-testing/src/components/TotalCostCalculator.tsx: -------------------------------------------------------------------------------- 1 | 2 | interface TotalCostCalculatorProps { 3 | price: number; 4 | taxRate: number; 5 | tip?: number; 6 | } 7 | 8 | const TotalCostCalculator: React.FC = ({ price, taxRate, tip = 0 }) => { 9 | const taxAmount = price * (taxRate / 100); 10 | const totalCost = price + taxAmount + tip; 11 | 12 | return ( 13 |
    14 |

    Total Cost Calculator

    15 |
    16 |

    Price: ${price.toFixed(2)}

    17 |

    Tax ({taxRate}%): ${taxAmount.toFixed(2)}

    18 |

    Tip: ${tip.toFixed(2)}

    19 |

    Total Cost: ${totalCost.toFixed(2)}

    20 |
    21 |
    22 | ); 23 | }; 24 | 25 | export default TotalCostCalculator; 26 | -------------------------------------------------------------------------------- /_Example/react-testing/src/entities.ts: -------------------------------------------------------------------------------- 1 | export type User = { 2 | id: number; 3 | name: string; 4 | isAdmin?: boolean; 5 | }; 6 | 7 | export type Category = { 8 | id: number; 9 | name: string; 10 | }; 11 | 12 | export type Product = { 13 | id: number; 14 | name: string; 15 | price: number; 16 | categoryId: number; 17 | }; -------------------------------------------------------------------------------- /_Example/react-testing/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { RouterProvider, createBrowserRouter } from 'react-router-dom'; 4 | import routes from './routes'; 5 | import { MantineProvider } from '@mantine/core'; 6 | import '@mantine/core/styles.css'; 7 | import './index.css'; 8 | 9 | const router = createBrowserRouter(routes); 10 | 11 | ReactDOM.createRoot(document.getElementById('root')!).render( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /_Example/react-testing/src/mocks/handlers.ts: -------------------------------------------------------------------------------- 1 | import { http, HttpResponse } from 'msw'; 2 | 3 | export const handlers = [ 4 | http.get('https://the-one-api.dev/v2/character', () => { 5 | return HttpResponse.json({ 6 | "docs": [ 7 | { 8 | "_id": "5cd99d4bde30eff6ebccfbbe", 9 | "name": "Adanel", 10 | } 11 | ] 12 | }, { status: 200 }) 13 | }), 14 | ] -------------------------------------------------------------------------------- /_Example/react-testing/src/mocks/server.ts: -------------------------------------------------------------------------------- 1 | import { setupServer } from 'msw/node' 2 | import { handlers } from './handlers' 3 | 4 | export const server = setupServer(...handlers) -------------------------------------------------------------------------------- /_Example/react-testing/src/routes.tsx: -------------------------------------------------------------------------------- 1 | import { RouteObject } from "react-router-dom"; 2 | import App from "./App.tsx"; 3 | 4 | 5 | const routes: RouteObject[] = [ 6 | { 7 | path: "/", 8 | element: 9 | }, 10 | ]; 11 | 12 | export default routes; 13 | -------------------------------------------------------------------------------- /_Example/react-testing/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /_Example/react-testing/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [ 8 | require('@tailwindcss/typography'), 9 | ], 10 | }; 11 | -------------------------------------------------------------------------------- /_Example/react-testing/test-utils/index.ts: -------------------------------------------------------------------------------- 1 | import userEvent from '@testing-library/user-event'; 2 | 3 | export * from '@testing-library/react'; 4 | export { render } from './render'; 5 | export { userEvent }; -------------------------------------------------------------------------------- /_Example/react-testing/test-utils/render.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { render as testingLibraryRender } from '@testing-library/react'; 3 | import { MantineProvider } from '@mantine/core'; 4 | 5 | export function render(ui: React.ReactElement) { 6 | return testingLibraryRender(ui, { 7 | wrapper: ({ children }: { children: ReactNode }) => ( 8 | 9 | {children} 10 | 11 | ), 12 | }); 13 | } 14 | 15 | -------------------------------------------------------------------------------- /_Example/react-testing/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | "types": ["node", "@testing-library/jest-dom", "vitest/globals"], 9 | "paths": { 10 | "@/*": ["./src/*"], 11 | "@test-utils": ["./test-utils/index.ts"] 12 | }, 13 | "moduleResolution": "node", 14 | "allowImportingTsExtensions": true, 15 | "resolveJsonModule": true, 16 | "isolatedModules": true, 17 | "noEmit": true, 18 | "jsx": "react-jsx", 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": false, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src", "setup.ts"], 25 | "references": [{ "path": "./tsconfig.node.json" }] 26 | } 27 | -------------------------------------------------------------------------------- /_Example/react-testing/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /_Example/react-testing/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from "@vitejs/plugin-react"; 2 | import { defineConfig } from "vite"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /_Example/react-testing/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | environment: 'jsdom', 6 | globals: true, 7 | setupFiles: "setup.ts" 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /_Example/redux/public/images/airpods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/airpods.jpg -------------------------------------------------------------------------------- /_Example/redux/public/images/apple-watch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/apple-watch.jpg -------------------------------------------------------------------------------- /_Example/redux/public/images/iphone-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/iphone-12.jpg -------------------------------------------------------------------------------- /_Example/redux/public/images/iphone-se.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/iphone-se.jpg -------------------------------------------------------------------------------- /_Example/redux/public/images/macbook.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/macbook.jpg -------------------------------------------------------------------------------- /_Example/redux/public/images/mouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/redux/public/images/mouse.jpg -------------------------------------------------------------------------------- /_Example/redux/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FC Market 6 | 7 | 8 | 9 |
    10 | 11 | 12 | -------------------------------------------------------------------------------- /_Example/redux/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter as Router, Route } from 'react-router-dom' 3 | import { Container } from 'react-bootstrap' 4 | 5 | import Home from './pages/Home' 6 | import Product from './pages/Product' 7 | import Cart from './pages/Cart' 8 | 9 | import Header from './components/Header/Header' 10 | import Footer from './components/Footer/Footer' 11 | 12 | const App = () => { 13 | return ( 14 | 15 |
    16 |
    17 | 18 | 19 | 20 | 21 | 22 |
    23 |
    24 | 25 | ) 26 | } 27 | 28 | export default App 29 | -------------------------------------------------------------------------------- /_Example/redux/src/action/cartAction.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export const addTocart = (id) => async (dispatch, getState) => { 4 | const { data } = await axios.get(`http://localhost:8000/api/products/${id}`) 5 | 6 | dispatch({ 7 | type: 'CART_ADD_ITEM', 8 | paylod: { 9 | product: data._id, 10 | name: data.name, 11 | image: data.image, 12 | price: data.price, 13 | }, 14 | }) 15 | 16 | localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems)) 17 | } 18 | 19 | export const removeFromCart = (id) => (dispatch, getState) => { 20 | dispatch({ 21 | type: 'CART_REMOVE_ITEM', 22 | payload: id, 23 | }) 24 | 25 | localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems)) 26 | } 27 | -------------------------------------------------------------------------------- /_Example/redux/src/action/productAction.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export const productListAction = () => async (dispatch) => { 4 | try { 5 | dispatch({ type: 'PRODUCT_LIST_REQUEST' }) 6 | 7 | const { data } = await axios.get('http://localhost:8000/api/products') 8 | 9 | dispatch({ 10 | type: 'PRODUCT_LIST_SUCCESS', 11 | payload: data, 12 | }) 13 | } catch (error) { 14 | console.log(error) 15 | } 16 | } 17 | 18 | export const productDetailAction = (id) => async (dispatch) => { 19 | try { 20 | dispatch({ type: 'PRODUCT_DETAIL_REQUEST' }) 21 | 22 | const { data } = await axios.get(`http://localhost:8000/api/products/${id}`) 23 | 24 | dispatch({ 25 | type: 'PRODUCT_DETAIL_SUCCESS', 26 | payload: data, 27 | }) 28 | } catch (error) { 29 | console.log(error) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_Example/redux/src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Container, Row, Col } from 'react-bootstrap' 3 | 4 | const Footer = () => { 5 | return ( 6 |
    7 | 8 | 9 | Footer 10 | 11 | 12 |
    13 | ) 14 | } 15 | 16 | export default Footer 17 | -------------------------------------------------------------------------------- /_Example/redux/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .nav-bg { 2 | background: #3949ab; 3 | } 4 | -------------------------------------------------------------------------------- /_Example/redux/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { LinkContainer } from 'react-router-bootstrap' 3 | import { Container, Navbar, Nav } from 'react-bootstrap' 4 | 5 | import './Header.css' 6 | 7 | const Header = () => { 8 | return ( 9 |
    10 | 11 | 12 | 13 | FC Market 14 | 15 | 27 | 28 | 29 |
    30 | ) 31 | } 32 | 33 | export default Header 34 | -------------------------------------------------------------------------------- /_Example/redux/src/components/Product/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { Card } from 'react-bootstrap' 4 | 5 | const Product = ({ product }) => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {product.name} 15 | 16 | 17 | 18 | {product.price} 19 | 20 | ) 21 | } 22 | 23 | export default Product 24 | -------------------------------------------------------------------------------- /_Example/redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | main { 7 | min-height: 80vh; 8 | } 9 | -------------------------------------------------------------------------------- /_Example/redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { Provider } from 'react-redux' 4 | 5 | import App from './App' 6 | import store from './store' 7 | 8 | import 'bootstrap/dist/css/bootstrap.min.css' 9 | import 'font-awesome/css/font-awesome.min.css' 10 | import './index.css' 11 | 12 | ReactDOM.render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ) 18 | -------------------------------------------------------------------------------- /_Example/redux/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react' 2 | import { useDispatch, useSelector } from 'react-redux' 3 | import { Row, Col } from 'react-bootstrap' 4 | 5 | import Product from '../components/Product/Product' 6 | import { productListAction } from '../action/productAction' 7 | 8 | const Home = () => { 9 | const dispatch = useDispatch() 10 | 11 | const productList = useSelector((state) => state.productList) 12 | 13 | const { loading, products } = productList 14 | 15 | useEffect(() => { 16 | dispatch(productListAction()) 17 | }, [dispatch]) 18 | 19 | return ( 20 |
    21 |

    محصولات

    22 | {loading ? ( 23 |

    در حال دریافت محصولات....

    24 | ) : ( 25 | 26 | {products.map((item) => { 27 | return ( 28 | 29 | 30 | 31 | ) 32 | })} 33 | 34 | )} 35 |
    36 | ) 37 | } 38 | 39 | export default Home 40 | -------------------------------------------------------------------------------- /_Example/redux/src/products.js: -------------------------------------------------------------------------------- 1 | const products = [ 2 | { 3 | _id: '1', 4 | name: 'Airpods', 5 | image: '/images/airpods.jpg', 6 | description: 'توضیحات محصول', 7 | price: 99, 8 | }, 9 | { 10 | _id: '2', 11 | name: 'Apple Watch', 12 | image: '/images/apple-watch.jpg', 13 | description: 'توضیحات محصول', 14 | price: 79, 15 | }, 16 | { 17 | _id: '3', 18 | name: 'iPhone 12', 19 | image: '/images/iphone-12.jpg', 20 | description: 'توضیحات محصول', 21 | price: 89, 22 | }, 23 | { 24 | _id: '4', 25 | name: 'iPhone SE', 26 | image: '/images/iphone-se.jpg', 27 | description: 'توضیحات محصول', 28 | price: 29, 29 | }, 30 | { 31 | _id: '5', 32 | name: 'MacBook Pro', 33 | image: '/images/macbook.jpg', 34 | description: 'توضیحات محصول', 35 | price: 89, 36 | }, 37 | { 38 | _id: '6', 39 | name: 'Logitech MX Master', 40 | image: '/images/mouse.jpg', 41 | description: 'توضیحات محصول', 42 | price: 59, 43 | }, 44 | ] 45 | 46 | export default products 47 | -------------------------------------------------------------------------------- /_Example/redux/src/reducer/cartReducer.js: -------------------------------------------------------------------------------- 1 | export const cartReducer = (state = { cartItems: [] }, action) => { 2 | switch (action.type) { 3 | case 'CART_ADD_ITEM': 4 | const item = action.paylod 5 | 6 | const existingItem = state.cartItems.find( 7 | (i) => i.product === item.product 8 | ) 9 | 10 | if (existingItem) { 11 | return { 12 | ...state, 13 | cartItems: state.cartItems.map((i) => 14 | i.product === existingItem.product ? item : i 15 | ), 16 | } 17 | } else { 18 | return { 19 | ...state, 20 | cartItems: [...state.cartItems, item], 21 | } 22 | } 23 | case 'CART_REMOVE_ITEM': 24 | return { 25 | ...state, 26 | cartItems: state.cartItems.filter((i) => i.product !== action.payload), 27 | } 28 | default: 29 | return state 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_Example/redux/src/reducer/productReducer.js: -------------------------------------------------------------------------------- 1 | export const productListReducer = (state = { products: [] }, action) => { 2 | switch (action.type) { 3 | case 'PRODUCT_LIST_REQUEST': 4 | return { loading: true, products: [] } 5 | case 'PRODUCT_LIST_SUCCESS': 6 | return { loading: false, products: action.payload } 7 | default: 8 | return state 9 | } 10 | } 11 | 12 | export const productDetailReducer = (state = { product: {} }, action) => { 13 | switch (action.type) { 14 | case 'PRODUCT_DETAIL_REQUEST': 15 | return { loading: true, ...state } 16 | case 'PRODUCT_DETAIL_SUCCESS': 17 | return { loading: false, product: action.payload } 18 | default: 19 | return state 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /_Example/redux/src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, applyMiddleware } from 'redux' 2 | import thunk from 'redux-thunk' 3 | 4 | import { 5 | productListReducer, 6 | productDetailReducer, 7 | } from './reducer/productReducer' 8 | 9 | import { cartReducer } from './reducer/cartReducer' 10 | 11 | const reducer = combineReducers({ 12 | productList: productListReducer, 13 | productDetail: productDetailReducer, 14 | cart: cartReducer, 15 | }) 16 | 17 | const cartItemsFromLocalStorage = localStorage.getItem('cartItems') 18 | ? JSON.parse(localStorage.getItem('cartItems')) 19 | : [] 20 | 21 | const initialState = { 22 | cart: { cartItems: cartItemsFromLocalStorage }, 23 | } 24 | 25 | const middleware = [thunk] 26 | 27 | const store = createStore(reducer, initialState, applyMiddleware(...middleware)) 28 | 29 | export default store 30 | -------------------------------------------------------------------------------- /_Example/sample-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rxjs-learn", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "lite-server", 8 | "build": "./node_modules/.bin/esbuild src/index.ts --bundle --outfile=dist/index.js", 9 | "build1": "./build.js --watch" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "@types/node": "^18.11.5", 15 | "lite-server": "^2.6.1", 16 | "rxjs": "^7.5.7" 17 | }, 18 | "devDependencies": { 19 | "esbuild": "^0.15.12" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /_Example/tailwind/FUNCTION-DIRECTIVES/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | h1 { 7 | @apply text-3xl; 8 | } 9 | h2 { 10 | @apply text-xl; 11 | } 12 | } 13 | 14 | @layer components { 15 | .btn-blue { 16 | @apply bg-blue-500 py-2 px-4 rounded-xl font-bold hover:bg-blue-700 text-white; 17 | } 18 | } 19 | 20 | .content-area { 21 | @apply bg-green-200; 22 | height: theme('spacing.128'); 23 | } 24 | 25 | @media screen(xl) { 26 | body { 27 | @apply bg-black text-white; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /_Example/tailwind/FUNCTION-DIRECTIVES/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/FUNCTION-DIRECTIVES/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | extend: { 6 | spacing: { 7 | 128: '32rem', 8 | }, 9 | }, 10 | }, 11 | plugins: [], 12 | }; 13 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/bg-dots.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/bookmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/bookmark/images/bookmark.png -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/bookmark/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/logo-chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/logo-firefox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/images/logo-opera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/bookmark/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | screens: { 6 | sm: '480px', 7 | md: '768px', 8 | lg: '1020px', 9 | xl: '1440px', 10 | }, 11 | extend: { 12 | colors: { 13 | softBlue: 'hsl(231, 69%, 60%)', 14 | softRed: 'hsl(0, 94%, 66%)', 15 | grayishBlue: 'hsl(229, 8%, 60%)', 16 | veryDarkBlue: 'hsl(229, 31%, 21%)', 17 | }, 18 | fontFamily: { 19 | sans: ['Rubik', 'sans-serif'], 20 | }, 21 | backgroundImage: () => ({ 22 | dots: "url('../images/bg-dots.svg')", 23 | }), 24 | }, 25 | }, 26 | plugins: [], 27 | } 28 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/bg-curvy-dark-mode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/bg-curvy-light-mode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/bg-quotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/bg-quotes.png -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/fylo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/fylo.png -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/icon-security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/illustration-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/illustration-intro.png -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/illustration-stay-productive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/illustration-stay-productive.png -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/profile-1.jpg -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/profile-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/profile-2.jpg -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/fylo/images/profile-3.jpg -------------------------------------------------------------------------------- /_Example/tailwind/fylo/images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .ficon:hover { 6 | filter: invert(80%) sepia(37%) saturate(7048%) hue-rotate(132deg) 7 | brightness(105%) contrast(104%); 8 | } 9 | -------------------------------------------------------------------------------- /_Example/tailwind/fylo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/index.html -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-curiosity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-curiosity.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-deep-earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-deep-earth.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-fisheye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-fisheye.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-from-above.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-from-above.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-grid.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-hero.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-interactive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-interactive.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-night-arcade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-night-arcade.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-pocket-borealis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-pocket-borealis.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/desktop/image-soccer-team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/desktop/image-soccer-team.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/loopstudios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/loopstudios.png -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-curiosity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-curiosity.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-deep-earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-deep-earth.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-fisheye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-fisheye.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-from-above.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-from-above.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-grid.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-hero.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-interactive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-interactive.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-night-arcade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-night-arcade.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-pocket-borealis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-pocket-borealis.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/images/mobile/image-soccer-team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/loopstudios/images/mobile/image-soccer-team.jpg -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/js/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById('menu-btn'); 2 | const menu = document.getElementById('menu'); 3 | 4 | btn.addEventListener('click', navToggle); 5 | 6 | function navToggle() { 7 | btn.classList.toggle('open'); 8 | menu.classList.toggle('flex'); 9 | menu.classList.toggle('hidden'); 10 | } 11 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/loopstudios/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | screens: { 6 | sm: '480px', 7 | md: '768px', 8 | lg: '976px', 9 | xl: '1440px', 10 | }, 11 | extend: { 12 | colors: { 13 | strongCyan: 'hsl(171, 66%, 44%)', 14 | lightBlue: 'hsl(233, 100%, 69%)', 15 | darkGrayishBlue: 'hsl(210, 10%, 33%)', 16 | grayishBlue: 'hsl(201, 11%, 66%)', 17 | }, 18 | fontFamily: { 19 | sans: ['Josefin Sans', 'sans-serif'], 20 | alata: ['Alata'], 21 | }, 22 | letterSpacing: { 23 | widest: '.3em', 24 | }, 25 | }, 26 | }, 27 | plugins: [], 28 | }; 29 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/email-subscribe/images/email-subscribe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/email-subscribe/images/email-subscribe.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/email-subscribe/images/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/email-subscribe/images/image.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/email-subscribe/readme.md: -------------------------------------------------------------------------------- 1 | # Email Subscribe Project 2 | 3 | Email Subscribe mini-project from my Tailwind course. 4 | 5 | ![Alt text](images/email-subscribe.png) 6 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image-gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image-gallery.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image1.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image2.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image3.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image4.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image5.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/images/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/image-gallery/images/image6.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/image-gallery/readme.md: -------------------------------------------------------------------------------- 1 | # Image Gallery Project 2 | 3 | Image Gallery mini-project from my Tailwind course. 4 | 5 | ![Alt text](images/image-gallery.png) 6 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/login-modal/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/login-modal/images/facebook.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/login-modal/images/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/login-modal/images/google.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/login-modal/images/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/login-modal/images/image.jpg -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/login-modal/images/login-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/login-modal/images/login-modal.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/login-modal/readme.md: -------------------------------------------------------------------------------- 1 | # Login Modal Project 2 | 3 | Login Modal mini-project from my Tailwind course. 4 | 5 | ![Alt text](images/login-modal.png) 6 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/pricing-cards/images/pricing-cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/pricing-cards/images/pricing-cards.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/pricing-cards/readme.md: -------------------------------------------------------------------------------- 1 | # Pricing Cards Project 2 | 3 | Pricing Cards mini-project from my Tailwind course. 4 | 5 | ![Alt text](images/pricing-cards.png) 6 | -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/product-modal/images/headphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/product-modal/images/headphone.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/product-modal/images/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/product-modal/images/heart.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/product-modal/images/product-modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/product-modal/images/product-modal.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/product-modal/images/weight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/mini-projects/product-modal/images/weight.png -------------------------------------------------------------------------------- /_Example/tailwind/mini-projects/product-modal/readme.md: -------------------------------------------------------------------------------- 1 | # Product Modal Project 2 | 3 | Product Modal mini-project from my Tailwind course. 4 | 5 | ![Alt text](images/product-modal.png) 6 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/bg-boost-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/bg-boost-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/bg-shorten-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/bg-shorten-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/shortly/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/icon-detailed-records.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/images/shortly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/shortly/images/shortly.png -------------------------------------------------------------------------------- /_Example/tailwind/shortly/js/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById('menu-btn'); 2 | const menu = document.getElementById('menu'); 3 | 4 | const input = document.getElementById('link-input'); 5 | const linkForm = document.getElementById('link-form'); 6 | const errMsg = document.getElementById('err-msg'); 7 | 8 | btn.addEventListener('click', navToggle); 9 | linkForm.addEventListener('submit', formSubmit); 10 | 11 | function navToggle() { 12 | btn.classList.toggle('open'); 13 | menu.classList.toggle('flex'); 14 | menu.classList.toggle('hidden'); 15 | } 16 | 17 | function formSubmit(e) { 18 | e.preventDefault(); 19 | if (input.value === '') { 20 | errMsg.innerHTML = 'Please enter something'; 21 | input.classList.add('border-red'); 22 | } else { 23 | errMsg.innerHTML = ''; 24 | input.classList.remove('border-red'); 25 | alert('Success'); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/shortly/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | extend: { 6 | colors: { 7 | cyan: 'hsl(180, 66%, 49%)', 8 | cyanLight: 'hsl(180, 66%, 69%)', 9 | darkViolet: 'hsl(257, 27%, 26%)', 10 | red: 'hsl(0, 57%, 67%)', 11 | grayishViolet: 'hsl(257, 7%, 63%)', 12 | veryDarkBlue: 'hsl(255, 11%, 22%)', 13 | veryDarkViolet: 'hsl(260, 8%, 14%)', 14 | }, 15 | fontFamily: { 16 | sans: ['Poppins', 'sans-serif'], 17 | }, 18 | spacing: { 19 | 180: '32rem', 20 | }, 21 | }, 22 | }, 23 | plugins: [], 24 | }; 25 | -------------------------------------------------------------------------------- /_Example/tailwind/simple-tailwind-starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Simple Tailwind Starter 9 | 10 | 11 |

    Simple Tailwind Starter

    12 | 13 | 14 | -------------------------------------------------------------------------------- /_Example/tailwind/simple-tailwind-starter/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /_Example/tailwind/simple-tailwind-starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/simple-tailwind-starter/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img1.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img2.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img3.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img4.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img5.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img6.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img7.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img8.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/img9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/tailwind-sandbox/assets/img/img9.jpg -------------------------------------------------------------------------------- /_Example/tailwind/tailwind-sandbox/assets/img/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/image-daniel.jpg -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/image-jeanette.jpg -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/image-jonathan.jpg -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/image-kira.jpg -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/image-patrick.jpg -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/images/testimonial-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/testmonial-grid/images/testimonial-grid.png -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@tailwindcss/line-clamp": "^0.4.2", 15 | "tailwindcss": "^3.2.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /_Example/tailwind/testmonial-grid/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | screens: { 5 | sm: '480px', 6 | md: '768px', 7 | lg: '976px', 8 | xl: '1440px', 9 | }, 10 | theme: { 11 | extend: { 12 | fontFamily: { 13 | sans: ['Barlow Semi Condensed', 'sans-serif'], 14 | }, 15 | }, 16 | }, 17 | plugins: [require('@tailwindcss/line-clamp')], 18 | }; 19 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/bg-header-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/bg-header-desktop.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/bg-header-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/bg-header-mobile.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/clipboard.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/favicon-32x32.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/icon-blacklist.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/icon-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/image-computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/image-computer.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/image-devices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/image-devices.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/logo-google.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/logo-hp.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo-ibm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/logo-ibm.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo-microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/logo-microsoft.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo-vector-graphics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shahryarjb/LearnJsStuff/78d40959e92c7a3d0100905e0a2e7b6f8b2f42bd/_Example/tailwind/website-project/images/logo-vector-graphics.png -------------------------------------------------------------------------------- /_Example/tailwind/website-project/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/input.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | h3 { 7 | @apply mb-8 text-4xl font-bold text-darkGrayishBlue md:text-5xl; 8 | } 9 | h5 { 10 | @apply mb-2 text-2xl font-bold text-darkGrayishBlue; 11 | } 12 | } 13 | 14 | .section-container { 15 | @apply max-w-6xl mx-auto text-center px-10; 16 | } 17 | 18 | .section-content { 19 | @apply max-w-3xl mx-auto leading-9 text-center text-grayishBlue; 20 | } 21 | 22 | .button-container { 23 | @apply flex flex-col justify-center w-full space-y-6 text-xl text-white md:flex-row md:space-y-0 md:space-x-4; 24 | } 25 | 26 | body { 27 | background-image: url('../images/bg-header-desktop.png'); 28 | background-repeat: no-repeat; 29 | background-size: contain; 30 | } 31 | 32 | @media (max-width: 576px) { 33 | body { 34 | background-image: url('../images/bg-header-mobile.png'); 35 | } 36 | } 37 | 38 | .ficon:hover { 39 | filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg) 40 | brightness(101%) contrast(94%); 41 | } 42 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-tailwind-starter", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "tailwindcss -i ./input.css -o ./css/style.css", 8 | "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "tailwindcss": "^3.2.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_Example/tailwind/website-project/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./*.html'], 4 | theme: { 5 | screens: { 6 | sm: '480px', 7 | md: '768px', 8 | lg: '976px', 9 | xl: '1440px', 10 | }, 11 | extend: { 12 | colors: { 13 | strongCyan: 'hsl(171, 66%, 44%)', 14 | lightBlue: 'hsl(233, 100%, 69%)', 15 | darkGrayishBlue: 'hsl(210, 10%, 33%)', 16 | grayishBlue: 'hsl(201, 11%, 66%)', 17 | }, 18 | fontFamily: { 19 | sans: ['Bai Jamjuree', 'sans-serif'] 20 | } 21 | }, 22 | }, 23 | plugins: [], 24 | }; 25 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.eslintignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.eslintrc.js: -------------------------------------------------------------------------------- 1 | /*** 2 | * Excerpted from "Test-Driven React, Second Edition", 3 | * published by The Pragmatic Bookshelf. 4 | * Copyrights apply to this code. It may not be used to create training material, 5 | * courses, books, articles, and the like. Contact us if you are in doubt. 6 | * We make no guarantees that this code is fit for any purpose. 7 | * Visit https://pragprog.com/titles/tbreact2 for more book information. 8 | ***/ 9 | module.exports = { 10 | plugins: ['react'], 11 | extends: ['eslint:recommended', 'plugin:react/recommended'], 12 | parser: 'babel-eslint', 13 | env: { 14 | node: true, 15 | }, 16 | rules: { 17 | quotes: ['error', 'single', { avoidEscape: true }], 18 | 'comma-dangle': ['error', 'always-multiline'], 19 | 'no-unused-vars': ['error', { varsIgnorePattern: '^_' }], 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.stylelintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/.stylelintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["stylelint-config-standard"], 3 | customSyntax: "postcss-styled-syntax", 4 | allowEmptyInput: true, 5 | }; 6 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | Vite + React + TS 16 | 17 | 18 |
    19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/src/App.tsx: -------------------------------------------------------------------------------- 1 | import ExampleCarousel from "./example/ExampleCarousel"; 2 | 3 | export default function App() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /_Example/test-driven-carousel/src/CarouselButton.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentPropsWithRef } from "react"; 2 | 3 | const CarouselButton = (props: ComponentPropsWithRef<"button">) => ( 4 | 14 |
    15 |
    16 | 17 | 18 |
    19 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /_Example/web/.cache/54/ae3b19c1302f3ff1bcd36280eebce8.json: -------------------------------------------------------------------------------- 1 | {"id":"index.html","dependencies":[{"name":"./src/index.ts","dynamic":true,"resolved":"/Users/shahryar/Desktop/web/src/index.ts","parent":"/Users/shahryar/Desktop/web/index.html"}],"generated":{"html":"\n \n
    \n \n \n"},"sourceMaps":null,"error":null,"hash":"d1fec9ac7d65f7fd9ca28ef6ba042169","cacheData":{}} -------------------------------------------------------------------------------- /_Example/web/.cache/84/e872d06429e28e02502607a13acc0d.json: -------------------------------------------------------------------------------- 1 | {"id":"node_modules/axios/lib/helpers/null.js","dependencies":[{"name":"/Users/shahryar/Desktop/web/package.json","includedInParent":true,"mtime":1658740175203},{"name":"/Users/shahryar/Desktop/web/node_modules/axios/package.json","includedInParent":true,"mtime":1658740044306}],"generated":{"js":"// eslint-disable-next-line strict\nmodule.exports = null;\n"},"sourceMaps":{"js":{"mappings":[{"source":"node_modules/axios/lib/helpers/null.js","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"node_modules/axios/lib/helpers/null.js","original":{"line":2,"column":0},"generated":{"line":2,"column":0}},{"source":"node_modules/axios/lib/helpers/null.js","original":{"line":3,"column":0},"generated":{"line":3,"column":0}}],"sources":{"node_modules/axios/lib/helpers/null.js":"// eslint-disable-next-line strict\nmodule.exports = null;\n"},"lineCount":3}},"error":null,"hash":"4e735199afd3f11f9da69b43594e111b","cacheData":{"env":{}}} -------------------------------------------------------------------------------- /_Example/web/.cache/ad/13f75b64a4c69c72aba7ba0e3721c4.json: -------------------------------------------------------------------------------- 1 | {"id":"node_modules/axios/lib/env/data.js","dependencies":[{"name":"/Users/shahryar/Desktop/web/package.json","includedInParent":true,"mtime":1658740175203},{"name":"/Users/shahryar/Desktop/web/node_modules/axios/package.json","includedInParent":true,"mtime":1658740044306}],"generated":{"js":"module.exports = {\n \"version\": \"0.27.2\"\n};"},"sourceMaps":{"js":{"mappings":[{"source":"node_modules/axios/lib/env/data.js","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"node_modules/axios/lib/env/data.js","original":{"line":2,"column":0},"generated":{"line":2,"column":0}},{"source":"node_modules/axios/lib/env/data.js","original":{"line":3,"column":0},"generated":{"line":3,"column":0}}],"sources":{"node_modules/axios/lib/env/data.js":"module.exports = {\n \"version\": \"0.27.2\"\n};"},"lineCount":3}},"error":null,"hash":"6bfd76d90db03b0833397e7e5e75071e","cacheData":{"env":{}}} -------------------------------------------------------------------------------- /_Example/web/.cache/d8/629efe1a75bd4ecf95ad3571444e7c.json: -------------------------------------------------------------------------------- 1 | {"id":"node_modules/axios/index.js","dependencies":[{"name":"/Users/shahryar/Desktop/web/package.json","includedInParent":true,"mtime":1658740175203},{"name":"/Users/shahryar/Desktop/web/node_modules/axios/package.json","includedInParent":true,"mtime":1658740044306},{"name":"./lib/axios","loc":{"line":1,"column":25,"index":25},"parent":"/Users/shahryar/Desktop/web/node_modules/axios/index.js","resolved":"/Users/shahryar/Desktop/web/node_modules/axios/lib/axios.js"}],"generated":{"js":"module.exports = require('./lib/axios');"},"sourceMaps":{"js":{"mappings":[{"source":"node_modules/axios/index.js","original":{"line":1,"column":0},"generated":{"line":1,"column":0}}],"sources":{"node_modules/axios/index.js":"module.exports = require('./lib/axios');"},"lineCount":1}},"error":null,"hash":"ab539cfba3ff8f694b70f9e368216c3d","cacheData":{"env":{}}} -------------------------------------------------------------------------------- /_Example/web/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "id": 1, 5 | "name": "shahryar", 6 | "age": 30 7 | }, 8 | { 9 | "name": "PPo", 10 | "age": 20, 11 | "id": 2 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /_Example/web/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | 5 | 6 | -------------------------------------------------------------------------------- /_Example/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | 5 | 6 | -------------------------------------------------------------------------------- /_Example/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start:db": "json-server -w db.json", 8 | "start:parcel": "parcel index.html" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "typescript": "^4.7.4" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.27.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /_Example/web/src/index.ts: -------------------------------------------------------------------------------- 1 | import { UserList } from './views/UserList'; 2 | import { Collection } from './models/Collection'; 3 | import { User, UserProps } from './models/User'; 4 | 5 | const users = new Collection( 6 | 'http://localhost:3000/users', 7 | (json: UserProps) => { 8 | return User.buildUser(json); 9 | } 10 | ); 11 | 12 | users.on('change', () => { 13 | const root = document.getElementById('root'); 14 | if (root) { 15 | new UserList(root, users).render(); 16 | } 17 | }); 18 | 19 | users.fetch(); 20 | -------------------------------------------------------------------------------- /_Example/web/src/models/ApiSync.ts: -------------------------------------------------------------------------------- 1 | import axios, { AxiosPromise } from 'axios'; 2 | 3 | interface HasId { 4 | id?: number; 5 | } 6 | 7 | export class ApiSync { 8 | constructor(public rootUrl: string) {} 9 | 10 | fetch(id: number): AxiosPromise { 11 | return axios.get(`${this.rootUrl}/${id}`); 12 | } 13 | 14 | save(data: T): AxiosPromise { 15 | const { id } = data; 16 | 17 | if (id) { 18 | return axios.put(`${this.rootUrl}/${id}`, data); 19 | } else { 20 | return axios.post(this.rootUrl, data); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /_Example/web/src/models/Attributes.ts: -------------------------------------------------------------------------------- 1 | export class Attributes { 2 | constructor(private data: T) {} 3 | 4 | get = (key: K): T[K] => { 5 | return this.data[key]; 6 | }; 7 | 8 | set(update: T): void { 9 | Object.assign(this.data, update); 10 | } 11 | 12 | getAll(): T { 13 | return this.data; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_Example/web/src/models/Collection.ts: -------------------------------------------------------------------------------- 1 | import axios, { AxiosResponse } from 'axios'; 2 | import { Eventing } from './Eventing'; 3 | 4 | export class Collection { 5 | models: T[] = []; 6 | events: Eventing = new Eventing(); 7 | 8 | constructor(public rootUrl: string, public deserialize: (json: K) => T) {} 9 | 10 | get on() { 11 | return this.events.on; 12 | } 13 | 14 | get trigger() { 15 | return this.events.trigger; 16 | } 17 | 18 | fetch(): void { 19 | axios.get(this.rootUrl).then((response: AxiosResponse) => { 20 | response.data.forEach((value: K) => { 21 | this.models.push(this.deserialize(value)); 22 | }); 23 | this.trigger('change'); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /_Example/web/src/models/Eventing.ts: -------------------------------------------------------------------------------- 1 | type Callback = () => void; 2 | 3 | export class Eventing { 4 | events: { [key: string]: Callback[] } = {}; 5 | 6 | on = (eventName: string, callback: Callback): void => { 7 | const handlers = this.events[eventName] || []; 8 | handlers.push(callback); 9 | this.events[eventName] = handlers; 10 | }; 11 | 12 | trigger = (eventName: string): void => { 13 | const handlers = this.events[eventName]; 14 | if (!handlers || handlers.length === 0) { 15 | return; 16 | } 17 | handlers.forEach((callback) => { 18 | callback(); 19 | }); 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /_Example/web/src/models/User.ts: -------------------------------------------------------------------------------- 1 | import { Model } from './Model'; 2 | import { Attributes } from './Attributes'; 3 | import { ApiSync } from './ApiSync'; 4 | import { Eventing } from './Eventing'; 5 | import { Collection } from './Collection'; 6 | 7 | export interface UserProps { 8 | id?: number; 9 | name?: string; 10 | age?: number; 11 | } 12 | 13 | const rootUrl: string = 'http://localhost:3000/users'; 14 | 15 | export class User extends Model { 16 | static buildUser(attrs: UserProps): User { 17 | return new User( 18 | new Attributes(attrs), 19 | new Eventing(), 20 | new ApiSync(rootUrl) 21 | ); 22 | } 23 | 24 | static buildUserCollection(): Collection { 25 | return new Collection(rootUrl, (json: UserProps) => 26 | User.buildUser(json) 27 | ); 28 | } 29 | 30 | setRandomAge(): void { 31 | const age = Math.round(Math.random() * 100); 32 | this.set({ age: age }); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /_Example/web/src/views/CollectionView.ts: -------------------------------------------------------------------------------- 1 | import { Collection } from '../models/Collection'; 2 | 3 | export abstract class CollectionView { 4 | constructor(public parent: Element, public collection: Collection) {} 5 | 6 | abstract renderItem(model: T, itemParent: Element): void; 7 | 8 | render(): void { 9 | this.parent.innerHTML = ''; 10 | 11 | const templateElement = document.createElement('template'); 12 | 13 | for (let model of this.collection.models) { 14 | const itemParent = document.createElement('div'); 15 | 16 | this.renderItem(model, itemParent); 17 | 18 | templateElement.content.append(itemParent); 19 | } 20 | 21 | this.parent.append(templateElement.content); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /_Example/web/src/views/UserEdit.ts: -------------------------------------------------------------------------------- 1 | import { View } from './View'; 2 | import { User, UserProps } from '../models/User'; 3 | import { UserForm } from './UserForm'; 4 | import { UserShow } from './UserShow'; 5 | 6 | export class UserEdit extends View { 7 | // it is going to be overwrited 8 | regionsMap(): { [key: string]: string } { 9 | return { 10 | userShow: '.user-show', 11 | userForm: '.user-form', 12 | }; 13 | } 14 | 15 | onRender(): void { 16 | new UserShow(this.regions.userShow, this.model).render(); 17 | new UserForm(this.regions.userForm, this.model).render(); 18 | } 19 | 20 | template(): string { 21 | return ` 22 |
    23 |
    24 |
    25 |
    26 | `; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /_Example/web/src/views/UserList.ts: -------------------------------------------------------------------------------- 1 | import { CollectionView } from './CollectionView'; 2 | import { User, UserProps } from '../models/User'; 3 | import { UserShow } from './UserShow'; 4 | 5 | export class UserList extends CollectionView { 6 | renderItem(model: User, itemParent: Element): void { 7 | new UserShow(itemParent, model).render(); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /_Example/web/src/views/UserShow.ts: -------------------------------------------------------------------------------- 1 | import { View } from './View'; 2 | import { User, UserProps } from '../models/User'; 3 | 4 | export class UserShow extends View { 5 | template(): string { 6 | return ` 7 |
    8 |

    User Detail

    9 |
    User Name: ${this.model.get('name')}
    10 |
    User Age: ${this.model.get('age')}
    11 |
    12 | `; 13 | } 14 | } 15 | --------------------------------------------------------------------------------