1. Introduction
With the rapid development of e-commerce and the popularization of internet technology, online shopping has become one of the primary ways for consumers to acquire goods and services worldwide [1]. In recent years, the explosive growth of product information on online platforms has brought new challenges to improving user experience and purchase efficiency. How to help users quickly find products that best match their personalized needs has become a key factor for e-commerce platforms to enhance user stickiness and competitiveness [2]. Traditional recommendation systems, mainly based on rule-based filtering or collaborative filtering algorithms, often suffer from limitations such as poor personalization, sparse user data, and static recommendation results [3]. To address these challenges, more and more researchers are exploring the integration of advanced artificial intelligence (AI) technologies, especially natural language processing (NLP), large language models (LLMs), and multi-source data fusion into personalized recommendation systems [4]. Existing research and applications have achieved significant progress in fields such as news recommendation, video streaming services, and social media content feeds [5]. However, in the field of e-commerce, especially in cross-platform, multi-category intelligent shopping recommendation scenarios, current solutions still face problems such as insufficient real-time performance, lack of effective conversational interaction, and limited scalability [6].
In response to these problems, this paper designs and implements an Intelligent Shopping Recommendation System based on a React front-end framework combined with multiple AI models (e.g., Qwen and DeepSeek APIs). The system supports both keyword-based search and natural language conversational recommendation, enabling multi-round interaction and real-time personalized product analysis. By automatically collecting product data from multiple e-commerce platforms and generating AI-driven recommendations, the system significantly improves user shopping efficiency and satisfaction. The contributions of this paper are as follows: it demonstrates how large language models and AI analysis can be effectively integrated into an online shopping recommendation scenario; it provides a lightweight, cross-platform solution with good scalability and user experience; and it completes a full-cycle implementation from requirements analysis and system design to functional development and real-world testing. The remainder of this paper is organized as follows. Section 2 presents the system requirements analysis. Section 3 describes the overall system architecture and technical solutions. Section 4 details the implementation of core functional modules. Section 5 discusses system testing and application scenarios. Finally, Section 6 concludes the paper and outlines future research directions.
2. System requirements analysis
From the perspective of user requirements, the system is primarily targeted at individual online shoppers who regularly compare products across different e-commerce platforms. Such users expect not only accurate and personalized product suggestions but also convenient and efficient interactions that minimize the time and effort spent on information filtering. Therefore, the system must be able to understand user input in the form of simple keywords or natural language phrases and instantly generate relevant recommendations tailored to individual preferences.
In terms of functional requirements, the system is expected to support two main interaction modes: direct keyword-based search and conversational recommendation. The keyword-based search function enables users to input specific product names or related terms, upon which the system retrieves product information from multiple e-commerce sources to provide comprehensive search results. Meanwhile, the intelligent conversational recommendation module allows users to interact with the system through a dialogue interface, refining their requests and receiving updated recommendations in real time. This design is intended to emulate a more natural, human-like shopping assistant experience, which is a significant improvement over conventional static recommendation lists. In addition to these core functions, the system also integrates a categorized product browsing feature that highlights popular product categories and displays trending items, helping users to discover suitable products even when they do not have clear initial preferences. Cross-platform data integration is another essential requirement, ensuring that product information is aggregated from multiple sources to support accurate price and quality comparisons.
Regarding performance requirements, the system must guarantee fast response times to maintain real-time interaction, while ensuring that recommendation results remain relevant and reliable. Considering the diverse range of e-commerce data, the system architecture must be scalable so that new product categories or additional e-commerce platforms can be easily integrated as needed. Compatibility with major web browsers and operating systems is equally important to reach a broad user base without technical barriers. Moreover, the AI-powered recommendation engine must continuously improve its accuracy and relevance as more user interactions and product data become available. Futhermore, the technical implementation must align with these requirements by using a responsive front-end developed with the React framework, supported by robust JavaScript, HTML, and CSS code. Back-end services should seamlessly integrate with large language model APIs such as Qwen and DeepSeek to process user inputs and generate high-quality recommendation results. The entire system needs to be lightweight and easily deployable using modern cloud-based platforms like Netlify, while maintaining stable connections with reliable product data sources from major online shopping platforms. Through careful requirements analysis, the system is designed to deliver a scalable, real-time, and user-friendly intelligent shopping experience driven by advanced AI technologies.
3. System architecture and design
To meet the identified requirements, the Intelligent Shopping Recommendation System adopts a modular and lightweight architecture that combines a modern web front-end with cloud-based AI services. The design focuses on delivering a seamless user experience while minimizing deployment and maintenance complexity. The system follows a client-server model where the front-end is built using the React framework. This choice enables the development of a responsive single-page application that supports dynamic content updates without full page reloads. JavaScript, HTML, and CSS are used in combination to handle rendering, styling, and interactive features, ensuring smooth operation across major desktop browsers such as Chrome, Edge, and Safari. At the back end, the system does not rely on a large centralized database but instead connects to external product sources through web crawling and API requests. The crawler modules simulate real-time queries to major e-commerce platforms to collect product information, including pricing, ratings, and promotional details. This real-time data retrieval supports cross-platform comparison, which is one of the key features expected by online shoppers seeking the best value for money.
As shown in Figure 1, A distinctive feature of the system is its integration of advanced AI models for generating recommendations. When a user submits a product query, either as a keyword or a natural language sentence, the system formulates a structured prompt that combines the input with retrieved product data. This prompt is sent to multiple large language model services, such as Qwen and DeepSeek, via RESTful API calls. The models return recommendation analyses that are merged and refined to present the user with diverse and context-relevant product suggestions. The front-end organizes its main functions into clear modules, including the homepage search bar, a hot recommendations section, a categorized browsing view, and an interactive chat-based recommendation window (Figure 2). Each module is implemented as a reusable React component, which simplifies development and ensures a consistent look and feel throughout the user journey. The conversational interface, in particular, allows users to refine their shopping needs interactively, providing an experience similar to a human assistant.
4. Core module implementation
4.1. Keyword search module
As shown in Figure 2, the keyword search module provides the entry point for users to express their shopping intent. Built with React, this module displays a clear and prominent input field on the homepage, accompanied by contextual hints to guide users in entering product names or related terms. When a search query is submitted, the system immediately triggers the data collection process without requiring additional user actions. This real-time interaction is essential for maintaining an intuitive shopping experience that minimizes friction between intent and result.
4.2. Data collection and crawling
To obtain up-to-date product information, the system incorporates lightweight crawler scripts that simulate API-like requests to major e-commerce platforms. These crawlers extract essential product attributes such as titles, images, prices, discounts, and user ratings. The data retrieval is intentionally kept simple and efficient to avoid unnecessary delays. After the crawlers aggregate relevant products, the results are temporarily held in the front-end state, ready to be filtered, sorted, or passed to the recommendation engine.
4.3. AI-based recommendation generation
The core innovation of the system lies in its AI-powered recommendation module. Once product data is available, the system constructs a prompt that merges the user’s original query with the list of retrieved product details. This prompt is then sent to external AI services, such as Qwen and DeepSeek, which analyze the combined input to generate recommendations tailored to the user’s needs. These large language models process both explicit and implicit signals in the input, producing multi-layered suggestions that consider factors like product quality, price-performance ratio, and user preferences. By calling multiple AI models in parallel and combining their outputs, the system increases the diversity and depth of recommendations compared to relying on a single recommendation source.
4.4. Conversational interaction
An important feature that distinguishes this system from conventional shopping tools is its conversational interaction capability. In addition to one-time keyword searches, users can engage with an embedded dialogue window to refine their shopping criteria iteratively. This module is implemented as a dynamic React component that maintains the conversation state and updates recommendations in real time. Each user message is handled as a new prompt for the AI engine, which responds with updated suggestions or clarifying questions when necessary. This continuous dialogue simulates the experience of consulting a human shopping assistant and enhances user engagement.
The recommendation results are rendered in an intuitive, card-based layout that displays key product information along with purchase links redirecting users to the corresponding e-commerce sites. The front-end also offers filters and category tabs to allow users to adjust their view according to their specific shopping interests. Throughout the implementation, emphasis was placed on simplicity and maintainability. Each module is encapsulated as a reusable React component, ensuring that future updates or feature expansions can be integrated without significant rework. Combined with serverless deployment and external AI services, this implementation strategy achieves the project’s goals of delivering a personalized, real-time shopping recommendation experience with minimal infrastructure overhead.
5. System testing and application scenarios
5.1. Testing environment and methodology
To verify the functionality and performance of the Intelligent Shopping Recommendation System, systematic tests were conducted under typical usage conditions. The front-end was deployed in a standard desktop environment running Windows 10 with a minimum of 2GB RAM and mainstream browsers including Chrome, Edge, and Safari, ensuring broad compatibility. Testing focused on verifying the responsiveness of the search and recommendation modules, the stability of the AI service calls, and the consistency of data retrieval from multiple e-commerce sources. Functional testing was carried out to confirm that keyword-based search, product crawling, AI recommendation generation, and the conversational interaction flow all performed as intended. Test cases covered various input types, including simple keywords, complex natural language queries, and multi-turn dialogues to simulate realistic user scenarios. The crawlers were verified to handle varying product categories and return up-to-date results without significant delay. The AI service integration was tested to confirm that model responses remained contextually relevant and adapted properly to user refinements in dialogue mode. Performance testing showed that typical search and recommendation results were returned within a few seconds, which meets the system’s goal of delivering a real-time interactive experience. Stress tests with multiple simultaneous requests demonstrated that the system maintained stable response times, thanks to its lightweight front-end architecture and external AI processing handled by scalable cloud services.
5.2. Application scenarios
The Intelligent Shopping Recommendation System is designed for individual online shoppers seeking convenient, personalized product suggestions across multiple platforms. A typical use case involves a user visiting the system’s homepage and entering a keyword such as “smartphone.” Within seconds, the system displays aggregated search results from multiple e-commerce sources, alongside AI-generated recommendations that highlight options with the best value for money, highest performance, or user-specific preferences. In addition to one-time searches, the conversational interaction feature supports multi-turn scenarios where a user refines their request through dialogue. For example, a user might start with “Recommend a laptop for graphic design,” then follow up with “I prefer something under $1000.” The system dynamically updates its recommendations based on the new input, providing explanations for each suggestion and links to detailed product pages. This supports flexible and natural shopping behavior, helping users save time and make more informed decisions. The system’s modular and deployable design also allows it to be integrated into broader e-commerce ecosystems, such as retailer websites or third-party shopping assistant tools. By offering both direct keyword search and dialogue-based recommendation, the system can adapt to varying user habits and preferences, demonstrating practical value for applications in the e-commerce, retail, and digital marketing sectors.
6. Conclusion and future work
In this study, an Intelligent Shopping Recommendation System was designed and implemented to address the growing demand for more effective and personalized online shopping assistance. By combining a modern React-based web interface with real-time multi-source data crawling and advanced AI-powered recommendation services, the system enables users to quickly discover relevant products through both keyword searches and conversational interaction. Testing confirmed that the system operates reliably under common desktop environments and mainstream browsers, delivering responsive search results and contextually appropriate recommendations within acceptable timeframes. This demonstrates the practicality of integrating large language models into e-commerce scenarios to enhance traditional recommendation approaches. However, there are still limitations that suggest directions for future research. Currently, the product data sources are limited to a few major platforms and rely on real-time crawling, which could be improved by expanding official API integrations to cover a wider range of retailers and product types with more stable data feeds. Additionally, the current AI recommendation logic is stateless and does not yet leverage user profiles, behavioral history, or explicit feedback loops that could further refine recommendation quality over time. Enhancing the system with continuous learning mechanisms and more sophisticated personalization strategies would make the recommendations more adaptive to individual user preferences. The modular, serverless architecture adopted in this project makes it feasible to extend the system’s capabilities to other application scenarios, including mobile apps, browser extensions, or integration with voice assistants and smart home devices. Future work could also investigate the adoption of multimodal AI techniques to process not only text-based inputs but also images or spoken queries, providing a more natural and accessible interaction experience. Overall, this work demonstrates the feasibility and potential of combining lightweight front-end frameworks with powerful AI models to deliver personalized shopping recommendations in real time, laying a practical foundation for future intelligent retail services that can evolve alongside technological advances and changing consumer expectations.
References
[1]. Laudon, K. C., & Traver, C. G. (2021). E-commerce 2021: Business, Technology, and Society. 16th ed., Pearson.
[2]. Ricci, F., Rokach, L. and Shapira, B. (2015). Recommender Systems Handbook. [online] Boston, MA: Springer US. doi: https: //doi.org/10.1007/978-1-4899-7637-6.
[3]. Su, X. and Khoshgoftaar, T.M. (2009). A Survey of Collaborative Filtering Techniques. Advances in Artificial Intelligence, 2009, pp.1–19. doi: https: //doi.org/10.1155/2009/421425.
[4]. Zhang, S., Yao, L., Sun, A. and Tay, Y. (2019). Deep Learning Based Recommender System. ACM Computing Surveys, 52(1), pp.1–38. doi: https: //doi.org/10.1145/3285029.
[5]. Covington, P., Adams, J. and Sargin, E. (2016). Deep Neural Networks for YouTube Recommendations. Proceedings of the 10th ACM Conference on Recommender Systems - RecSys ’16, [online] pp.191–198. doi: https: //doi.org/10.1145/2959100.2959190.
[6]. He, X., Liao, L., Zhang, H., Nie, L., Hu, X. and Chua, T.-S. (2017). Neural Collaborative Filtering. Proceedings of the 26th International Conference on World Wide Web - WWW ’17. [online] doi: https: //doi.org/10.1145/3038912.3052569.
Cite this article
Wu,B. (2025). Design and Implementation of Intelligent Shopping Recommendation System Based on AI. Applied and Computational Engineering,184,1-7.
Data availability
The datasets used and/or analyzed during the current study will be available from the authors upon reasonable request.
Disclaimer/Publisher's Note
The statements, opinions and data contained in all publications are solely those of the individual author(s) and contributor(s) and not of EWA Publishing and/or the editor(s). EWA Publishing and/or the editor(s) disclaim responsibility for any injury to people or property resulting from any ideas, methods, instructions or products referred to in the content.
About volume
Volume title: Proceedings of CONF-CDS 2025 Symposium: Data Visualization Methods for Evaluation
© 2024 by the author(s). Licensee EWA Publishing, Oxford, UK. This article is an open access article distributed under the terms and
conditions of the Creative Commons Attribution (CC BY) license. Authors who
publish this series agree to the following terms:
1. Authors retain copyright and grant the series right of first publication with the work simultaneously licensed under a Creative Commons
Attribution License that allows others to share the work with an acknowledgment of the work's authorship and initial publication in this
series.
2. Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the series's published
version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgment of its initial
publication in this series.
3. Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and
during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (See
Open access policy for details).
References
[1]. Laudon, K. C., & Traver, C. G. (2021). E-commerce 2021: Business, Technology, and Society. 16th ed., Pearson.
[2]. Ricci, F., Rokach, L. and Shapira, B. (2015). Recommender Systems Handbook. [online] Boston, MA: Springer US. doi: https: //doi.org/10.1007/978-1-4899-7637-6.
[3]. Su, X. and Khoshgoftaar, T.M. (2009). A Survey of Collaborative Filtering Techniques. Advances in Artificial Intelligence, 2009, pp.1–19. doi: https: //doi.org/10.1155/2009/421425.
[4]. Zhang, S., Yao, L., Sun, A. and Tay, Y. (2019). Deep Learning Based Recommender System. ACM Computing Surveys, 52(1), pp.1–38. doi: https: //doi.org/10.1145/3285029.
[5]. Covington, P., Adams, J. and Sargin, E. (2016). Deep Neural Networks for YouTube Recommendations. Proceedings of the 10th ACM Conference on Recommender Systems - RecSys ’16, [online] pp.191–198. doi: https: //doi.org/10.1145/2959100.2959190.
[6]. He, X., Liao, L., Zhang, H., Nie, L., Hu, X. and Chua, T.-S. (2017). Neural Collaborative Filtering. Proceedings of the 26th International Conference on World Wide Web - WWW ’17. [online] doi: https: //doi.org/10.1145/3038912.3052569.