Build a Full-Stack Shopify App with NodeJS, React & MongoDB

Bring Your Dream Shopify App To Life with NodeJS, MongoDB and a Whole Lot of JavaScript & CSS Magic
What you'll learn
Shopify App Development
Shopify Proxy App (Shopper-Facing App That Sits on Subpath of Shopify-Powered Site)
NodeJS & Vanilla JavaScipt
Integrating with Shopify Themes Using HTML & CSS
Working on a Live Production App
How To Use Ngrok
Storing Data with MongoDB
Image Upload via Proxy App
Image Upload via Store Admin App
Shoppers Can Create Content via Proxy App
Store Admins Can Approve Content via Store Admin App
Embedded Shopify Admin App with Shopify Polaris
Proxy App Using Shopify Liquid Syntax
Email Integration with Active Campaign & Sendgrid
Multi-Lingual Translation for International Expansion
Custom CSS Editor within the Shopify Admin App
Custom CSS *(per Shop) injected via Proxy App
Billing API Integration - free trial for x days + then a recurring monthly fee
Requirements
Beginner level of JavaScript or any other coding language
NodeJS Experience is a Plus
Knowledge of MongoDB or MySQL Database is a Plus
Beginner level of any server-side technology
HTML and CSS is a Plus
ReactJS or NextJS is a Plus
AngularJS is a Plus
Description
When I first started building a Shopify App in June 2020. I started looking online for a good example of a Shopper-Facing App that sits on a subpath of a Shopify-Powered Site. The best solution I found after combing through Shopify's Documentation was a Proxy App.But, I couldn't find a good example of a Shopify Repo that implemented it well.In this course, we cover how to Build a Full-Stack Shopify App with NodeJS, MongoDB, and a whole lot of JavaScript.And there's tons of working code along the way to help you get started building your Dream Shopify App.The course is based on 2 large Github repositories:Repo #1: Build a Shopify App with Node and ReactThis is the Demo Repo by Shopify's Documentation Team itself.The good news is that Shopify has already created a multi-part tutorial on their NextJS, GraphQL, Apollo Repo, which covers:IntroductionSet up your appEmbed your app in ShopifyBuild your user interface with PolarisLearn the GraphQL Admin APIFetch data with ApolloCharge a fee using the Billing APIListen for store events with webhooksRepo #2: The Live Social King RepoThe Social King Repo (the main attraction of this course) is actually built on top of Shopify's Demo NextJS Repo (mentioned above).Social King is a very large, modular, and 'easy-to-reason-about-&-extend' repo with over 1,400 commits already.It includes, amongst many other features:1) Multi-Lingual Translation2) Custom CSS Editor within the Shopify Admin App - that CSS gets injected into every view within the Shopper-Facing App3) Billing API - free trial for x days + then a recurring monthly fee.Social King's Shopper Facing App vs. The Competitor's ImplementationIf you install Social King on a client's site or development store, you'll notice a large difference in User Experience Between Social King + Competitors.The main difference being:Social King's Localization Features Out-Of-The-BoxThe bottom line is that Shopify Supports merchants from all over the world - not just English-Speaking audiences - meaning, using Social King as boilerplate code, will allow your Dream App to:Support the native language of your merchant's buyers. This could be the difference between whether merchants that install your app stick around past the free trial or uninstall the appGain More opportunities for low-cost foreign keywords on the Shopify App Store's keyword-bidding systemSocial King's Built-In CSS Editor for Store Admins Out-Of-The-BoxThe Demo Shopify App also doesn't include the Custom CSS Editor built into the Store Admin App - this is a crucial feature because it's one of the main features that drives reviews on the App Store *(Social King is getting reviews faster than the incumbent players)!When Your Dream App Goes Live & Customers write in asking for CSS/Styling Tweaks, all you have to do is edit the CSS Saved within the Database for that Given Shop. It's very modular & a quick win & crucial feature for quickly adding value & awesome service to merchants.Battle-Tested Shopify App CodeIn Short: Social King has been live & Serving Customers for almost a year now. Customers have been writing in asking for New Features & CSS Tweaks. I've also asked myself questions like: "what are the low-hanging fruit here? Which features can we build out which will provide the biggest return on time?"SPA vs. Sending The Views back as Liquid StringsWhen I first started Coding out Social King, I naturally tried to use a Single-Page Application Framework/Library like: ReactJS, VueJS & Angular.But, there was one key flaw - using any of these frameworks out-of-the-box would result in the Shopify Store's Existing CSS, Header & Footer, and any other Plugins getting lost in translation.There are still many Shopify App's that Sacrifice the Given Shop's Theme & Apps for the code cleanliness of an SPA.In this course, we switch it up for the delight and benefit of the customer.Every Shopify Store that installs your app will have its own unique theme & styling. Meaning sometimes, the elements on the Community Pages (Shopper-Facing) will actually inherit the CSS from the parent.Isn't Shopify's Demo App Repo Already Good Enough?!The Social King Demo Repo attempts to fill in the Gaps Left by Shopify's Documentation & Demo Repo.The Official Shopify Open-Source repo and tutorial is a good start, but:It doesn't contain some of the basic features that you'll need for building out a successful multi-page shopper-facing app.It doesn't include image uploads on the shopper and admin apps.It doesn't include multi-lingual support - ie a method for building the app once, and then translating the text via Google Translate, and enabling the Store Admin to provide internationalized experiences.Benefits of Rendering Liquid Views Server Side with NodeJSThe NodeJS Proxy Server, has a middleware function that looks something like this:// Send everything from this route back as liquid.router.use((req, res, next) => { res.set('Content-Type', 'application/liquid'); return next();});The Benefits are:a) Every store maintains its header & footerb) Other Shopify Apps can supplement your Shopper-Facing App's Functionality."But, I need to Use React...."?~Actually, on my Github, you can find a React-Powered Shopify App. Feel free to reach out if you can't find it.If Social King is So Awesome, Like You Say, Then Why Is It Open-Source?Paying It Forward: the internet is a very crowded place. I've been consuming free content on YouTube and low-cost, high-value content on Udemy for a while now. I know how good it feels when I find the exact course on Udemy which solves my problem, & saves me weeks, or even months of time. Part of living a life filled with gratitude is reciprocating for the kindness and good things that have been given to you.The internet is about giving people stuff for free or at a very low cost.There's a Social Mission Here: lots of these merchants got completely wiped out by COVID. So, Covid was a wake-up call to these merchants across the world, saying "let's go online & let's learn how to succeed online."Shopify is one of the easiest ways for merchants to open online sales channels at a low-cost and low time investment.So, I happen to think that at this time, 2021, developers that want to be part of the eCommerce Space have so much opportunity that it's what's known in business as a: "Blue Ocean" (the opposite of a Red Ocean, where competitors eat each other alive due to overcrowdedness).Meaning, there are enough opportunities within this space where I can be successful, while also helping the ecosystem be successful.And you really feel that on the Shopify App Store - because it's a new market. If you actually ship a product that adds value for these stores, they'll reciprocate with reviews & monthly subscriptions that will hopefully make you successful as well.It's very much like a new ecological ecosystem - where the success of the developers is very much interlinked with the success of the merchants. So adding value for both of those audiences makes sense in order to build new relationships within this space.Even More About Social KingEver wish that your Shopify Store would support Guest Blogging?! With Social King, it finally does Let Shoppers Handle ContentEnable shoppers to create content about your products. Moderate every post, content, image or video shared by your community.Keep The Community BrandedYour Social Pages Integrate out-of-the-box with your existing Theme and Shopify Apps. Enable Email Notifications to bring shoppers back.Scale Your CommunityShoppers are used to using Emojis on their Favorite Social Networks. Enable Emojis on your own Social Network, and Scale Your Community.Shoppers Can:Create their own user profile with a picture and about sectionCreate and edit posts, including uploading images and embedding videosComment on each other's postsReact with EmojisStore Admins Can:Manage Tags to drive conversations around specific topicsModerate every User-Generated Post & Comment before it goes live on the sitePromote relevant products alongside user-generated contentCustomize the look and feel of the community pagesBoost Your Community VibesProvide your customers with a platform to blog, connect, share, and learn all under the tent of your own brand.Email NotificationsWhen any post or comment is approved, the shopper gets an email notification with a link to the approved content - thereby bringing them back to your site (*for free!)Matches Your Theme & Integrates With Your Existing AppsWhen you install Social King, you'll notice that the Community Pages will have the exact same header and footer of your Original Theme - out of the box - and all your existing plugins should also work directly on your Community Pages.Looking To The FutureIf you've got a Shopify App Idea & You Want a Repo to Save you Weeks, or even Months, then hopefully this little course will add value for you.Good Luck & May the Force Be With You ?
Who this course is for
People Interested in Shopify App Development
Anyone who wants to code as Part of a Community
Anyone Interested in the eCommerce Revolution
Homepage