Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 AWS Certified Developer - Associate
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Blockchain
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Virtual Reality
Google Flutter Android Development iOS Development React Native Swift Dart (programming language) Mobile App Development Kotlin SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Meditation Sound Therapy CBT Cognitive Behavioral Therapy
Entrepreneurship Fundamentals Business Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Home Business
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Copywriting Email Marketing YouTube Marketing Podcasting

DevelopmentWeb DevelopmentShopify

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
Rating: 3.5 out of 53.5 (8 ratings)
86 students
Created by Elisha Kramer
Last updated 2/2022
English
English [Auto]

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

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

Instructor

Elisha Kramer
Web Developer
Elisha Kramer
  • 3.4 Instructor Rating
  • 63 Reviews
  • 434 Students
  • 3 Courses

"Time is the ultimate cash!"

& That's what these courses aim to do - save you time & speeden your process for building amazing apps.

About Myself:

I'm a Lifelong Learner & Problem Solver - Passionate about how the internet has transformed & will continue to transform our world.

I've gained a lot from the amazing instructors on Udemy & these courses are my way of giving back to the Community.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.