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.
| Service | Language/Framework | Description |
|---|---|---|
| Cart | Django | Manages shopping cart functionalities |
| Reviews | Django | Handles product reviews and ratings |
| Store | Django | Manages product catalog and inventory |
| Frontend | Nuxt 4 | Renders the desktop user interface |
| Frontend Admin | Nuxt 4 | User-friendly admin interface |
| Frontend Mobile | Nuxt 4 + Ionic | Mobile-friendly interface |
| GoPurchase | Golang | Managing Stripe payments |
| GoAuthentication | Golang | User authentication and authorization |
| MyCart | Django | Cart management |
| MyReviews | Django | Reviews management |
| MySubscribers | Django | Newsletters etc. management |
The project was built with scalability in mind, allowing for easy addition of new micro-services as needed. For instance, the cart management system can be swapped out for a third-party solution if desired.
| Technology | Purpose/Usage | Version |
|---|---|---|
| Django | Web framework | ✅ 6.X |
| Django REST Framework | API development | ✅ 3.X |
| PostgreSQL | Database | ✅ 13.X |
| Redis | Caching, message broker | ✅ 6.X |
| RabbitMQ | Message broker | ✅ 3.8.X |
| Celery | Task queue/background jobs | ✅ 5.X |
| Docker | Containerization | ✅ 20.X |
| Nuxt 4 | Frontend framework | ✅ 4.X |
| Ionic | Mobile application framework | ✅ 7.X |
| Stripe | Payment processing | ✅ - |
| Klarna | Payment processing | ✅ - |
| Firebase | Authentication, database | ✅ - |
| AWS S3 | Static and media storage | ✅ - |
| Cloudfront | CDN for static files | ✅ - |
| Google Analytics | Traffic analysis | ✅ - |
| Facebook Pixels | Traffic analysis | ✅ - |
| Microsoft Clarity | Traffic analysis | ✅ - |
| Celery Beat | Periodic tasks scheduling | ✅ 2.2.X |
| Daphne | ASGI server | ✅ 3.X |
| Graphene-Django | GraphQL API | ✅ 3.X |
| MCP cli | Micro-service communication | ✅ 0.3.X |
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 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.
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.
- Enter the frontend/mainsite directory and run
pnpm run dev - 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 below. - 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 ~/data/__fixtures__/ and can be used to simulate server API calls.
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/