{"tag":{"id":"56744723958ef13879b95434","name":"React","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","slug":"reactjs","tagline":"React is a JavaScript library for building user interfaces.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"60feafdc1be2da0c4ab76eeb","url":"https://blog.aashish-panthi.com.np","canonicalURL":"https://blog.aashish-panthi.com.np","urlPattern":"SIMPLE","title":"Aashish's blogs","displayTitle":"All about programming and building fullstack web application and mobile application. Blogs by Aashish Panthi from Nepal","hasBadges":true,"descriptionSEO":"I am a full stack developer and here I share my experiences and also share some guides or tutorials for doing certain things related to web development with Javascript and topics.","about":{"html":"

A developer trying to do some weird things.

Let's gain && share knowledge.

\n","text":"A developer trying to do some weird things.\nLet's gain && share knowledge.\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"audioBlog":{"isEnabled":true,"voiceType":"MALE","__typename":"AudioBlogFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":{"__typename":"CustomCSS","homeMinified":null,"postMinified":".blog-impressum>.prose{padding-bottom:3rem}.dark .blog-impressum>.prose{padding-bottom:3rem}.blog-impressum>.prose>h3{visibility:hidden}.dark .blog-impressum{border:1px solid #3c4654}.dark .dark\\:bg-brand-dark-grey-900{background-color:#222830}.dark .dark\\:bg-brand-black{background-color:#222830}.dark .blog-header{background-color:#222830}.dark .text-brand-blue{color:#abc}.dark .dark\\:border-brand-grey-800{border-color:#222830}.dark .blog-series{border-color:#38404c}.dark .dark\\:bg-brand-grey-900{background-color:#1b2021}pre{border:1px solid gainsboro}.dark .prose a{color:#93b0ff}.prose pre{color:#373737;background-color:#fff}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0e0e0e}.dark .hljs,.hljs-tag,.hljs-subst{color:#f8f8f2}.dark .prose pre{color:#e2e8f0;background-color:#222830;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.btn-reaction-spp:hover{animation:shake .8s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.blog-post-detail-card{padding-top:1rem}@media(min-width:640px){.blog-author-card{padding-top:2rem}}@media(min-width:768px){.blog-author-card{padding-top:2rem}}@media(min-width:1024px){.blog-author-card{padding-top:3rem}.blog-header{position:fixed;width:100%;background:#fff}.dark .blog-header{position:fixed;width:100%}.blog-header+div{padding-top:8.4rem}}@media(min-width:1280px){.blog-author-card{padding-top:2rem}.blog-header+div{padding-top:9.5rem}.sticky{top:90px !important}}@media(min-width:1600px){.blog-author-card{padding-top:1.5rem}}","staticMinified":null},"draft":{"__typename":"CustomCSS","homeMinified":null,"postMinified":".blog-impressum>.prose{padding-bottom:3rem}.dark .blog-impressum>.prose{padding-bottom:3rem}.blog-impressum>.prose>h3{visibility:hidden}.dark .blog-impressum{border:1px solid #3c4654}.dark .dark\\:bg-brand-dark-grey-900{background-color:#222830}.dark .dark\\:bg-brand-black{background-color:#222830}.dark .blog-header{background-color:#222830}.dark .text-brand-blue{color:#abc}.dark .dark\\:border-brand-grey-800{border-color:#222830}.dark .blog-series{border-color:#38404c}.dark .dark\\:bg-brand-grey-900{background-color:#1b2021}pre{border:1px solid gainsboro}.dark .prose a{color:#93b0ff}.prose pre{color:#373737;background-color:#fff}.hljs-params,.hljs-class .hljs-title{color:#166fc1}.dark .hljs-params,.hljs-class .hljs-title{color:#68aff0}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#63bd00}.hljs-comment{color:#afafaf}.dark .hljs-comment{color:#5a5a5a}.hljs,.hljs-tag,.hljs-subst{color:#0e0e0e}.dark .hljs,.hljs-tag,.hljs-subst{color:#f8f8f2}.dark .prose pre{color:#e2e8f0;background-color:#222830;border-color:#45505e}.dark .hljs-string,.dark .hljs-type,.dark .hljs-built_in,.dark .hljs-builtin-name,.dark .hljs-selector-id,.dark .hljs-selector-attr,.dark .hljs-selector-pseudo,.dark .hljs-addition,.dark .hljs-variable,.dark .hljs-template-variable{color:#9db0ff}.dark .hljs-code,.dark .hljs-title,.dark .hljs-section,.dark .hljs-selector-class{color:#47cd92}.dark .hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#ff82af}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#035af9}.blog-post-area{padding-top:20px}.post-cover{border-radius:8px}.dark .border-brand-blue{border-color:#4c5869}.border-brand-blue{border-color:#e0e0e0}.button-transparent.active{color:#5c5c5c}.dark .button-transparent.active{color:#949494}.dark .button-primary{border-color:#c5c5c5;color:#eae7e7}.btn-reaction-spp:hover{animation:shake .8s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.blog-post-detail-card{padding-top:1rem}@media(min-width:640px){.blog-author-card{padding-top:2rem}}@media(min-width:768px){.blog-author-card{padding-top:2rem}}@media(min-width:1024px){.blog-author-card{padding-top:3rem}.blog-header{position:fixed;width:100%;background:#fff}.dark .blog-header{position:fixed;width:100%}.blog-header+div{padding-top:8.4rem}}@media(min-width:1280px){.blog-author-card{padding-top:2rem}.blog-header+div{padding-top:9.5rem}.sticky{top:90px !important}}@media(min-width:1600px){.blog-author-card{padding-top:1.5rem}}","staticMinified":null},"__typename":"CustomCSSFeature"},"__typename":"PublicationFeatures"},"metaTags":"\n\n","ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002523004/ZCPNjdO0Z.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","name":"Aashish Panthi","username":"aashishpanthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002711009/x33eB9pyo.png","darkMode":{"__typename":"DarkModePreferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1662002756066/k3_V3jMmd.png","enabled":false},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"63a72363c39f50da11a5ae84","label":"DevRetro","url":"https://blog.aashish-panthi.com.np/series/devretro-2022","priority":4,"type":"series","series":{"__typename":"Series","id":"63a72325b1011ed9ec6cebd6"},"page":null},{"__typename":"PublicationNavbarItem","id":"612bbf5bfd0bf8636d76e12b","label":"JavaScript","url":"https://blog.aashish-panthi.com.np/series/javascript","priority":3,"type":"series","series":{"__typename":"Series","id":"612bbf312858872661b9bcee"},"page":null},{"__typename":"PublicationNavbarItem","id":"612bbf46fd0bf8636d76e128","label":"JS libraries","url":"https://blog.aashish-panthi.com.np/series/javascript-frameworks","priority":2,"type":"series","series":{"__typename":"Series","id":"612929689da1766342ad6d6a"},"page":null},{"__typename":"PublicationNavbarItem","id":"6367da724eeb55c059f20849","label":"Portfolio","url":"https://aashishpanthi.info.np/","priority":0,"type":"link","series":null,"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":true,"newsletter":true,"members":null},"layout":"magazine","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1649938858669/MUCTzzAqy.png","headerColor":"#092050","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"","plausibleAnalyticsEnabled":null,"wmPaymentPointer":"","umamiWebsiteUUID":"d8e93366-d0d4-4d5d-b39d-867f7c22772a","__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":56,"__typename":"PublicationPostConnection"},"isTeam":false,"links":{"twitter":"https://twitter.com/aashishpanthi11","instagram":"https://instagram.com/aashishpanthi11","github":"https://github.com/aashishpanthi","website":"https://aashish-panthi.com.np/","hashnode":"https://hashnode.com/@aashishpanthi","youtube":"https://www.youtube.com/channel/UCe3WNME_cssAFpwLQkvADBw","dailydev":"https://app.daily.dev/aashishpanthi","linkedin":"https://linkedin.com/in/aashishpanthi","mastodon":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"aashishpanthi","domain":{"__typename":"DomainStatus","host":"blog.aashish-panthi.com.np","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":null,"stripe":null,"__typename":"PublicationSponsorship"},"pro":null,"posts":{"edges":[{"node":{"__typename":"Post","id":"63ea321a3360dfcf12a37cf7","title":"Just debugging and debugging","slug":"just-debugging-and-debugging","publishedAt":"2023-02-13T12:50:34.107Z","cuid":"cle2tcqgr000809l9gn9l0hyh","url":"https://blog.aashish-panthi.com.np/just-debugging-and-debugging","subtitle":"Yes, I am debugging the whole day.","brief":"Hi there, wanna know who is writing this blog?\nOh look, it's a frustrated developer. Tired of debugging the whole day now saw an announcement from Hashnode Townhall.\nYes, it's me. And I was frustrated the whole day and still, I am and in this frustr...","readTimeInMinutes":4,"views":185,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1676292563335/1b1c6402-6a70-4a84-a4d2-7ae6abeadd19.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjNlYTMyMWEzMzYwZGZjZjEyYTM3Y2Y3XzIwMjMtMDItMTNUMTI6NTA6MzQuMTA3Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62be0b4d63efe017ba654b56","title":"Introducing lootle - buy it cheap","slug":"introducing-lootle","publishedAt":"2022-12-08T14:10:26.000Z","cuid":"cl51hwo3w00bbxbnv5oneevkd","url":"https://blog.aashish-panthi.com.np/introducing-lootle","subtitle":"Lootle helps you track the price of your favorite product or stock and notify you when it is in your budget","brief":"Are you still checking the price of your favorite MacBook or the stock price of Tesla? Have you ever imagined what if anybody takes that pain from you and shoots an email to you when the price is within your budget? Well, just leave that boring proce...","readTimeInMinutes":6,"views":1064,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656609293062/LIC0-ISBB.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJiZTBiNGQ2M2VmZTAxN2JhNjU0YjU2XzIwMjItMTItMDhUMTQ6MTA6MjYuMDAwWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62e949e892b7fd0a78c33896","title":"Creating a price tracker with MERN","slug":"creating-a-price-tracker-in-mern","publishedAt":"2022-08-02T15:59:36.593Z","cuid":"cl6cd8rcv00nlfvnv5g0pcbjo","url":"https://blog.aashish-panthi.com.np/creating-a-price-tracker-in-mern","subtitle":"This is the project that I submitted for the recent online hackathon and I want to share how you can also build this app.","brief":"Idea\nThe main idea of the app is that a user should be able to track the price of the product or stock and get notified whenever the price drops within the budget defined by the user. And even track the price fluctuation history and present with the ...","readTimeInMinutes":34,"views":930,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1659446620238/-1L7gJWA_.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJlOTQ5ZTg5MmI3ZmQwYTc4YzMzODk2XzIwMjItMDgtMDJUMTU6NTk6MzYuNTkzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62b5476492447c9aed5b3f33","title":"How to easily connect Metamask Wallet","slug":"how-to-connect-metamask-wallet","publishedAt":"2022-06-24T05:11:00.716Z","cuid":"cl4rzwepy05f19vnvgvk97u9n","url":"https://blog.aashish-panthi.com.np/how-to-connect-metamask-wallet","subtitle":"This is by far the easy method to integrate connect wallet feature in your website with little to no code.","brief":"There are various ways to connect metamask wallet but I will show you one of the simplest ways out there. Remember this is not only limited to metamask, you can also connect coinbase wallet, walletConnect, Email Wallet, etc. \nOk, let's make a react a...","readTimeInMinutes":3,"views":161,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656007000570/JW9iOetYJ.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJiNTQ3NjQ5MjQ0N2M5YWVkNWIzZjMzXzIwMjItMDYtMjRUMDU6MTE6MDAuNzE2Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62b216fa0572b078ae517034","title":"How to host React app on GitHub Pages","slug":"host-react-app-on-github-pages","publishedAt":"2022-06-21T19:07:38.253Z","cuid":"cl4ojgre902bricnvhxgeac5s","url":"https://blog.aashish-panthi.com.np/host-react-app-on-github-pages","subtitle":"","brief":"Yes, hosting your react website like regular HTML and CSS websites with GitHub pages is possible. And that is what I am going to cover in this article. So let's begin.\n1. Create a GitHub repository\nFirst, create a GitHub repository to upload your fil...","readTimeInMinutes":3,"views":77,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655834919465/epbSc6lPC.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJiMjE2ZmEwNTcyYjA3OGFlNTE3MDM0XzIwMjItMDYtMjFUMTk6MDc6MzguMjUzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"6270d9a09ed78401a640900e","title":"React vs React Native","slug":"react-vs-react-native","publishedAt":"2022-05-03T07:28:32.016Z","cuid":"cl2ptwyt1020zannvfe3j43hu","url":"https://blog.aashish-panthi.com.np/react-vs-react-native","subtitle":"What different you will find when you transition from React to React Native? Well, here is my experience.","brief":"If you don't know what React and React Native are for, then let me make it clear.\nReact -> JavaScript framework used to make web appsReact Native -> JavaScript framework used to make mobile applications\nBut I assume you know about React, if you don't...","readTimeInMinutes":6,"views":136,"author":{"__typename":"User","id":"60feaf99fa408f0c89bd2b11","username":"aashishpanthi","name":"Aashish Panthi","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1656265103791/HZfkKUGIv.jpg","followersCount":62},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1651471788564/kSU0bsPZ7.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjI3MGQ5YTA5ZWQ3ODQwMWE2NDA5MDBlXzIwMjItMDUtMDNUMDc6Mjg6MzIuMDE2Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjI3MGQ5YTA5ZWQ3ODQwMWE2NDA5MDBlXzIwMjItMDUtMDNUMDc6Mjg6MzIuMDE2Wg==","hasNextPage":true,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}