An e-commerce project with MACH technology for a Proof of Concept

DEMO: https://nuxt-ecommerce-template.netlify.app/

• About
• Getting Started
• Deployment
• Built Using
• Contributing

Nuxt Shop uses MACH technology together with a JAMstack to provide a Proof of Concept (POC) of an e-commerce. This project is also a PWA, which means that you can install it easily on a smartphone or on a PC as an application.

These instructions will get you a copy of the project up and running on your local machine for development purposes. See deployment for notes on how to deploy the project on a live system.

What things you need to install the software.

• Node Installed.
• NPM and Netlify CLI packages installed as global dependencies.
• An Amplience account with some blog posts.
• A Commercetools account with some products.

Clone this repo to your machine, cd into the project directory and do the following:

1. Install dependencies running npm install on the command prompt.
2. Run netlify dev to get both your project and the serverless functions running on your local environment. (For this step, you need to have the netlify-cli npm package installed globally).

You should see now the bare bone of the project in perfect conditions, but with no "life" yet, since you need to set up the serverless functions in order to get the content for the e-commerce.

Inside the /functionsfolder at the project root directory, there are six functions configured already to run on Netlify (you can also check the netlify.toml file to check its setup).

All functions receive API keys either from Commercetools or from Amplience. In order to get them, you need to sign up to these platforms and create your own content inside of them.

NOTE: the Front End of the application certainly will need some changes in order to consume the data from the platforms. Attention particularly to any data that goes through Apollo, both in the functions and inside the /pages folder.

In order to deploy the project, Netlify is a good option, since it is already configured to use Netlify Functions. To do so, follow the instructions in the Nuxt documentation for a statically generated site.

• Nuxt.js - Front End Framework
• Netlify Functions - Serverless Functions
• Apollo - GraphQL implementation
• Amplience - Content Manager CMS
• Commercetools - eCommerce API Solution

If you find anything that needs to be improved or solved or have a great idea for the project, feel free to raise an issue. Thank you.