πŸ‘€ Our most exciting product launch yet πŸš€ Join us May 8th for Sanity Connect

MERN Stack E-Commerce Website Template

By Xian

Integrating Shopify storefront API with other frontend frameworks.

sign up screen
product page
log in page, also include social media authentication
products page
using sane/shopify to sync shopify store with sanity studio
using sane/shopify to sync shopify store with sanity studio

About the project

In this project, I am trying to build an E-Commerce website from scratch. I fork the sanity-eCommerce template initially. But as I gradually build the project, a couple of questions pop up which are really annoying and hard to tackle.

Since it is an eCommerce website, it is unavoidable that your users need to log in to perform a series of actions. Where to store authenticated users' info is the first question. After googling and discussing a lot in the slack channel, I connect my application with MongoDB and store authenticated user's data there.

I also hope that only the authenticated users are able to add/remove products to/from the wishing list and shopping cart. How to realize that is the second question. As all the data on the frontend are rendered via sanity studio, I am really not well prepared to fully refactor my code and let the data coming from the database. Then I come up with the solution. I manually add prodId field to my MongoDB, the products collection. The prodId is the product's id coming from sanity studio. In such a way, I still can enjoy the powerful content management ability of sanity studio while keeping all the authenticated users' data in MongoDB.

Finally I connect my application with Shopify Storefront API to finish checkout and payment. It is really neat that you can sync all the shopify products with sanity studio via using sane/shopify package. It is pretty straightforward and provide a single API endpoint for both Shopify & Sanity data.

Contributor

Xian

frontend developer, UI/UX designer and headless e-commerce website development enthusiast

Xian is located at Los Alamos, New Mexcio
Visit Xian 's profile

Other projects by author

Naix Jewelry

Imperfection is the perfection to a beautiful perspective. Elevate your style with our exquisite pearl jewelry collection.

Xian
Go to Naix Jewelry