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

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 React

This 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:

1. Introduction

2. Set up your app

3. Embed your app in Shopify

4. Build your user interface with Polaris

5. Learn the GraphQL Admin API

6. Fetch data with Apollo

7. Charge a fee using the Billing API

8. Listen for store events with webhooks

Repo #2: The Live Social King Repo

The 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 Translation

2) Custom CSS Editor within the Shopify Admin App – that CSS gets injected into every view within the Shopper-Facing App

3) Billing API – free trial for x days + then a recurring monthly fee.

Social King’s Shopper Facing App vs. The Competitor’s Implementation

If 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-Box

The 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 app

• Gain More opportunities for low-cost foreign keywords on the Shopify App Store’s keyword-bidding system

Social King’s Built-In CSS Editor for Store Admins Out-Of-The-Box

The 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 Code
In 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 Strings

When 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 NodeJS

The 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 & footer
b) 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?

1. 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.

2. The internet is about giving people stuff for free or at a very low cost.

3. 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 King

Ever wish that your Shopify Store would support Guest Blogging?! With Social King, it finally does 🙂

Let Shoppers Handle Content

Enable shoppers to create content about your products. Moderate every post, content, image or video shared by your community.

Keep The Community Branded

Your Social Pages Integrate out-of-the-box with your existing Theme and Shopify Apps. Enable Email Notifications to bring shoppers back.

Scale Your Community

Shoppers 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 section

• Create and edit posts, including uploading images and embedding videos

• Comment on each other’s posts

• React with Emojis

Store Admins Can:

• Manage Tags to drive conversations around specific topics

• Moderate every User-Generated Post & Comment before it goes live on the site

• Promote relevant products alongside user-generated content

• Customize the look and feel of the community pages

Boost Your Community Vibes

Provide your customers with a platform to blog, connect, share, and learn all under the tent of your own brand.

Email Notifications

When 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 Apps

When 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 Future

If 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 ?

Rating Distribution

• 1 stars: 4 votes
• 2 stars: 6 votes
• 3 stars: 1 votes
• 4 stars: 4 votes
• 5 stars: 4 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!