− Post management includes: • Adding post information : Users can post personal product information on the website, by combining provincial APIs , functions are applied specifically to h
INTRODUCTION
OVERVIEW
Urbanization also comes with many problems that need to be solved due to overcrowding in urban areas such as environmental pollution, traffic jams, food hygiene and safety, material and spiritual life, housing for workers For big cities, especially Ho Chi Minh City - a city with over 8 million people - the above problems become even more complicated, especially the problem of accommodation for immigrants, workers and students of universities and colleges Hundreds of newly established companies also need to rent space for transaction locations, representative offices Thus, there is a daily need to find boarding houses to rent, as well as finding office space to rent Representatives and trading locations are very large
There is a problem here is probably that there is not a certain connection between the buyer and the seller While people who want to buy or rent a house can't find all the apartments for rent, renters can't find people with that need So this website was born to solve that problem, with a powerful combination of a simple user interface, a clean and well designed database that makes the website work very simple and minimalistic.Combining existing technologies as well as redesigning the interface appropriately will partly make it easier for older customers to access technology, and partly create simplicity, avoiding complicated problems At the same time, it also beautifies the interface and makes it more suitable for users
Nowadays, the need to search for all information on the internet has become quite popular To connect people who want to buy and people who have real estate to sell or rent Therefore, my topic is to design a website to search for accommodation quickly and effectively After coming up with the idea, I proceed to analyze and design my idea.
RELATED WORKS
In [1], the website clearly functions in different blocks, making the website have a friendly user interface However, the layout causes problems because it allows advertising, confusing information, leading to overload for users, without focusing on usual information In this case, it will distract users from the process of finding information and hinder the web surfing process
In [2] the information has been designed reasonably, each separate functional block has made accessing information easier, the speed of the website has also clearly improved, the information is centralized In general, the functions also work stably, but not being able to integrate chat bots and leaving contact information still faces many difficulties
In [3], this project has a uniform design,also has a price chart to update current prices, but the displayed information has not been presented clearly, functions have not been shown specifically, making customer access to information not optimal Specifically, the search and price filter modal is still not optimized.
OBJECTIVES
- The user interface is easy to use, the layout design identifies to be clear, the application of functions such as notifications and user interaction need to be optimized
- The database design calculated for the needed performance, all the data have to strictly for the managed database table To value a real estate, a lot of information is needed, and the activities of the buyers and sellers must take place under the control of legal agencies
- Filters must be carefully calculated and spaced appropriately to be able to filter data accurately, thereby increasing the ability to interact with users and also making it convenient to filter data, reducing the load on the database
- Users can post the sales details, manage posts and send necessary information so the buyers can contact them
- Integrated chat bot to guide users in using the app for speed-up evaluations of the website It can take users hours or even days because of basic information portals, so chatbots will be embedded to support both sides.
METHODOLOGY
To carry out the project, first collect and process data, then search for appropriate logic to be able to filter content in the database, combined with the use of available libraries to save time and optimize your experience With the participation of external APIs, the combination to work must be specifically calculated, arrange the time to return the results and take those results to combine with external libraries to display to the user The project must be tested many times and interact with third-party applications to support implementation
- Problem 1: Study about supporting languages such as HTML, React Library, supporting libraries, design database methods
- Problem 2 : Create the structure and select a development framework
- Problem 3: Build a suitable, highly applicable and complete database to complete the functionality of the web
- Problem 4: Combine API calls and calculate appropriate time for data transmission and reception In order for data to be displayed accurately and specifically, affecting the user experience
- Problem 5 : Combine it all, interact with the website, record outstanding errors to add new functions in the future.
REPORT’S LAYOUT
This project is represent 5 chapters :
● Chapter 1 - Introduction : Give an overview of current technology, indicate the purpose of the project, and methods to implement the project Point out points to reach customers and essential needs of society.
● Chapter 2 - Literature review : A preliminary introduction to the language to use, supporting libraries and software used to make the project In particular, will talk in detail about the json web token and the hooks that will be used in the project
● Chapter 3 - System design : Give an overview of current technology, indicate the purpose of the project, and methods to implement the project.Separately present ideas and implementations for components with common functions, separate functional components, and API systems for external use.
● Chapter 4 - Results : Simulation of achieved results presents the advantages of the product test all functions, present the results of the tests and the behavior of the outermost functions as returned results of the APIs
● Chapter 5 - Conclusion and future work : Give comments and self assessment on the results of the test Provide an assessment of the current product, its advantages and disadvantages, and future improvements.
LITERATURE REVIEW
WEBSITE
A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment or social networking As of May 2023, the top 5 most visited websites are Google Search, YouTube, Facebook, Twitter, and Instagram.All publicly accessible websites collectively constitute the World Wide Web Users can access websites on a range of devices, including desktops, laptops, tablets, and smartphones The app used on these devices is called a web browser
A website is a dynamic and interactive online platform that serves as a virtual space where individuals, businesses, organizations, or communities can share information, services, and resources with a global audience.The design and functionality of a website are crucial elements, influencing user experience and overall effectiveness As an integral part of the digital landscape, websites play a fundamental role in shaping online presence, facilitating communication, and serving as a gateway to the vast world of information available on the internet.
JSON WEB TOKEN
JSON Web Token (JWT) [4] is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object This information can be verified and trusted because it is digitally signed JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA
Although JWTs can be encrypted to also provide secrecy between parties, we will focus on signed tokens Signed tokens can verify the integrity of the claims contained within it, while encrypted tokens hide those claims from other parties When tokens are signed using public/private key pairs, the signature also certifies that only the party holding the private key is the one that signed it
JWT that has the previous header and payload encoded, and it is signed with a secret key:
Figure 2 1 JSON Web Token work-flow
The application (1) or client requests authorization to the authorization server This is performed through one of the different authorization flows For example, a typical OpenID Connect compliant web application will go through the /oauth/authorize endpoint using the authorization code flow
When the authorization is granted (2), the authorization server returns an access token to the application
The application uses the access token (3) to access a protected resource (like an API)
- Header : Typ - type of token ( default JWT) Alg - Algorithm used for encryption
- Payload : Is the place where the content of the information (claim) is stored The transmitted information can be a description of an entity (for example, a user) or it can also be additional information for the Header They are divided into 3 types:
• Reserved (is the information specified in the IANA JSON Web Token Claims registry None of this information is mandatory However, depending on each application you implement, please bind the mandatory requirements to the necessary information), public and private
• Public: The key can be defined according to the wishes of the JWT user However, to avoid duplication, tokens should be specified in the IANA JSON Web Token Registry or a URI containing an unduplicated namespace
• Private: Additional information is used to pass between clients
- Signature: The signature is created by combining the Header + Payload parts, then encoding it with any encoding algorithm such as HMAC SHA-256
• User performs login by sending id/password or using social network accounts to the Authentication Server (Authentication Server)
• Authentication Server receives data that the User sends to serve user authentication In case of success, the Authentication Server will create a JWT and return it to the user via response
• The user receives the JWT returned by the Authentication Server as a "key" to execute the next "commands" to the Application Server
• Application Server, before making a request from the User, will verify the JWT sent If ok , continue executing the called request.
REDUX-TOOLKIT
Redux Toolkit is official, opinionated, batteries-included toolset for efficient Redux development It is intended to be the standard way to write Redux logic, and strongly recommend that you use it in the project
It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire slices of state at once without writing any action creators or action types by hand
It also includes the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that users can use them right away The redux js toolkit package wraps around the core redux package [5], and contains API methods and common dependencies that we think are essential for building a Redux app Redux Toolkit builds suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications
Redux is really a single store containing "global" state Dispatching plain object actions to the store when something happens in the app Pure reducer functions look at those actions and return an immutably updated state While it's not required, Redux code also normally includes:
• Action creators that generate those action objects
• Middleware to enable side effects
• Thunk functions that contain sync or async logic with side effects
• Memoized selector functions with the Reselect library for optimizing derived data
The Redux DevTools Extension to view action history and state changes
The Redux core is a very small and deliberately opinionated library It provides a few small API primitives:
• CreateStore to actually create a Redux store
• CombineReducers to combine multiple slice reducers into a single larger reducer
• ApplyMiddleware to combine multiple middleware into a store enhancer
• Compose to combine multiple store enhancers into a single store enhancer.
REACT JS
React, also known as ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on components [6] It is maintained by Meta (formerly Facebook) and a community of individual developers and companies React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality
React code is made of entities called components These components are modular and reusable React applications typically consist of many layers of components.When rendering a component, values are passed between components through props (short for
"properties") Values internal to a component are called its state
The two primary ways of declaring components in React are through function components and class components
Function components : Function components are declared with a function (using JavaScript function syntax or an arrow function expression) that accepts a single "props" argument and returns JSX From React v16.8 onwards, function components can use state with the useState Hook :
− React Hooks : Hooks are functions that let developers "hook into" React state and lifecycle features from function components [7].Notably, Hooks do not work inside classes - they let developers use more features of React without classes [8]
− React provides several built-in Hooks such as useState, useContext, useReducer, useMemo and useEffect [9] Others are documented in the Hooks API Reference, useState and useEffect, which are the most commonly used, are for controlling state and side effects respectively
Routing : React itself does not come with built-in support for routing React is primarily a library for building user interfaces, and it doesn't include a full-fledged routing solution out of the box One such library is react-router, which provides a comprehensive routing solution for React applications.It allows you to define routes, manage navigation, and handle URL changes in a React-friendly way To use react- router, you need to install it as a separate package and integrate it into your React application.
NODE JS
Node.js is a cross-platform, open-source server environment compatible with Windows, Linux, Unix, macOS, and more Functioning as a back-end JavaScript runtime environment, it operates on the V8 JavaScript engine and executes JavaScript code independently of a web browser
All Node.js APIs are asynchronous, employing a non-blocking approach that relies on the Node.js Server, waiting for server responses This platform's real-time capabilities stem from an event notification mechanism that facilitates continuous server responsiveness
Developers can utilize Node.js to write command line tools and server-side scripts in JavaScript Its ability to execute JavaScript on the server is instrumental in generating dynamic web page content before transmitting it to the user's browser [10].The Node.js development project, initially governed by the Node.js Foundation, has merged with the
JS Foundation to establish the OpenJS Foundation, facilitated by the Linux Foundation's Collaborative Projects program
The community-driven nature of Node.js is evident in the extensive libraries available, with npm (Node Package Manager) offering versions that enhance application development speed and efficiency [11] Node.js supports the creation of reusable modules that do not inadvertently affect other code, allowing developers to create and use their modules across multiple applications.
MYSQL
MySQL, an open-source relational database management system (RDBMS), is named after co-founder Michael Widenius's daughter, "My," and "SQL" for Structured Query Language It organizes data into tables, forming relationships within a relational database Programmers use SQL to manipulate data and regulate user access MySQL collaborates with an operating system to implement relational databases, overseeing user management, network access, and database integrity
Operating under the GNU General Public License, it was initially owned by MySQL
AB, later acquired by Sun Microsystems, and is now part of Oracle Corporation Similar to Microsoft's SQL Server, MySQL efficiently manages data through databases with user authentication via unique usernames and passwords
The advantage of using MYSQL : flexibility because MySQL runs on all operating systems, power focuses on performance Enterprise-Level SQL, MySQL had for some time been lacking in advanced features such as subqueries, views, and stored procedures, query caching helps enhance the speed of MySQL greatly.
APPLICATION PROGRAMMING LANGUAGE (API)
An Application Programming Interface (API) comprises methods and protocols to establish connections with other libraries and applications Serving as a conduit for application programming, it enables the exchange of data between different applications by providing access to a predefined set of commonly used functions APIs play a crucial role in software development, acting as a bridge for seamless communication between different applications
They define rules and protocols for one piece of software to access the functionality or data of another, fostering interoperability and innovation [12] APIs empower developers to integrate services, applications, or platforms, facilitating the creation of efficient workflows and interconnected digital ecosystems Whether for web development, mobile applications, or software solutions, APIs are essential for building robust, scalable, and interconnected systems
A REST API (Representational State Transfer Application Programming Interface) adheres to simplicity, scalability, and statelessness principles Using communication between clients seeking web information and servers with the required data.
CHAT-BOT
A chatbot is a software application designed to facilitate online conversations through text or text-to-speech interactions Rather than engaging in live discussions with real users, a chatbot uses programmed responses to simulate conversation and provide assistance, information, or perform specific tasks [13]
Chatbots have a wide range of capabilities and can perform various tasks depending on their design and programming Here are some common functionalities of chatbot :
− Answering FQAs : Chatbots can provide instant responses to common queries, offering information about products, services, or general inquiries
− Customer support : They can assist users with troubleshooting, technical support, and guiding them through common issues
− Social media interaction : Chatbots can be integrated into social media platforms to engage with users, answer inquiries, and provide updates
− Survey and feedback collection : They can conduct surveys or collect feedback from users, helping businesses gather valuable information
− Provide fast customer service : Customers want fast and easy service, even during peak hours When bots step in to handle the first interaction, they eliminate wait times with instant support Because chatbots never sleep, they can provide global, 24/7 support at the most convenient time for the customer, even when agents are offline
− Offer more personalized experiences : Customers understand that bots collect personal data but want them to use it to create a better customer experience According to our CX Trends Report, 59 percent of consumers who interact with chatbots expect their data will be used to personalize future interactions with a brand
The capabilities of a chatbot depend on its design, programming, and the specific tasks it is programmed to handle They are continuously evolving to offer more sophisticated and personalized interactions.
SYSTEM DESIGN
SYSTEM REQUIREMENTS
The website is designed to have these requirements :
− Design a service to find and share information that describes the description of a rental model Users can refer to and find service providers quickly
− Website must have functions that can add, edit, delete and update data Data must be filled with character fields, designed with the database for easy management, divided into separate sections, from that creates a full database system
− The system must have the function of decentralizing users.Users can manage personal information and update avatars The user's personal information include full name, specifically identified posts, and include a profile picture and phone number to display on the personal page
− The final design must have all the functions working properly, which are read, post, update, delete data After passing all the test simulation, the design is expected to satisfy the requirements of displaying complete information and operations to meet user needs.
SYSTEM DESIGN
− To ensure high efficiency, high practicality in the future,as well as simpler website administration, the website will be designed in 2 parts :
− Front-end : Creating a friendly neat and reasonable layout, easy to interact with and not fussy about effects Different functional blocks on the client side Creating child components that have functionality independently of parent components, thereby controlling the design and lifecycle of a component is also simple, safe and higher efficient
− Back-end : Process data, access additional external libraries to convert and handle data The asynchronous feature will make data transmission easier and faster Required fast data processing and response speed, able to handle a huge amount of access needs from users and it supports very well in querying, adding, editing, and deleting data
− Methods for transferring data are using the API architecture API provides access to a set of commonly used functions, thereby creating a bridge for data exchange between applications
− In addition to the main libraries above, additional libraries will still be used to
• Cors : Helps to optimize website security, when data is running in this domain, when going to another domain to access data, a notification will be sent to the browser to grant permission to request access to that page
• Dotenv : Used to set environment values for the page, used to specify which processes you want
• Jsonwebtoken : JWT is a means of representing transfer requests between Client
- Server sides, the information in the JWT string is formatted in JSON The Token string must have 3 parts: header, payload
• UUID : This library helps with website security as well as generating the necessary ids Different from the usual way of creating ids in an ascending direction, it uses a string of characters to represent a specific object
• Bcryptjs : Is a form of hash function to encrypt passwords for the purpose of enhancing security It is a type of library written in javascript so it is easier to use The time to run the function is quite consuming
− Filter post by category : The general database of all posts will be divided into 4 main categories :
• Postings for room rental, suitable for long-term stay ,need to work at an agency, factory, or school, suitable for subjects such as students and workers
• Postings are suitable for both short-term or longer-term accommodation needs, can be for families traveling, groups of friends going out together, or opening a house to sell rooms and offices
• Postings type are luxury apartments, can be rented for stage, backstage, shooting scenes, or in luxury urban areas
• Postings of premises include premises located on major roads, or main roads, used for supermarkets, high-end offices, can be used for large businesses, including two to three street frontages, can be concentrated in densely populated areas or central areas with quite expensive rental costs
− Filter by time, price and area : These are three very important factors in choosing to buy or sell and make decisions for buyers or renters Making business decisions depends on many other factors, but choosing a reasonable price will save money
• Adding post information : Users can post personal product information on the website, by combining provincial APIs , functions are applied specifically to help filter posts before being published
• Editing post information: Unavoidable errors when performing the above functions or during the user's inconvenience process, this function was created to minimize inconsistent postings on the centralized market
• Deleting post information: Regarding the lack of communication function with outside life, this function was created to reduce information interference as well as reduce pressure on the data system
• For a complete post, it is essential to have a short overview to display on the general page and detailed information to be displayed on another page, a summary before users find the information Detailed information to deal directly with the poster is something to keep in mind
• When entering the post details page, all the full post information will be included, including description, post code, poster, and a summary list of post characteristics will be displayed directly and a separate function block so users can call the seller directly via zalo or private phone number
• Online chat no longer seems strange to the technical world, so launching an automatic chat bot can help website users interact with it more easily The experiment is that it is quite difficult for older people to access the website in an organized way The problem of websites and reducing the workload for administrators will be solved
• The main functions chatbots can do are the ability to talk and answer user questions Questions may or may not be related to the site depending on the level of the licensing administrator
− In terms of interface design :
• Functions must be designed clearly and separately, for easy management and use:
In this project, the main functions include filtering posts and interacting with the
• The website's colors must be beautiful and harmonious, avoiding contrasting colors that cause discomfort during use
• Make sure there is no distracting information such as ads or cluttered arrangements of heterogeneous blocks Displayed information must be complete and clear, font must be properly aligned
• Make sure there are no design errors in color or size
− In terms of database design :
• Tables must be linked together clearly and clearly to ensure consistency in data
• The fields in the table must ensure complete information, for easy control and management of the database One-to-one or many-to-many relationships must be clarified, thereby making data querying simple and light, high optimization for the website Ensure database security through external libraries
• Carefully calculate the objects in the table to design appropriate data, avoiding data inconsistency The table must be easy to see, understand and manage, thereby improving table quality as well as minimizing the process of maintaining and upgrading the database
The database includes 11 tables, of which 8 tables have relationships with each other, and the subsequent tables delineate the properties of the database :
Table 3 1 Table describing the lable’s properties
Order Properties Data Type Significance
2 Code String Used to classify post characteristics
3 Value String Used to determine the nature of the post and where it is posted This table is used to classify rental forms Each different rental form in each different district corresponds to a different code Each post has only one label code and one label code will be present in many different posts
Table 3 2 Table describing the attribute's properties
Order Properties Data Type Significance
2 Price String Represents each certain price range
3 Acreage String Represents the area of real estate
4 Published String The time the posting has existed
SYSTEM OPERATION
The website system will offer two choices for users: the first is for individuals seeking market information without the intention of posting items for sale, while the second is tailored for customers looking to engage in the trading of diverse assets The latter option encompasses all the features and capabilities of the first type
The second category of account will have access to services associated with tasks like managing posts and verifying the authenticity of submissions
Following the planning of the design process and addressing various scenarios, a procedure will be established to actualize the website Users can conduct searches based on predefined criteria embedded in the search modal
Upon constructing the search modal, enhancements will be made to filtering and selection processes, optimizing the experience and aligning with individual preferences to fulfill specific search requirements This aims to facilitate efficient information retrieval and reference
The search and contact process will take place in 2 steps:
− Step 1 : Select the preferences that align with your individual circumstances through the use of the provided filters integrated into the website
− Step 2 : Reach out to the seller directly through the contact details, such as the phone number or zalo, integrated into the website
For existing members, decentralization will encompass supplementary features, including post management and personal information management Both categories of customers can utilize the integrated chatbot within the system The chatbot is designed with simplicity and can provide guidance to users on its usage
From the initial system overview, it is evident that the functions are comprehensive and essential for the operation of a website.
USE CASE MODEL AND SYSTEM SPECIFICATION
This figure describes the main functions of unregistered users, which only include:
− Viewing post information : Users click on the post to view the product's value, including title, actual demand, image, poster information, and detailed post description
− Leaving personal information when needing support : Users do this in two ways: one is to fill in information to leave a request when not urgently needed, and two is to make contact according to the information already displayed on the website
This type of user will not be able to interfere with the system database The main function of this type of user is to consult the market, especially customers who want to buy and do not need to sell
In this case, the user does not need to have login information or an account Users can still use guest functions without affecting the experience
Table 3.12 summarizes the activities as well as the necessary and sufficient conditions for this type of function This series of functions only applies filters, using functions to display postings from the database
The posts below will be designed as a list consisting of 5 different posts and will be displayed according to the user's input conditions When starting the process of calling the function to display the post, there will be 2 APIs called :
Table 3 12 Use case specification for guest
Actor action Basic course of events
2 The system returns the results that the user searches for
Triggers Users want to consult the market
Assumptions The user has fully implemented the function
Post conditions The post information has been saved to the database
− An API is used to get all the data of all posts to To perform pagination, you need to know the number of posts currently in the database to perform division operations, thereby putting data into the built-in logic function to perform the pagination process
− After calling the API to get all the posts, an additional API call will be made to get 5 posts and use this data to display on the user's side There will be two buttons for users to filter posts according to personal needs This action will call an additional action to rearrange posts by decreasing date value
The basic functions of user system post management represent in the figure below, users can:
− Add posts : Adding a new post will be done through these steps:
• Filling in the parameters completely and accurately and uploading photos: Includes a function to check input parameters like when logging in
• Make api calls to upload photos and upload posts
− Edit posted posts: The system will retrieve the old data from the post to automatically fill in the post and let the user edit the post status
− Delete posts: The system will call a function called delete post that has been set to delete data from the database
− Update individual post status : The system will recall old data, combined with a specially built calculation function to consider the post's status as expired or unexpired
− These functions have been designed separately using different functions so that they can be easily customized
− The necessary condition for this function is that the user is logged in and has performed the posting operation The database already has post information and user information
− With the 6 stages specifically described in the table below and the necessary conditions also attached, this table clearly shows detailed instructions for use of this function
Table 3 13 Use case specification for user post management
Use case User register function
Actor action Basic course of events
2 The system returns the results that the user register or login status
3 The user chooses the post management function
4 The system displays the post management page allowing user to create, update, and delete posts
5 User make edits, add, create new posts,
6 The system checks and saves information into the database
Triggers Users have demand to create transactions on the market
Assumptions The user has fully implemented the function
Pre conditions User must have account
Post conditions The post information has been saved to the database
Figure below describes the activities of users who are members of the site Includes only 3 main functions :
− Create account : Creating a new account will include an additional function in addition to checking invalid fields If the user has already created an account, they will be transferred to log in
− Updated account : Once the user has logged in or has an account, errors during data entry are inevitable Therefore, this function was created to help users change information such as name, phone number, or avatar
− Send request : Users do this in two ways:
• One is to fill in information to leave a request when not urgently needed
• Two is to make contact according to the information already displayed on the website, contact information will be presented specifically and clearly
Table 3 14 Use case specification for user information management
Use case User account function
Actor action Basic course of events
2 The system returns the results that the user register or login status
3 The user choose the account management function
4 The system displays the information management page allowing users to update the personal information
6.The system checks and saves edited data into the database
Triggers Users have a demand to edit personal data
Assumptions The user has fully implemented the function
Pre conditions User must have account
Post conditions The user information has been saved to the database
− This modal will perform all 4 types of filtering and combine them into 1 request and send it to the database to filter out posts that meet the requirements This modal still supports the UI very well, including a pull bar to limit it to your liking or separate price ranges to be able to choose reasonably
− Each modal operates separately, but the modal design process is based on a logical logic that should be applicable to many different components such as price or area The other two fields operate independently, then combine them together to perform filtering accurately and in accordance with needs Filter models included :
Table 3 15 Use case specification for user filter posts management
Use case User filter modal
2 The system returns the results that include post properties such as categories, province, price , area
3 The user chooses the individual requirements
4 The system displays the information on to the specific modal allowing users to control the status of the personal information
5 User make decisions and submit the final results
6 The system checks and filters data in the database
7.The system returns the data for user
Triggers Users have a demand to edit personal data
Assumptions The user has fully implemented the function
Pre conditions Users must have an account
Post conditions The user information has been saved to the database
− A filter used to filter categories: Classified according to the categories code presented above
− A filter used to filter provinces: This filter does not incorporate calling the province api but only uses pre-created code in the database to filter existing posts
− A price range filter combined with a pull bar is integrated into the modal, partly to help users easily identify the price range, the rest is for convenience for those who need to search a wide price range
− The area filter is used to determine the seller's area and also works similarly to the price range filter
− Finally, when getting enough values of the 4 components, the filter will combine and send those values to the server to process and return data to the user
− After detailing the steps, the following table will specifically describe the processes that need to be performed :
This figure describes how chatbot work The chatbot applied in this project is a chatbot that simulates real people with quite limited features, can record questions and provide solutions to predetermined questions However, it still supports very well when users need to use web features
The chat bot in this project is set up to answer predetermined questions, some are set up to automatically respond to customers, questions about issues about :
− Ask factual questions, such as asking for the date
− Ask how to use the website : The chat bot will return a response that includes instructions that can help the user do what they want
− Provide solutions for communication with administrators
− But a huge limitation in this chat bot is its thinking ability This chat bot has almost no thinking ability to answer more complex questions or perform other multitasking tasks
Table 3 16 Use case specification for chat bot
Use case User chatbot modal
Summary User need help for using the website
2 The chatbot start and begin answering question from user
3 The user asking the questions
4 The chatbot recording the question and start to analyze
5 The answers begin to display the content
6 The user continue to ask questions if they do not clear it all 7.The system returns the answer for the user
Triggers Users have problems using the website and need help
Assumptions The user has fully implemented the function
ACTIVITY DIAGRAM
Figure below describes how a post management function works, in this section, the operations the user can do with the post also represent the functions the user can interact with the database, the way it works is divided into 3 parts :
− The first thing to do to be able to manage posts is that the user must have an account and be a member This will be checked by the backend for a string of code that is attached throughout the user's use of the app and is still valid for use 2 days later, if within 2 days, the website checks and does not see the presence of that code, then the login session will expire and the app will automatically log the user out
− The second step is to check if the user has posted yet If not, the user's post will be empty and there will be no data to make changes to the post
− In the third step, if the user has met the above two conditions, the posts that the user has posted will appear in the post management section This is managed based on the one-to-many relationship outlined above
To clarify the design of the post management section, it must be divided into 3 different sequential parts :
− The first part is the actions that are called to perform operations when users interact with functions on the website :
• The activities included in this section are buttons set to different states to perform user create, update and delete operations
• Another set of buttons to filter and determine posting status To operate the post status management function, the project must use React's moment library, accompanied by a checkStatus function that operates as a separate function to be able to check the status of the post and returns the value to display to the user
− With the participation of two hooks, useState and useEffect, its operating structure will be described as follows :
Figure 3 6 Post management activity diagram
• First, let the initial status of the post be 0, then the post will be considered newly posted and right at the moment the user calls a post action, the function will start calculating the time according to the format DD/MM/YYYY Format date will be placed in a separate env file and imported when needed
• To do this, have to use a function called useState() The working flow of this hook is to set a definition of the name of the state, then define the function name for that state and declare an initial value for the state, which in this project itself will have to set the value of at the time of posting is 0
• When the time is calculated, the hooks will automatically re-render the posting time because its function is to consider a life cycle in that component, when its value changes, it will automatically re-render
• After it has the value of the posting date, another function will be used to check the value of the previous function according to the conditions we set This function will currently be taken from React's existing functions
• Both functions run together, it will return a value That value is used to do one of the logical operations, which can be compared and displayed to users so they can control postings
This figure below describes the operating structure of the post filtering modal The filter will be divided into 2 main functional parts :
− An individual filter is at the top, but can only filter individual categories by article This partly helps limit the clutter of unnecessary information, partly is a classic design form applied to prioritize the components embedded in the website
− A two-sided filter that works in parallel with the first filter so users can easily search for individual needs, without applying multiple conditions to one filter
− With such a design, users can completely read information from top to bottom and methodically filter according to their needs, avoiding conflicts in searching for posts according to personal needs
− The third filter is a composite filter of the remaining two filters However, the third filter will be designed into a separate UI to increase user experience This filter is launched to reach more demanding users who require more precision and want to find the best place to live
− This filter is a combination of different components When calling this filter, the operations that will take place are calling functions and libraries to support the display of the filter
− Parameters in the modal will be calculated according to the percentage value of the slider This modal is made up of 3 parts :
• The first part : a slider to adjust the magnitude of the value via a function that is customized mouse tracking logic, assign a track variable to the mouse and set the value of the slider to coincide with the value of the return variable
• The second part : includes a set of buttons representing pre-divided price and area ranges When clicking on those price or area ranges, the function will check whether the user is clicking on the price or not performing a click operation
• The third part : This section takes care of the display of the modal so that the information is more coherent The parameters will be displayed directly on the screen The display must be made to be accurate to the scale at which the user drags, functions will be called to get the value from the coordinates that the user drags, from there to the numbers and together with other functions to get the value of the intervals that the user drags
• Using the same component to display the drag value when used in parallel with React's status check function
Figure 3 7 Modal filtering function diagram
− Logical reasoning to perform functions:
• First, divide the two ends of the pull bar into two parts, assign the left end to 0% (mouse 1), the right end to 100% (mouse 2)
RESULTS
HOMEPAGE
Figure 4.1 describes the layout of the website , including these components :
− Headers (1) : including logo and buttons for client to login, register or create new post These three buttons use the same component and will be distinguished based on the displayed information performed by a logic function
− Navigation (2): contains different post features, including 6 categories :
Figure 4 1 Layout of the website client-view
• Homepage : include all posts regardless of characteristics The filter function will be activated here, calling posts that contain the characters of the necessary conditions
• Apartment rental: include posts about apartment rental The filter function will be activated here, calling posts that contain the characters of the necessary conditions
• Premises for rent: include posts about premises for rent When reaching this route, the system will switch to calling other api to get the value of these posts
• Room for rent: include posts about room rental Here, the system will return posts that meet the conditions, creating results for the user about related posts
• House for rent : include posts about house rental Along with the category code being divided into individual post properties, when clicking on this link, it will also call the operation to return results to the user
• Contact : include an input form to contact the page owner This route includes input fields for users to leave information when they need to be contacted again
• Chatbot : include a chatbot to interact with client This chat bot is embedded on the client side to answer predetermined questions, without wasting time transferring data However, the big disadvantage is that it cannot think and users have limited experience
− A filter including 3 buttons (3) : representing the 3 main and most sought-after economic centers This filter represents 3 big cities, takes data directly from the database to limit unnecessary information on the home page, part of it is in the system design category, the rest is used for decoration, as well as a function, avoiding redundancy in the design process that takes up space on the web
− The displayed content is divided into 2 columns : the posting list takes up 3/5 of the area (4), while the remaining 2/5 of the area (5) is for interaction with the database for users to search to meet their requirements
− The chatbot (6) located in the bottom left of the page for users can easily reach through This chatbot will work in parallel with the user on the client side, without affecting the database, thereby simplifying the update process for the chatbot
− The footer includes 2 main parts : the ones for pagination (1), the others (2,3) for information about the website and contact to the owner as shown in Figure 4.2 Each time the api is called, the client side will retrieve and display 5 standard posts From there, the pagination will be displayed according to the system's required page number
− Include 2 buttons (4) for adding 2 buttons at the bottom of the page to shorten operation time as well as give users easier access to main functions, thereby increasing the web experience without taking more space
− The division into 2 footers as above helps users to clearly identify which button is to send contact and which is the button to post a new message Corresponding to each button carrying a different function, there will be explanations and demonstrations for each function.
DETAIL POST
After having a frame to display the general information of the post, it is necessary to display the detailed information Unlike the type hierarchy, where posts are only displayed briefly, including necessary information and important summaries, detailed posts will classify the unique characteristics of each type of customer
Designing according to the first image will make the website more eye-catching and modern Designing according to the first image will make the website more eye-catching and modern, this is considered an infrastructure that includes customer participation The following figure will describe in detail the layout of the information page
Figure 4 3 Detailed layout of posts
This section includes a slider containing all the images, users will be able to view photos through an album Right below is the detailed title of the post and its characteristics:
− The information will be presented specifically and clearly, from the left is the content accompanied by icons to represent the properties of the parameters
− The category type is also located in the description and includes a link to filter similar categories if the user needs it
− A feature summary table containing abridged information is provided in figure below
Figure 4 4 Detailed table of posting characteristics
LOGIN AND REGISTER
Mostly, the main function lies in the registration form Including checking the correct entered fields and securing passwords for sending to the server The buttons will be dynamically rendered according to the login or registration function, creating convenience for users when using the website
Choosing to center the input form will make the interface more harmonious, increase its appeal to users, and will also be convenient for placing additional functions that need to be further developed, such as promoting more products, rent additional website layouts
The contact page is always hard rendered so that users can conveniently find and contact the administrator Combined with contact, embedding links and reusing categories to help use website resources more effectively, thereby increasing experience and saving more space for the website
Condition to successful registration : name and password (1) can be anything, but phone number (1) must be number value, combined with warnings in different colored letters that have been applied on many different websites, this project also uses the same techniques Identifying errors and retaining states will be present
The warning system will record the error number and when an error occurs, a notification will be displayed to the user right below the place to enter information
The warning (1) will help customers identify errors to easily replace or repair when necessary Those prerequisites are:
− Empty fields leave the 3 fields blank : Implements a function that checks if the user has left the field blank If the user leaves blank without any characters, it will return the case of missing input information
− Incorrectly entered character field rules :
• This field specifies binding conditions such as the phone number must be entered as an integer character type
• Passwords must have 6 characters or more This will be tested and the correct error returned to the user so that the error can be identified and corrected
• Returning such a response will take advantage of the returned response to create a pop-up to notify the user of successful or failed login or registration
• The popup information will include a warning, a notification and a button for the user to confirm receipt of the notification
Figure 4 6 Test the API using postman to see the response
Here there will be an additional function to exchange the login and registration status by considering an event on the application If the user already has an account, a popup will be displayed notifying that the account already exists, provided the phone number matches
Use a library called sweetalert2, which provides specific instructions for use It is a function built on the ReactJS platform and, by combining its usage methods, will create a simple but effective pop up notification with all the necessary features of a warning notification Advantages and disadvantages of this popup notification :
− Advantage : Fast response time and feedback, easy to use, has a code flow available so it can be applied directly to personal applications,and a variety of notification protocols
− Disadvantage : Cannot be customized to personal preferences, must depend on the supplier's settings, but with full protocols and methods, users do not need to customize anything further
Figure 4 7 Popup notification of login status
At this point, users can completely evaluate where they are wrong so they can easily correct the error The logical processing of the input form has been isolated within a distinct component, which will be integrated into the application
Figure 4 8 Warning for wrong form fill
This component functions as a dual-purpose tool, serving to minimize errors transmitted to the server and alerting users to be vigilant about any errors, facilitating immediate identification and correction
The way this function works is that before submitting the form to the server, it will be checked first, and if it meets the conditions, data will be sent to the server.
POST MANANGEMENT
The user's account management page, where users can view login information, manage posts, manage personal information or send requests for help to administrators With the use of hooks to retrieve data stored in the store, this has supported both programmers and users in the post management structure and in managing post data
Figure 4 9 Layout of create new posts
This layout divided into 3 coloumns :
− The first column field (1) is to represent the basic functions of account management including 5 buttons representing 5 different functions
− The second row (2) is used to display the post information management section, including buttons representing each separate function that is called an independent APIs and works together
− The third column (3) is utilized to showcase prompts for the user, encouraging accurate completion of the posting process, minimizing errors, and alleviating pressure on both the system and the site administrator
This is a column-based design and each column represents different components With the combination of an API that calls account information to render and display information to users, this makes it easier for users with multiple accounts to control personal information
Figure 4 10 Layout of post management
The implementation of post management will be checked in the form of checking the user's Id, and from there, all posts posted by that user will be retrieved and displayed on the user interface.This layout of posts management divided into 2 coloumns with 3 different buttons :
− The first column field is designed with the same function as the figure shows Here, still render the necessary routes including components for editing posts, viewing post information, editing personal information, contacting administrators and a button to exit the login session
− The second row (1) is designated for presenting the post information management segment, featuring individual buttons that represent distinct functions Each of these functions is referred to as independent APIs, and they collaborate seamlessly This section includes a table with 8 columns to display the characteristics of a post
− Include 3 buttons : green (3) for fixing the post , red (3) for delete the post, and the other white (2) for sorting the state of the posts Clicking “Sửa” buttons invokes action functions described as inputting data or retrieving data and automatically refilling it
− When clicking on the “Xóa” button, the system will call an action, perform the operation and start setting all the values of the post to empty and delete it This action will also delete data on the database and return a result to display to the user
− A post is valid for 2 months Within 2 months, if there is no activity from the administrator, the post will enter expired status, and users will know about it through the filter The result is explained in Figure below
Figure 4 11 The function returns the post information update status
Figure 4 12 Result of active post filtering
Figure 4 13 Result of filtering expired posts
This is the result when filtering posts, the filter flag will be assigned the current value so users can determine the function being used This function is called by a status check function:
− It will take the time value of the post and compare it with the current time If the pre-set time limit is exceeded, the post will render the status
− From there, the application will retrieve the value of the status and display it to the user.This function is developed for the future, integrating an additional condition to manage members, collecting additional fees to maintain postings Or more simply to reduce the burden on the data system
Figure 4 14 Interface of the post editing page
This interface is divided into 2 separate columns with 3 different functions:
− (1) : The interface will take the value from the store and fill in the spaces that the user filled in when creating a new post This minimizes time loss and creates convenience for users
− (2) : Combined with calling the city API from here, the data will be rendered and displayed for the user to make a selection The api used here is an API that retrieves the province from the Province API
− (3) : A list of constraints is attached when the user goes through the editing and posting process Designing notes here will be more convenient for users to observe and guide the correct posting.The user's name will also be dynamically rendered according to the content to represent a careful reminder from the developer
UPLOAD IMAGES
To support the posting management part, an additional function is added: the image upload API Here, we use a third-party software to support it, which is Cloudinary Using Cloudinary's upload capabilities, upload media assets in bulk with a variety of options for customizing how they will be uploaded, including naming, and applying incoming transformations
When you upload to Cloudinary, your asset is stored, Cloudinary also automatically analyzes and saves important data about each asset, such as format, size, resolution and prominent colors This data is also automatically indexed to enable searching on those attributes
Cloudinary provides a secure and comprehensive API for easily uploading media files from server-side code, directly from the browser or from a mobile application This API uses HTTPS over a secure protocol, and by default, the requests are authenticated with a signature
Figure 4 21 Interface for users to upload photos
To analyze the user's image upload, it must be divided into two parts, these two parts will represent two different functional descriptions, each function will perform a separate task :
− The part that performs the image upload function : This part will be the interface used to display to the user including a portion of the website area to accommodate function buttons, a camera-shaped button helps users identify where to upload photos, and finally an image preview before uploading to the database for control and management
− The others are folders containing image information : This section shows detailed properties of the image, including length, width, resolution, link to the image, image name and version information
− This information will be used for data storage and calculation to optimize performance, in addition, cloudinary also uses an additional attribute called multiple to upload multiple image files at the same time
− After performing the upload process, the interface will return two things: one is a data file containing information, the other is an image link, the image link will be customized to be smaller
Figure 4 22 Preview tag to preview the image
Figure above shows the process to upload an image file to cloudinary When uploading files, it will not work in the same function as the post server, so it will only call a separate API to upload image files to the server
From there, will record data in the project's database and access it when needed exported, it will have to work in parallel with cloudinary.We can still upload more photos, depending on the desired number of images
On the contrary, when selecting many different images at once, the images will be sequentially uploaded to the folder and will be re-rendered under the preview section for the user to observe Process used to upload photos :
Figure 4 23 Folder containing images in cloudinary
− The user clicks on the camera icon in the photo posting area This will automatically trigger the next action
− The folder will automatically open the user's image section and let the user choose The user prepares the image or downloads the file from the internet
Figure 4 24 Image sequential process is uploaded
− After selecting the photo, a status icon will activate to confirm and load the photo The loading effect will take place until the photo upload process ends
− The preview folder will display minimized images for users to view and evaluate
The type of data stored on the database is in the form of a link, this link will be accessed via cloudinary to retrieve and display images to the user The following is the result describing the link saved in the database and in the image folder of cloudinary It is divided into 2 parts:
− The first is a link to cloudinary's library, this link is taken from the data file when uploading images, this is provided by cloudinary's API
− The second is the cloudinary storage folder, including a folder created on the cloud and an image explaining the link
Saving image links via an external API will include factors such as flexibility, existing concepts and uses, just attach to the app and use Thanks to that, it is possible to exchange information about the system and help identify errors easily Identified errors can be more easily reviewed and corrected On the other hand, it is an external configuration so we can easily control it such as storing and retrieving information from storage
Figure 4 26 Folder to save photos on cloudinary
VALIDATE DATA FUNCTION
This section will present the results of the data validation function before submitting the form to the server To avoid users sending error messages to the server, this function will be set up as follows :
− The first is to prevent users from sending empty files to the server This both helps control the quality of postings and notifies users to fix errors
− The second is to help users identify errors, and correct errors according to the requirements of the posting The figure below shows the results of this
Figure 4 27 Validate data before sending
This validate function is also applied to the login and registration control, it will have a message to return the error as well as display it for the user to fix Using the same logic algorithm, it will be attached to the same CSS but with different logic, thereby limiting the indiscriminate creation of components and still meeting user needs and system requirements This function was created for 2 purposes and principles :
− Helps the system reduce the burden of inconsistent data, making the system heavy and avoiding web crashes
− Direct warnings to users simplify the process of editing postings, limiting carelessness on the part of customers
Figure 4 28 Warning below input form
This validate function is used a lot in the system, Checking and calculating errors, returning notifications are also completed and combined with libraries to create notification popups, it will be complete in providing accurate updated information to customers.
PERSONAL INFORMATION MANAGEMENT
The interface of the personal information editing section will only include 1 straight column, in which it contains all the user's information through 2 components :
− An input for read-only part: this part cannot be changed by the user because this is directly assigned information
− The rest can be changed by the user because this is personal information including name and avatar
− When clicking on the update system, the application will automatically retrieve all user information during the login session including full name, phone number, avatar
− The mechanism for selecting an avatar is to open folder in local storage and choose form, but the data format is saved in buffer form
Figure 4 29 Personal information management interface
Figure 4 30 Updated personal information successfully
To update personal information, it will be necessary to call an API to edit personal information This API will include a function to retrieve the user's current information data during the login session, then re-render it and automatically fill in the fields Users cannot change their phone number because management issues will become more complicated and require control from the website admin Users can change their name, Facebook account, avatar and zalo Then, will run in parallel with an avatar format conversion function When the process ends, the system will return results to the user as shown in Figure above.
CONTACT ADMIN
This is a page that represents a function that brings a lot of value to help users and website administrators When a website is put into reality, detailed errors during use are inevitable
To write an admin contact page, steps are:
− Create a contact form: This is the first way for users to contact the administrator Create contact forms using various tools, such as Google Forms, JotForm or Typeform, but here this project uses a self-made entry form for users to fill in personal information and request a description
− Add a contact form to the website: After creating a contact form, you need to add it to your website The best place to do this is in the footer or sidebar of your website
− Test the contact form: Make sure the contact form works properly before launching the website This action can be performed by submitting a form to check and ensure that the server has received the data
− Promote the contact page: After adding the contact form to the website, you need to promote it so that users know how to contact you You can do this by adding a contact page to your navigation menu
Here is the plugin to write the admin contact page:
− Use clear and concise language: The instructions on the contact page are easy to understand
− Respond to user inquiries: Make sure you respond to user inquiries as quickly as possible
− Provide multiple ways to contact the admin: In addition to the contact form, you can also provide other ways for users to contact you, such as email address or phone
By following these steps, a contact page makes it easy for users to stay in touch with administrators Addressing individual user needs should be categorized based on question characteristics and time-related issues
It can be seen that the number of questions is very large, the space of the database depends on the scale of the application business, so creating an information communication system like this helps administrators record information problems that need to be resolved
Thus, "contact" in "contact with administrator" is not just communication in the usual sense, it covers a broader scope, so applying the contact form will change the form website operations
Figure 4 32 Pop-up notification success send
The information displays successfully sent communication to the administrator, this means that the data fields from the user input were sent to and recorded on the database successfully
In this form notification, an external library will be used to display it to the user, increasing aesthetics as well as promoting objective value to the user The rest is to increase control over sent data On the user side, the admin will collect data and distribute it to solve needs sequentially
This helps reduce operating costs directly to the site, helps establish and strengthen invisible relationships between admin and users, creating the conditions for division is early access to site vulnerabilities With the basis of system actors including sellers and buyers, operational profiles and problem handling will be more specifically defined.
CHATBOT
To minimize repetitive problems from users, helping work work accurately and productively, chatbots are an important part of current information technology Because the characteristics of the problem are the same, to ensure the service quality of the website, chatbots are applied here With support from chatbots, users will receive immediate responses within a 24/7 time frame, helping to reduce the workload of support staff and save business costs
Figure 4 33 Chatbot's interface and location
When not activated, the chatbot will be located in a corner of the screen to optimize the size of the website, and will have a short description for users to identify with the goal of simulating, classifying intentions, extracting information, specifically customer support then it will need a separate interface for management and data entry The dialogue interface will include two main parts :
− The first part : Used to display the interface of the dialogue, the interface of the conversation, including messages sent from the user and response messages from the chatbot Users control the consultation process in this section
− The second part : Used to display the input interface including the input bar and submit button The user controls the input process at this point
− The submit button will work in parallel with other types of buttons
− Figure below describes the layout, design and button function
− Just like a real human model, the first thing the chatbot displays is a brief introduction and understanding of the customer's needs
− Customers will be introduced to the chat bot's features directly by asking what the bot can do Chatbots will usually be divided into two types :
− Open domain type : Allows participating in chat topics with any topic In this project, this type is not used
− Close domain type : Allows access to a specific type of topic, like here the user manual and chat with the site admin This type of domain was born to solve the problem of helping customers operate on the website
The conversation manager is responsible for determining the type of question, Conversation management is responsible for determining the type of questions and contexts that will be built through pre-set logic processing
The chatbot's script will be pre-built, so the customization process is limited, only through retrieving specific data and not implementing more complex structures such as natural language processing or APIs This chatbot operates based on pre-set rules Building this type of chatbot is about coming up with rules or pre-existing patterns that tend to target the questions users will ask
− This type of chatbot will be easier to update Instead of having to retrain the chatbot every time there is new data, just add data to the current database
Figure 4 36 Chat with chat bot
Above are two dialogue samples within the established chatbot scope :
− The first is the type : for instructions on how to use the website, users ask questions to use the website's features, chat bot will return the types of activities the user can do
− The second is the random chat type : depends on the type of question the user uses, but there is not much data, this type is stereotyped so it is still quite mechanical This image simulates chatbot conversations, integrating many types of questions to answer users, advise, provide information, and solve simple problems to serve the website.
CONCLUSION AND FUTURE WORK
FUTURE WORKS
Because of limitations in time and human resources to complete the project, some functions have not been implemented on the website In the future progress of the project, I plan to add the functions of saving articles, liking articles, registering via social networks, integrating paypal and momo to make electronic payments and submit data users onto the blockchain system
Design an additional admin page for the website owner to be able to read requests from users Because the admin only directly manages data through the database but does not have an admin page, it will cause problems as they must have knowledge of MySQL to be able to manage the page Apply an electronic payment system to make deposits and in parallel, develop an additional page to contain posts that users add to their favorites to increase the user experience
Perform additional functions such as discount hours to attract investors and create a transparent online real estate investment market To operate in parallel, it is necessary to develop a third-party verification system such as citizen identification verification, notary document wallets and online contracts, plus security from the blockchain system Transparency and data protection will be enhanced
[1] "Website tìm kiếm và mua bán bất động sản 24h" 2023 [Online] Available: https://batdongsan24h.com [Accessed 3 Jan 2024]
[2] "Website tìm kiếm và mua bán nhà đất" 2023 [Online] Available: https://nhatot.com [Accessed 3 Oct 2023]
[3] "Cổng thông tin mua bán nhà trọ Mogi" 2023 [Online] Available: https://mogi.com [Accessed 3 Jan 2024]
[4] "Json Web Token Introduction - jwt.io" 2023 [Online] Available: https://jwt.io [Accessed 3 Sep 2023]
[5] "Redux Contributor" 2023 [Online] Available: https://redux.js.org [Accessed 4 Sep 2023]
[6] Wieruch, Robin, "Setting up a React Project", The road to react: Your journey to master plain yet pragmatic React Js, pp 161-165, 2017
[7] Narayn, H "Hook into React", Just React! Learn React the React Way, pp.243-
[8] Breithaupt, F "Machines of turning actions into reactions: the German novella and the event", Romanticism and Modernity , pp.169-182, 2014
[9] Siddika, A., Siddiqa, M., Akter, S., and Fariha Taj, F Rooftop into a Thriving
Garden with Innovative Web Platform (Doctoral dissertation, Sonargaon
[10] Casciaro, M Mammino, L Node js Design Patterns: Design and implement production-grade Node js applications using proven patterns and techniques
[11] Hunter II, T Distributed Systems with Node js."O'Reilly Media, Inc.", 2020 [12] David, J., Euzenat, J., Scharffe, F., Trojahn dos Santos, C "The alignment API 4.0" Semantic web, 2(1), 3-10, 2011
[13] Adamopoulou, E., Moussiades, L "An overview of chatbot technology" In IFIP international conference on artificial intelligence applications and innovations pp 373-383 Springer, Cham, 2020.