MERN Stack E-Commerce Website Template - made with Sanity.io

Project Shots

product page

products page

Editing environment

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.

Naix Jewelry

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

Xian

Project Shots

Editing environment

Related contributions