NeoShop: A Voice-Enabled E-Commerce System Using MERN Stack

The development of NeoShop provided a practical look at how small changes in interaction design can impact overall usability. Instead of focusing only on adding features, the project explored how users move through an application and where friction exists. One clear observation during implementation was that even simple actions, like navigating to the cart or checking orders, often require multiple steps in traditional systems. Reducing that effort became a central idea behind the voice-enabled approach. The integration of a voice module using the Web Speech API turned out to be more effective than expected for controlled commands. Since the system uses a rule-based mapping instead of complex Natural Language Processing, it avoids unnecessary processing overhead and remains responsive. There were some limitations, especially when speech input was unclear or when background noise affected recognition, but within defined conditions, the system performed reliably. It felt more like a practical feature rather than an experimental one. From a system design perspective, the MERN stack architecture helped maintain a clean separation between components. The frontend handled interaction and state management, while the backend managed logic and data operations. This separation made testing easier, particularly when debugging issues related to API responses or voice-triggered navigation. In a few cases, backend delays did not affect the frontend experience significantly, which showed that the architecture handled failures reasonably well. In real-world scenarios, such as browsing while multitasking or using a device with limited accessibility, the benefit of voice navigation becomes more noticeable. It does not replace the graphical interface but complements it. That balance is important, because not all users will prefer voice interaction all the time. There is still scope for improvement. The system currently supports only a fixed set of commands and lacks adaptability to more natural language variations. Expanding this with better intent recognition or multi-language support could make it more flexible. Even with these limitations, the project demonstrates that effective user experience improvements do not always require complex or heavy AI solutions. Sometimes, using existing technologies in a thoughtful way is enough to make the system more intuitive and usable.

  [1] V. Surana, S. Patel, and R. Mehta, “Design and Development of E-Commerce Web Applications Using MERN Stack,” International Journal of Computer Applications, vol. 183, no. 42, pp. 15–20, 2021. [2] A. Banks and E. Porcello, Learning React: Functional Web Development with React and Redux, 2nd ed. Sebastopol, CA, USA: O’Reilly Media, 2020. [3] M. Cantelon, M. Harter, T. Holowaychuk, and N. Rajlich, Node.js in Action, 2nd ed. Shelter Island, NY, USA: Manning Publications, 2017. [4] K. Chodorow, MongoDB: The Definitive Guide, 3rd ed. Sebastopol, CA, USA: O’Reilly Media, 2019. [5] R. Fielding, “Architectural Styles and the Design of Network-based Software Architectures,” Ph.D. dissertation, Univ. of California, Irvine, CA, USA, 2000. [6] W3C, “Web Speech API Specification,” World Wide Web Consortium, 2023. [Online]. Available: https://www.w3.org/TR/speech-api/ [7] Stripe, “Stripe API Reference,” 2024. [Online]. Available: https://stripe.com/docs/api [8] Razorpay, “Razorpay Payment Gateway Documentation,” 2024. [Online]. Available: https://razorpay.com/docs/ [9] M. Richards and N. Ford, Fundamentals of Software Architecture: An Engineering Approach, Sebastopol, CA, USA: O’Reilly Media, 2020. [10] T. Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming, 3rd ed. San Francisco, CA, USA: No Starch Press, 2018. [11] S. Tilkov and S. Vinoski, “Node.js: Using JavaScript to Build High-Performance Network Programs,” IEEE Internet Computing, vol. 14, no. 6, pp. 80–83, Nov.-Dec. 2010. [12] Google Developers, “Using the Web Speech API,” 2023. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API [13] OWASP Foundation, “OWASP Top Ten Web Application Security Risks,” 2021. [Online]. Available: https://owasp.org/www-project-top-ten/ [14] A. Mesbah and A. van Deursen, “Single Page Web Applications: Design, Implementation, and Testing,” in Proc. IEEE Int. Conf. Web Engineering, 2009, pp. 1–10. [15] MongoDB Inc., “MongoDB Atlas Documentation,” 2024. [Online]. Available: https://www.mongodb.com/docs/atlas/