E-commerce Store Builder in Nuxt JS

In a nutshell…

We are building a secure, scalable, and easy-to-use Nuxt js eCommerce Platform for Merchants to create and customize their online store that sells their products with ease. The application makes the stores
available for clients on both the web and the mobile.

What’s new…

This Nuxt js eCommerce platform targets the local market and tries to cater to their specific needs.

Let’s dig deeper…

It aims to provide both Administrative as well as Client-side operations. The Admin Dashboard
enables the Store Managers to primarily manage their Clients, Products, Orders and more.

It is a multi-role environment wherein Merchants can create Admin team members with various levels and permissions, for instance to add and manage products, process orders, manage shipping, manage payments, view reports, etc. They have access to a host of statistical data reports based on Inventory, Sales, Orders, Payment histories, etc. that enable them to plan their future strategies.

Then there is the end-user who can search products and places orders. The application is built to support Cash-on-Delivery (COD), Credit Cards as well as Bank Transfers. Later on, as an enhancement, the app might support installment strategies as easy payment options that payment gateway supports.

Tech Stack – NUXT JS & MONGODB

We have used Nuxt Js which is a blend of Node and Vue. It gave us plenty of features to boost our
productivity and to enhance the end user experience significantly.

Nuxt is popular for its SEO friendly features. We leveraged from its rendering modes that enable switching between static-site generation and on-demand server rendering. It fetches our content from our source into our Vue components, SSR ready.

The framework has a vast ecosystem of 160+ Nuxt modules that we used to build and extend the app with.

MongoDB provided us with a developer friendly data platform that supported transactional, search, analytics, and mobile use cases while giving a common query interface. With its features like scalability and high availability, we were able to meet the performance levels expected of the
product.

Work Path…

In the beginning, we worked on the Vue Js frontend. Later our work progressed into the server modules and database management too.

We built the Administrator Dashboard from scratch, and
have been progressively updating other modules like Products, Orders, etc. We are also working on updating statistical data and on the integration of the Payment.

The application is still under development and plans to go into Beta soon.

Team Collaboration…

The project entails an elaborate codebase and involves team members scattered across the globe, working remotely. To maintain a large codebase with a team spread across different time zones, working on multiple repositories with daily updates, PRs, code merging, conflicts, multiple environments, and levels of testing, was in itself a daunting task. Git gave us the perfect environment for such extensive code collaboration and CI/CD needs.

In fact, it might be the right moment to mention that one of our very own senior team members is involved in the development of a completely separate Shipping application which is finally to be integrated into this Nuxt js eCommerce platform. It aims at bringing a fully functional Shipping Management System into the platform.

Challenges:

[1] Using Redis to manage multiple Socket requests across multiple instances…

The server is started with the help of an ecosystem file along with pm2,. The ecosystem file provides us with 2 modes – Cluster mode and Fork mode. Both modes spawn multiple instances of the application. To manage concurrency and sharing between Sockets over multiple instances, we used Redis as a an in-memory message broker to send the right message to the right instance, and to keep a singular copy of data between instances. We learnt that Node’s global variables also will not help in handling concurrency in case of Cluster mode. So, it is the Redis server which basically manages and handles the socket requests and responses, in case of multiple instances.

[2] Setting up a CI/CD pipeline to recognize a change in the Master branch and to show design updates instantly. Helped setting up GitHub webhooks, so that whenever we push code in the Master branch a script runs the npm install, build and the restart of server.

Enabled redirecting the server request to another instance using proxy in Nuxt Js.

[3] Furthermore, understanding the application as a whole, with a codebase managed by different teams, and manipulating the codebase that had been written by other people was a considerable challenge in itself.

[4] Working on the multiple payment gateway integrations.

What did we learn?

• Nuxt Js was a comparatively new framework for us. We learnt how to use the SSR feature to enhance the performance and user experience of the application and make it SEO friendly at its best.
• Some of us had a firsthand experience at integrating TikTok and Facebook server-side Pixels, using WhatsApp library to send notifications including text and image, embedding WhatsApp Web inside the application, integrating Telegram for joining a group and creating a Bot in Telegram.
• Setting up a Git Webhook for CI/CD and adding proxy in code was also an interesting learn for us.
• Working with an ecosystem file in Node Js to run in Cluster and Fork modes was a highly educating experience for us.
• Being a considerably vast application, to understand the frontend and backend parts simultaneously was an undeniably challenging part in the beginning. But under the direction of our experienced team leadership, we have gone as far as to understand GitHub Management, to sync our code with the most recent code, rebase with update branches and merge our updated changes to the Master branch, and so forth.

Last but not the least…

Kudos to the team! It was teamwork, skillset, each one’s motivation to learn, and a platform like Synsoft to work within, that created this success story.

Synsoft has many such success stories to tell. We have been delivering valuable digital solutions to clients around the globe for over a decade. Our well-developed processes in remote and offshore working and in team collaboration have helped us deliver efficiently on projects around the world. This accomplishment undoubtedly also comes from our skilled and experienced Team Leaders and our highly motivated and eager-to-learn team members. With evolved communication practices and effective modes of information exchange we have always strived to bring forth a seamless
experience to our clients.

Synsoft Global began its journey with Web & Mobility; soon progressed into Cross-platform development, Hybrid technologies, Frontend stacks, and then into Cloud solutions, and DevOps too. Recently we have diversified majorly into Blockchain, IoT and Data Analytics.

Building an e-commerce store with Nuxt.js is a straightforward and powerful way to create a fully-functional storefront. We explored how to build an e-commerce store with Nuxt.js. Synsoft Global has a team of developers based in India who work remotely on projects for clients in countries like the USA, UK, Germany, UAE. We have the experience and the talent that has helped many American businesses streamline their software development process and improve their overall efficiency by swiftly hiring resources from us in India.