cli
My Commerce is a comprehensive e-commerce solution created for online retail, built with Django and Nuxt 4. It offers a robust backend for managing products, orders, and customers, along with a dynamic frontend for an engaging shopping experience.
Refer to the technical architecture document for a detailed overview of the system's design, including the micro-services, technologies used, and how they interact with each other.
Before starting, ensure you have a valid Stripe, Klarna and Firebase accounts. You also will need to have valid secret and client keys create on Google Cloud Console.
The secret keys need to be available either as .env files at the root of each project or using global system environment variables.
Finally, if you plan on using Celery ensure you have both Redis and RabbitMQ on your system.
You will also need a valid AWS account with S3 access and finally a valid Cloudfront distribution to serve your static files.
The project comes with a simple fixture of 85 products in initialize/products.csv in order to launch the website quickly.
The fastest way to test the project in a production context is to launch Docker containers with Docker Desktop and then integrate the fixtures by importing the CSV file.
The cart application comes with an ASGI backend that supports WebSocket connections for real-time updates when a user adds or purchases an item in his cart. This is used both in the frontend (in the same way Shopify does) and in the admin interface for live updates.
Each Django application comes with a dedicated MCP server. In other words, it is possible to interract with them using a dedicated LLM client like Claude. Read the dedicated readme of each app to see how to integrate the server into your local LLM client (Cart Api, Shop Api)
If you plan on using Celery, start the celery backend withing the Django project by typing celery -A mystore.celery_app worker -E
(on Windows celery -A mystore.celery_app worker -E --pool=solo). Ensure both Redis and RabbitMQ are running on your system otherwise
you will not be able to execute the provided tasks correctly.
Some projects leverages Django Tasks instead of celery in ordr to delivery certain actions. You can start the Huey server with: huey_consumer cartapi.huey_starter.huey_task -w 4for example if you were to start it with the services/cartapiapplication.
- Enter the frontends/mainsite directory and run
pnpm run devor you can also runpnpm run dev:mainsiteat the root the folder (with pnpm workspace) - Ensure you have a Stripe account for working/testing the cart payment process in development mode
- You also need an active Google Account in order to create the relevant keys for Google Authentication
- Create a
.envfile in thefrontendfolder with all the relevant keys provided in the respective.env.examplefile present in each project - You also need to create a Google Analytics, Facebook Pixels and Microsoft Clarity account in order to use all the tracking possibilities offered within the template
- You might also want to create a Firebase account in order to use the Firebase features such as authentication, storage, and real-time database
- Finally, you can use the
nuxt.config.jsfile to configure the template to your needs
The Nuxt application also comes with basic fixtures that can be used to test the application out of the box. They are located in /frontends/mainsite/test/fixtures and can be used to simulate server API calls.
Note
The Nuxt application is designed using the BFF (Backend for Frontend) pattern, which means that the frontend communicates with the backend through a dedicated API layer. This allows for better separation of concerns and easier maintenance of the codebase.
Some of the internal micro-services can be replaced by third-party services. Here are some useful tools that can be used to enhance your e-commerce website:
- Track shipping: https://www.aftership.com/
- Inventory tracking: [https://www.zoho.com/inventory/](Zoho Inventory)
- Accounting: https://quickbooks.intuit.com/quickbooks-commerce/
- Messaging: https://www.omnisend.com/pricing/