[UPDATE OUTDATED CONTENT] Strapi Starter Nuxt.js e-commerce

[gkurl]

Please update this to be Strapi v4, would it also be possible to delve into customer registration/logins and inventory/order management.

https://strapi.io/blog/strapi-starter-nuxt-js-e-commerce

What do you all think? 👍 Nice! ❤️ I love it! 🚀 I can help you!

[Marktawa]

I would like to take it on.

[Marktawa]

Hey @PaulBratslavsky @dessireugarte

I want to update this article. However, I have an idea for a series of tutorials that I believe will be valuable to the Strapi community.

As you may know, there are currently few resources available that show users how to create Strapi starters and templates. I would like to propose creating a series of tutorials that aim to fill this gap in knowledge.

The goal of these tutorials would be to provide step-by-step guides that demonstrate how to create custom Strapi starters and templates. This series would be a valuable resource for anyone looking to build their own custom solutions with Strapi.

I have included outlines below for each topic in the tutorial series. Please let me know what you think and if you would be interested in collaborating on this project.

Strapi Starters and Templates: Tutorial Series

• [ ] How to create your own Strapi template
• [ ] How to create your own Strapi starter
• [ ] Strapi Starter Nuxt.js e-commerce (UPDATE TO THIS TUTORIAL)
• [ ] Building a Strapi E-Commerce: Nuxt.js Tutorial & Live Demo (UPDATE TO SNIPCART TUTORIAL)
• [ ] How to customize your Strapi Nuxt.js e-commerce Starter

1. How to create your own Strapi template - OUTLINE

• [ ] Introduction
• [ ] Prerequisites
  • [ ] Strapi v4
  • [ ] Node v12.xx to v16.xx
• [ ] Step 1: Create a standard Strapi app
• [ ] Step 2: Customize the Strapi app (e-commerce template collections)
• [ ] Step 3: Test the Strapi app
• [ ] Step 4: Generate the Strapi template
• [ ] Step 5: Configure the template
• [ ] Step 6: Publish the template
• [ ] Step 7: Test the template
• [ ] Step 8: Deployment
• [ ] Recommendations
• [ ] Conclusion

2. How to create your own Strapi Starter - OUTLINE

• [ ] Introduction
• [ ] Prerequisites
  • [ ] Strapi v4
  • [ ] Node v12.xx to v16.xx
  • [ ] Nuxt.js knowledge
• [ ] Step 1: Install the Strapi template (from Tutorial 1)
• [ ] Step 2: Test the Strapi API
• [ ] Step 3: Create the frontend app (e-commerce Nuxt app)
• [ ] Step 4: Install Nuxt.js
• [ ] Step 5: Create the Store Home page
• [ ] Step 6: Create the Product page
• [ ] Step 7: Add e-commerce functionalities with Snipcart
• [ ] Step 8: Handling the custom fields
• [ ] Step 9: Add navigation to store
• [ ] Step 10: Add a cart
• [ ] Step 11: Test the e-commerce app
• [ ] Step 12: Configure the Nuxt app as a Strapi starter
• [ ] Step 13: Publish Strapi starter
• [ ] Step 14: Test the starter
• [ ] Recommendations
• [ ] Conclusion

3. Strapi Starter Nuxt.js e-commerce (UPDATE TO THIS TUTORIAL) - OUTLINE

• [ ] Introduction
• [ ] Prerequisites
• [ ] Features in Strapi
• [ ] Features in Nuxt.js
• [ ] Payment Service
• [ ] Getting Started
  • [ ] Backend
  • [ ] Frontend
• [ ] Deployment
• [ ] Automation
• [ ] Recommendations

• [ ] Conclusion

  4. Building a Strapi E-Commerce: Nuxt.js Tutorial & Live Demo (UPDATE TO SNIPCART TUTORIAL) - OUTLINE

• [ ] Introduction
• [ ] What's up with Strapi?
• [ ] Why use Snipcart on a Strapi e-commerce site?
• [ ] And what about Nuxt.js?
• [ ] Prerequisites
• [ ] Step 1: Generating a Strapi app
• [ ] Step 2: Creating products
  • [ ] 2.1 Build a new collection type
  • [ ] 2.2 Making products
• [ ] Step 3: Consuming products with Nuxt.js
• [ ] Step 4: Adding e-commerce functionalities with Snipcart
• [ ] Step 5: Handling custom fields
• [ ] Step 6: Polishing our store
• [ ] Step 7: Switching to GraphQL
• [ ] Step 8: Deploying the Strapi & Nuxt e-commerce app
• [ ] Step 9: Live demo & GitHub repo
• [ ] Closing thoughts

5. How to customize your Strapi Nuxt.js e-commerce Starter - OUTLINE

• [ ] Introduction
• [ ] Prerequisites
• [ ] Step 1: Generate a new app using Strapi Nuxt.js e-commerce Starter
• [ ] Step 2: Test the app
• [ ] Backend customization
• [ ] Step 3: Set up login provider
• [ ] Step 4: Customer authentication
• [ ] Step 5: Add and keep track of inventory
• [ ] Frontend customization
• [ ] Step 6: Add customer dashboard
• [ ] Step 7: Add inventory frontend
• [ ] Step 8: Test the app
• [ ] Step 9: Deployment
• [ ] Recommendations
• [ ] Conclusion

---

My content is

• [x] A Strapi Tutorial / Guide / How to article
• [ ] About Headless, CMS, javascript, open source, or Jamstack
• [ ] Other, specify

I believe that this series of tutorials will be a valuable resource for the Strapi community. I am excited to hear your thoughts and to potentially collaborate on this project. Let me know if you are interested and we can discuss further.

What do you all think? 👍 Nice! ❤️ I love it! 🚀 I can help you!

[gkurl]

@Marktawa Thanks for looking into this, looking forward to the updates. Regarding Snipcart, could I ask specifically how you would implement the JSON Crawler and how it may work locally using Ngrok and on a prod environement using a Strapi endpoint or some sort of Nuxt SSR API? If using Strapi, then considering how nested the API calls are now within data and attributes, the crawler requires a direct JSON output (un-nested) and if the product data is dynamically generated via Strapi API calls then the HTML crawler may not work.

Any chance to include any instructions on hosting a SSR based front-end on AWS? Assuming Amplify lets you do it with no extra config?

Looking forward to whatever you do!

Thanks.

[dessireugarte]

Hello @Marktawa! Thank you for sharing this! What do you think about this @malgamves and @PaulBratslavsky? Writing a guide like this to incentivize the community to create their own tutorials taking into consideration the current context of Strapi starters?

[Marktawa]

Hey 👋 @dessireugarte

Thanks for the feedback. Can I start working on the tutorial series?

[PaulBratslavsky]

@Marktawa Sorry for the late response we have so many topics in the que.

In terms of content that involves past starters, we will only be supporting one official starter project maintained by Strapi, and all others will be archived due to bandwidth required to maintain them.

Will be closing this issue for time being.

Instead of creating a starter an interesting idea is to see if you can create a cool project with nuxt, Strapi and open ai.