Building a seo optimized e commerce website, integrating payment and order management solutions

Nguyễn Bùi Duy Phong Student ID: 19110102 Project’s name: BUILDING A SEO-OPTIMIZED E-COMMERCE WEBSITE, INTEGRATING PAYMENT AND ORDER MANAGEMENT SOLUTIONS Implementation contents: Theory

INTRODUCTION

REASONS FOR CHOOSING THE TOPIC

We decided to pursue the project “Build an SEO-Optimized E-commerce Website, Integrating Payment and Order Management Solutions” because of its relevance and impact in today's digital age E-commerce has rapidly transformed the retail landscape, with more consumers preferring the convenience of online shopping This growing trend presents an exciting opportunity for us to develop essential skills in web development and digital marketing Focusing on SEO optimization is crucial for ensuring that our website stands out in search engine results, driving organic traffic and enhancing visibility Additionally, integrating secure and efficient payment gateways is vital for building customer trust and ensuring seamless transactions Effective order management is another critical component, streamlining the entire process from order placement to delivery, which is essential for operational efficiency and customer satisfaction By working on this project, we aim to gain hands-on experience and develop a broad skill set that includes web development, SEO strategies, and the integration of various third-party services commonly used in Vietnam, such as VietQR for payments and Giaohangnhanh for deliveries This multidisciplinary approach not only bridges the gap between theoretical knowledge and practical application but also encourages us to think creatively and develop innovative solutions for the challenges faced by online businesses Overall, this project provides a comprehensive learning experience that will be invaluable for our future careers.

THE PROJECT OBJECTIVE AND SCOPE

Boosting visibility through SEO: We're going to use SEO techniques to help our website appear higher in search engine results This means more people can find us just by searching online We’ll optimize everything from our website’s text to its structure to make sure it’s search engine friendly.

Integration payment solutions: We want to make paying as easy as possible, so we're going to set up a variety of payment methods Whether our customers prefer using their credit cards, digital wallets, or even direct bank transfers, we’ll have options ready It’s all about making transactions smooth and secure.

● Managing orders efficiently: We’re developing a system that will take care of orders from start to finish This means keeping track of inventory, processing orders quickly, and making sure customers always know the status of their purchase

● Integration delivery solutions: This integration APIs from shipping providers will allow our system to automatically update shipping options based on availability, cost, and delivery timeframes directly from the carriers Customers can choose their preferred shipping method at checkout, and the system will handle the logistics seamlessly.

Enhancing the shopping experience: We’re focused on making our website not just functional but also appealing and easy to navigate Whether someone is shopping on a phone or a computer, we want their experience to be seamless and enjoyable.

In addition to main goals above, there are also want to aim for:

● Help customers have many choices of diverse product designs based on their interests on the website and interaction data.

● Build and analyze user data on the website to help admins get statistical data in business activities and come up with reasonable future business strategies.

● Build a technology blog covering news about current and new technologies around the world.

The research phase will focus on understanding and selecting the most suitable solutions for each component of the e-commerce website, particularly tailored to the Vietnamese market This includes:

Market Research: Conduct research to understand the target audience, market trends, and competitive landscape in Vietnam This will help identify user preferences and local market demands.

Technology Stack: Evaluate and select appropriate technologies for both frontend and backend development:

+ Frontend: NextJS, ReactJS, TailwindCSS, MUI, Redux.

+ DevOps: AWS (S3, EC2), Vercel, pm2, nginx.

Third-Party Integrations: Investigate and choose third-party services that are commonly used and trusted in Vietnam and global:

+ Payment: VietQR for secure and convenient payment processing.

+ Delivery: Giaohangnhanh for reliable and efficient delivery services.

+ Cloud Storage: Cloudinary for storing and managing images and other media files.

+ Order Management: Google Mail and Zalo OA for handling order notifications and customer communications.

+ Notifications and Authentication: Firebase for phone OTP verification and notification services.

Based on the research findings, the project will implement the following key components:

Use NextJS and ReactJS to build a responsive, dynamic, and user-friendly interface Style the application with TailwindCSS and MUI for a modern and consistent look Manage application state using Redux to ensure a smooth user experience.

Develop the backend using NodeJS and Express to handle server-side logic and API requests Store and manage data with MongoDB for a flexible and scalable database solution.

Host the application on AWS (S3 for storage, EC2 for server hosting) and Vercel for seamless deployment Use pm2 to manage and keep the application running smoothly Configure nginx for efficient web server management and load balancing.

VietQR: Integrate this payment gateway to offer secure and convenient payment options for users.

Giaohangnhanh: Set up delivery service integration to ensure fast and reliable order fulfillment.

Cloudinary: Utilize this service for cloud storage, particularly for managing product images and media files.

Google Mail / Zalo OA: Implement these services for order management, including sending order confirmations and updates to customers.

Firebase: Use Firebase for phone OTP authentication and notification services to enhance security and user engagement.

Conduct thorough testing to ensure the website is bug-free and performs well under various conditions Deploy the website using Vercel and configure it to work seamlessly with AWS services.

Implement SEO best practices, including keyword optimization, meta tags, and content strategies Optimize website performance to ensure fast loading times and a smooth user experience.

EXPECTED RESULT TO ACHIEVE

By the end of this project, we expect to achieve the following results:

1 Functional E-commerce Website: A fully operational e-commerce website that offers a smooth and user-friendly shopping experience.

2 High Search Engine Rankings: Improved visibility on search engines resulting from effective SEO strategies, leading to increased organic traffic.

3 Secure Payment Processing: A secure and reliable payment processing system that supports multiple payment methods, ensuring customer trust.

4 Efficient Order Management: An integrated order management system that simplifies the entire process from order placement to delivery, enhancing operational efficiency.

5 Enhanced User Engagement: A website that not only attracts visitors but also engages them, encouraging repeat visits and customer loyalty.

6 Valuable Insights and Skills: Practical experience and knowledge gained in web development, SEO, payment integration, and order management, which will be beneficial for future projects and career opportunities.

IMPORTANCE OF THE PROJECT IN THE TECHNOLOGY INDUSTRY

Drive innovation, leading to the development of new products, services and solutions These innovations can give companies a competitive advantage, allowing them to differentiate themselves in the market For example, advances in AI, blockchain or quantum computing could revolutionize many different fields, including e-commerce.

Significantly impacts market access by allowing businesses to expand operations beyond geographical limitations Online platforms allow companies to tap into global markets, reaching customers they otherwise wouldn't be able to reach.

Deep understanding of consumer behavior

Involves collecting and analyzing huge amounts of data This data provides insights into consumer behavior, preferences and trends, which are critical to making informed business decisions.

Projects that focus on automation and process improvement can deliver significant efficiencies In the e-commerce sector, this could involve automating inventory management, customer service (via chatbots), or personalized marketing campaigns.

In both technology and e-commerce, security is paramount Projects that strengthen cybersecurity measures, such as developing secure payment gateways or protecting customer data, will build trust with consumers.

Projects that incorporate sustainable practices can have a positive impact on the environment and society In the e-commerce industry, this may involve using environmentally friendly packaging, optimizing logistics to reduce carbon emissions, or supporting fair trade practices.

In summary, projects in the technology industry and e-commerce market are important in driving innovation, expanding market reach, improving efficiency, ensuring security and promoting sustainability solid These projects not only give businesses a competitive advantage but also contribute to promoting economic growth and social welfare on a broader scale.

THEORETICAL BACKGROUND

SYSTEM ARCHITECTURE

The Architecture is using of the project is MERN Stack, it is fully applied when building for the source Admin Management Website and this architecture is also used similarly to the Store Website, the only difference is that the front-end is done with NextJS to take full advantage of SEO that NextJS brings.

MERN Stack - a technology stack that includes MongoDB, Express.js, React, and Node.js - has quickly become a popular choice in the web application development community for many reasons This combination leverages the power of JavaScript from the client to the server side, creating a flexible and high-performance development environment.

Using JavaScript for both front-end and back-end brings many benefits This is a powerful language, with a large community and many supporting resources Using the same language for both the front-end and back-end simplifies application development and maintenance, reducing complexity and learning curve for developers.

In the MERN Stack, React is a popular JavaScript library for building user interfaces (UI) React's flexibility allows for the creation of reusable UI components, smooth interactions, and improved application performance Besides, Node.js is an environment that runs server-side JavaScript code, using a non-blocking I/O model, allowing applications to handle multiple requests simultaneously without causing blocking or delay.

MongoDB, which is an unstructured database, uses JSON documents to store data

It is flexible and scalable, suitable for applications that require high flexibility and scalability.

The combination of technologies in the MERN Stack creates a highly flexible, performant, and scalable web application development environment This makes it easier to build modern, interactive, and easily scalable web applications, while attracting the attention of the development community.

TECHNOLOGY USED IN FRONT-END

Next.js is a popular React framework for building server-side rendered (SSR) and statically generated web applications It aims to simplify the development process and improve performance by providing a range of built-in features.

Next.js allows you to render your React components on the server, delivering a fully-rendered page to the client This improves performance and SEO.

You can pre-render pages at build time This is useful for sites with content that doesn’t change often, allowing for fast load times.

Next.js lets you create API endpoints within your application, providing a way to handle back-end logic and server-side functionality without needing a separate server.

This feature allows you to update static content after the site has been built You can regenerate specific pages by revalidating them as needed.

Next.js automatically splits your code into smaller bundles, which can be loaded on demand This improves the performance by only loading the necessary code for each page.

Built-in support for optimizing images, including automatic resizing, lazy loading, and serving modern formats like WebP.

File-based routing system where the file structure in the pages directory maps to the route structure of your application.

Built-in support for CSS and Sass, including CSS modules, allowing for scoped styles.

Easy management of environment variables for different environments (development, production, etc.).

In total, Next.js offers a comprehensive solution for building modern web applications with React Its combination of SSR, SSG, and ISR makes it a versatile choice for projects that require performance, SEO, and scalability Whether you're building a small personal site or a large-scale web application, Next.js provides the tools and features to make development easier and more efficient.

React is a popular and powerful JavaScript library widely used in user interface (UI) development for web applications Based on the creation of UI components, React offers a flexible and efficient approach to building interactive user interfaces.

React allows dividing the user interface into independent and reusable components These components can be developed independently and reused in multiple parts of the application, making source code management and maintenance easier.

React uses a mechanism called Virtual DOM (Virtual Document Object Model) to improve application performance Instead of updating the entire DOM when data changes, React updates only the elements that change, helping to optimize the update and rendering speed of the website.

React uses JSX, a syntax extension of JavaScript that allows you to write JavaScript- like HTML code JSX helps developers build user interfaces in a more intuitive and readable way.

React manages the state of components and passes data through properties (props).

This helps build dynamic applications that are highly interactive with users.

React has a large community with many supporting libraries and tools, making it easy for developers to find solutions to specific problems and enhance application scalability.

- High Performance: Using Virtual DOM helps improve application performance and rendering speed.

- Reusability: Components can be reused easily, helping to optimize source code management and maintenance.

- Flexible State Management: React helps manage application state flexibly and easily.

- Strong Community Support: The React community is large, with lots of resources and support, helping to solve development problems.

In total, using React in building user interfaces provides flexibility, performance, and high code reuse, making web application development more convenient and efficient.

MUI (formerly known as Material-UI) is a popular React UI framework that provides a comprehensive set of components based on Google’s Material Design guidelines It helps developers build visually appealing and responsive user interfaces with ease.

MUI offers a wide range of components, including buttons, cards, modals, forms, tables, and many more These components are designed to follow Material Design principles.

MUI allows extensive customization through its theme system You can customize the look and feel of the components to match your brand’s design guidelines.

With MUI’s theming solution, you can define color palettes, typography, spacing, and other design tokens The library provides a default Material Design theme that can be easily extended and customized.

Components in MUI are designed to be responsive out-of-the-box The framework includes a grid system and utilities for managing responsive layouts.

Full TypeScript support is provided, making it easier to develop and maintain large codebases with type safety.

- Accessibility: MUI components are built with accessibility in mind, adhering to WAI-ARIA standards to ensure that your application is accessible to all users.

- Performance: MUI focuses on performance optimization by using lightweight CSS-in-JS styling solutions and tree-shaking to include only the components you use.

- Rich Ecosystem: MUI is part of a larger ecosystem that includes MUI X (advanced components like data grids, date pickers, and more), MUI Base (unstyled components for greater customization), and other tools and libraries that integrate well with MUI.

In short, MUI is a robust and versatile UI framework for React that simplifies the process of building modern, responsive, and accessible web applications With its extensive component library, theming capabilities, and support for advanced features, MUI is an excellent choice for developers looking to create high-quality user interfaces.

TailwindCSS is a highly popular utility-first CSS framework that provides a set of predefined classes directly in the HTML to control the layout, spacing, colors, typography, and more It allows developers to create custom designs quickly and efficiently without writing any custom CSS.

TailwindCSS focuses on providing low-level utility classes that you can use to build custom designs without leaving your HTML This approach allows for rapid prototyping and development.

TailwindCSS is highly customizable You can configure it to match your design system by modifying the default configuration file This includes changing colors, spacing, typography, and more.

Built-in responsive design utilities allow you to create responsive layouts with ease You can apply different styles at different breakpoints using simple class names.

You can extract repeated utilities into reusable components, making your codebase more maintainable and DRY (Don't Repeat Yourself).

TailwindCSS can be integrated with PostCSS to enable advanced features like auto prefixing, purging unused styles, and more.

The utility-first approach enables fast development cycles, allowing developers to prototype and build applications quickly.

By using predefined utility classes, you can ensure design consistency across the entire application.

TailwindCSS makes it easy to maintain and scale large codebases by allowing you to create reusable components and avoiding inline styles.

TailwindCSS generates minimal CSS by purging unused styles in production builds, resulting in smaller file sizes and improved performance.

TailwindCSS has a large and active community, with plenty of plugins, themes, and resources available to help you build better applications.

In short, TailwindCSS is a powerful utility-first CSS framework that simplifies the process of designing custom, responsive, and consistent user interfaces Its flexibility, customization options, and focus on performance make it an excellent choice for modern web development.

Redux is a predictable state container for JavaScript applications, often used with React to manage the state of an application It centralizes the application’s state and logic, making it easier to manage, debug, and test.

Redux stores the entire state of the application in a single JavaScript object, which ensures consistency and makes it easier to debug and test.

State changes in Redux are handled by pure functions called reducers, which take the previous state and an action, and return the new state This makes the state predictable and easier to understand.

By centralizing the state, Redux helps in managing and sharing state across different components without passing props down multiple levels.

Redux supports middleware, which allows for handling side effects such as asynchronous actions, logging, crash reporting, etc Popular middleware includes Redux Thunk and Redux Saga.

Redux DevTools provide powerful features for debugging, including time-travel debugging, state inspection, and action replay.

Redux ensures that the state is consistent across the entire application, making it easier to reason about the state changes.

With a single source of truth and predictable state management, debugging and testing become more straightforward.

Redux is well-suited for large applications where managing state across many components can become complex.

By separating state management from the UI logic, Redux helps in writing cleaner, more maintainable code.

Redux has a robust ecosystem and a large community There are many libraries, tools, and middleware available to extend its functionality.

In short, Redux is a powerful state management tool that provides a predictable and centralized way to manage the state of your application Its benefits in terms of consistency, debugging, and scalability make it an essential tool for complex and large-scale applications.

TECHNOLOGY USED IN BACK-END

Node.js is a server-side JavaScript code execution environment built on Chrome's

JavaScript Engine (V8 Engine) It allows developers to use JavaScript to write server-side code, not just client-side like before.

Key features of Node.js:

Node.js uses a non-blocking model in handling Input/Output (I/O) operations This allows Node.js to process multiple requests simultaneously without blocking or waiting, optimizing application performance.

2 Single-threaded and Event-driven:

Node.js uses a single-threaded model with an event loop to handle requests Instead of creating a new thread for each request like other multithreading models, Node.js uses a single thread to handle multiple requests This helps optimize server resource usage.

Node.js supports modules, allowing applications to be divided into small parts (modules) for easy source code management and reuse Modules can be imported and exported for reuse in multiple parts of the application or in other applications.

Node.js has a large community with many supporting libraries and frameworks This makes it easier to find solutions to specific problems and aids in the development process.

Benefits of using Node.js:

- High Performance: Suitable for applications that require simultaneous processing of multiple requests without blocking.

- Flexibility: Single-threaded and event-driven model facilitates high-performance request handling.

- Modular Development and Source Code Reuse: Support for modules allows the application to be divided into small, easy-to-manage and reused parts.

In total, Node.js is a strong choice for server application development, especially for applications that require processing multiple requests simultaneously without blocking It delivers high performance and flexibility in server and web application development.

Express.js is a web application framework built on Node.js, used to build web applications and APIs quickly and easily It provides the necessary features to handle HTTP requests and manage application routes.

Main features of Express.js:

Express allows defining routes (paths) for the application by attaching handler functions to each route This helps determine how to handle and respond to each HTTP request to the server.

Middleware are functions that can execute before route handling functions are called This allows tasks such as authentication, error handling, or preprocessing tasks to be performed before the final processing of the route takes place.

Express supports many template engines such as EJS, Pug, Handlebars, allowing users to build user interfaces flexibly and easily.

Express provides middleware to serve static files such as images, CSS and JavaScript, helping to create complete web applications with static and dynamic content.

Express is often used to build APIs for web applications Thanks to its simple and flexible syntax, Express is a popular choice for building web services based on RESTful APIs.

Benefits of using Express.js:

- Flexibility and Modularity: Express provides a flexible approach to HTTP request handling, making code reuse easier.

- Easy to Learn and Use: Simple syntax, easy to learn and use, especially for developers new to Node.js.

- Strong Community: Express has a large community, with many resources, modules and community support.

In short, Express.js is a powerful framework for developing web applications and

APIs based on Node.js Its simplicity, flexibility, and power make Express a popular choice for building modern and powerful web applications.

MongoDB is an unstructured database management system (DBMS) developed to store and retrieve data in the form of JSON-like documents It is one of the popular NoSQL database systems, widely used for applications with high flexibility and scalability requirements.

MongoDB stores data as BSON (Binary JSON), a format similar to JSON Data is organized into documents, each document can contain different fields, and does not need to comply with a fixed schema like in relational databases.

MongoDB supports flexible data structures, allowing fields to be added or changed in a document easily without modifying the schema It also supports horizontal scaling by splitting data into multiple servers, increasing performance and storage capacity.

MongoDB provides a powerful query language for searching and retrieving data, including complex queries such as conditional queries, sorting, filtering, and paging of data.

MongoDB supports replica sets to provide high reliability and data recovery in case of server failure In addition, MongoDB also supports sharding to distribute data and increase system scalability.

- Flexibility and Scalability: MongoDB allows unstructured data storage and is easily scalable, suitable for applications with rapidly changing requirements.

- High Performance: With document-oriented storage and powerful query capabilities, MongoDB provides good performance for data retrieval.

- Strong Community and Support: MongoDB has a large community, providing extensive documentation, tutorials, and support to users.

In short, MongoDB is a powerful, flexible and scalable NoSQL database management system, suitable for building applications that require high flexibility and future scalability.

Mongoose is a Node.js library used to make interacting with the MongoDB database easier It helps developers build Node.js and MongoDB applications conveniently by providing a simple and flexible interface to work with MongoDB.

Mongoose is used to design data as objects in Node.js, helping to create a layer of abstraction between Node.js code and the MongoDB database It allows defining Schemas (data models) to structure data and manage data in MongoDB.

Mongoose supports checking and validating data before saving it to the database You can define data validation rules like checking data type, limiting length, requiring required fields, and more.

Mongoose provides a powerful API to perform queries to the MongoDB database It supports building complex queries such as searching, sorting, filtering and performing CRUD (Create, Read, Update, Delete) operations.

Mongoose supports middleware, allowing you to add intermediate functions to perform operations before or after performing database operations such as validate, save, remove, and more.

Mongoose supports population and referencing, allowing you to link data from different collections in MongoDB, helping to create relationships between documents.

- Work Easily with MongoDB: Mongoose makes interacting with the MongoDB database more flexible and easier.

- Validation and Middleware: Supports data validation and middleware to manage logic before and after performing database operations.

- Simplified Querying: Provides an API for building complex MongoDB queries more easily and flexibly.

RESTful API (Representational State Transfer) is an architecture designed for application programming interfaces (APIs) based on the principles and rules of REST REST is an architecture based on standard web protocols, widely used in web development and mobile applications to create flexible and extensible APIs.

RESTful APIs do not store user state information between requests Each request from the client contains enough information necessary for the server to understand and process that request.

RESTful APIs use URIs (Uniform Resource Identifiers) to identify resources that the client wants to retrieve or change Each resource is identified by a unique URI path.

RESTful API uses HTTP methods (GET, POST, PUT, DELETE) to perform CRUD (Create, Read, Update, Delete) operations on resources The HTTP method defines the action to be performed on the resource.

Data returned from RESTful APIs is often returned in standard formats such as JSON

(JavaScript Object Notation) or XML (eXtensible Markup Language), making it easier to process and understand by client applications.

Benefits of using RESTful API:

- Flexibility and Extensibility: RESTful APIs provide a flexible structure that allows extensibility and openness to different applications and devices.

- Standardization: Using standard protocols and methods in APIs facilitates integration and interoperability between different systems.

- Good Responsiveness: RESTful allows processing requests and returning data quickly and efficiently.

2.3.6 JSON Web Tokens (JWT) and Safety Considerations

Figure 4 JSON Web Tokens (JWT)

JSON Web Tokens (JWT) is a method for transmitting information between a user and a server in the form of a signed and encrypted JSON script JWT is widely used for authentication and authorization in web and mobile applications However, when using JWT, there are several security factors that need to be considered:

Security Factors to consider when using JWT:

JWT is used to authenticate users and provide access to resources JWT allocation needs to be strictly controlled and only issued to valid users.

Encrypting information in JWT helps protect data from being read or modified Digital signature ensures that the JWT is not altered during transmission between client and server.

JWT can be configured with an expiration time to limit its usage time Using a proper expiration time helps avoid using the JWT after it has expired.

4 Storing in Cookies and Local Storage:

If storing JWTs in cookies or local storage, security issues need to be considered Local storage can be vulnerable to Cross-Site Scripting (XSS) attacks, while cookies are vulnerable to Cross-Site Request Forgery (CSRF) attacks Consideration of how to store JWTs is important for safety.

During the process of sharing and sending JWTs between system components, it is necessary to ensure that data is not disclosed or changed during transmission.

The secret key is used to sign and decrypt the JWT Safe and secure secret key management is extremely important to prevent attacks.

TECHNOLOGY USED IN DEVOPS, CLOUD

Amazon S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance It is designed to make web-scale computing easier for developers by providing a simple web services interface to store and retrieve any amount of data, at any time, from anywhere on the web.

1 Scalability: S3 automatically scales to handle any amount of data and supports millions of requests per second.

2 Durability and Availability: S3 is designed for 99.999999999% (11 9s) of durability and 99.99% availability of objects over a given year.

3 Storage Classes: S3 offers different storage classes to optimize cost and performance based on access patterns, such as S3 Standard, S3 Intelligent-Tiering, S3 Standard-IA (Infrequent Access), and S3 Glacier for archival storage.

4 Security: Data can be encrypted both at rest and in transit S3 integrates with AWS IAM (Identity and Access Management) to control access to data.

5 Data Management: Features like versioning, lifecycle policies, and object tagging help manage data efficiently over its lifecycle.

6 Data Transfer: S3 Transfer Acceleration and Snowball help with fast, reliable, and secure data transfers.

7 Event Notifications: S3 can trigger notifications and workflows in response to changes in objects, integrating with AWS Lambda, SNS, and SQS.

8 Query in Place: Tools like Amazon Athena and S3 Select allow for querying data stored in S3 without having to move it to a database.

2.4.2 Amazon EC2 (Elastic Compute Cloud):

Amazon EC2 provides resizable compute capacity in the cloud It is designed to make web-scale cloud computing easier for developers by providing complete control of your computing resources and letting you run on Amazon's proven computing environment.

1 Scalability: Easily scale up or down to handle changes in requirements or spikes in popularity, reducing the need to forecast traffic.

2 Variety of Instance Types: A wide range of instance types optimized for different use cases, including general-purpose, compute-optimized, memory-optimized, storage-optimized, and GPU instances.

3 Elastic Load Balancing (ELB): Automatically distributes incoming application traffic across multiple EC2 instances.

4 Elastic Block Store (EBS): Persistent block storage for EC2 instances, with high performance and availability.

5 Auto Scaling: Automatically adjusts the number of EC2 instances to maintain performance and manage costs.

6 Networking Features: Virtual Private Cloud (VPC) allows you to launch EC2 instances in a logically isolated section of the AWS cloud Features include subnets, route tables, internet gateways, and security groups.

7 Security:: Secure instances using IAM roles, security groups, network ACLs, and key pairs for SSH access.

8 Cost Management: Pay for what you use with on-demand instances, save with reserved instances, or use spot instances for spare capacity at reduced cost.

9 Flexible Pricing Options: On-demand, reserved, and spot instances allow for flexible cost management based on usage patterns.

In a word, AWS S3 and EC2 are foundational services that provide robust, scalable, and flexible solutions for storage and compute needs S3 offers highly durable and available object storage, making it suitable for a wide range of data storage needs, from backups to big data analytics EC2 provides scalable compute capacity, giving you control over the computing environment to meet diverse application requirements Together, these services form a powerful base for building and scaling applications on the AWS cloud.

PM2 is a popular production process manager for Node.js applications It is designed to make the deployment, monitoring, and management of applications easier and more efficient PM2 helps ensure that applications are always up and running, allows for seamless restarts, and provides valuable insights into application performance.

1 Process Management: PM2 can start, stop, restart, and delete applications with simple commands It supports clustering mode, allowing you to fully utilize multi-core systems by forking multiple instances of your application.

2 Daemonize Applications: PM2 runs applications as a daemon, ensuring they stay online even after a server restart or crash.

3 Zero-Downtime Reloads: PM2 supports zero-downtime reloads, enabling you to update applications without any service interruptions.

4 Monitoring: PM2 provides real-time monitoring of applications, including CPU and memory usage, with built-in logs and performance metrics.

5 Log Management: PM2 handles log management by aggregating logs from all instances of an application, simplifying debugging and error tracking.

6 Cluster Mode: PM2 can run applications in cluster mode, distributing incoming connections across multiple instances for better load balancing and performance.

7 Configuration File: PM2 uses JSON or YAML configuration files to manage multiple applications and environments, simplifying deployment and management processes.

8 Watch and Restart: PM2 can watch for file changes and automatically restart applications, improving development workflow efficiency.

9 Startup Scripts: PM2 can generate startup scripts to automatically launch applications on system boot, ensuring that applications are always running.

10 Ecosystem Modules: PM2 supports ecosystem modules that extend its functionality, such as PM2-logrotate for log rotation and PM2-web for web-based management.

Conclusion, PM2 is a powerful and flexible process manager for Node.js applications that helps manage application lifecycle, monitor performance, and ensure high availability Its features make it suitable for both development and production environments, providing a comprehensive solution for running and managing Node.js applications effectively.

Vercel is a cloud platform for static sites and serverless functions that simplifies the deployment and management of modern web applications It is particularly well-suited for frameworks like Next.js, but supports a wide range of frontend frameworks and technologies Vercel aims to provide developers with the tools they need to build fast, scalable, and highly performant websites and applications.

1 Easy Deployment: Vercel makes it straightforward to deploy web applications You can connect your GitHub, GitLab, or Bitbucket repository, and Vercel will automatically deploy your application on every push.

2 Serverless Functions: Vercel supports serverless functions, allowing you to run backend code without managing servers Functions can be written in Node.js, Go, Python, and other languages.

3 Edge Network: Vercel's platform is built on a global edge network, which means your applications are distributed across multiple locations worldwide, resulting in low latency and fast load times.

4 Automatic SSL: Vercel automatically provides SSL certificates for your domains, ensuring secure connections for your users.

5 Custom Domains: You can easily add custom domains to your projects, with automatic configuration and support for wildcard domains.

6 Preview Deployments: Every git branch and pull request gets its own preview deployment, making it easy to share and test changes before merging them into the main branch.

7 Build and Development: Vercel provides build and development tools that integrate with popular frontend frameworks like Next.js, React, Vue.js, Angular, Svelte, and others.

8 Analytics: Vercel offers built-in analytics to monitor the performance of your applications, including metrics like page views, response times, and more

9 Environment Variables: Securely manage environment variables for different deployment environments (development, staging, production).

10 Collaboration: Vercel supports team collaboration with roles and permissions, making it easy to work with multiple developers on the same project.

Conclusion, Vercel is a powerful platform that simplifies the deployment and management of modern web applications With its global edge network, seamless integration with popular frontend frameworks, and robust feature set, Vercel is an excellent choice for developers looking to build and scale high-performance web applications Its ease of use, coupled with advanced capabilities like serverless functions and automatic deployments, makes it a popular choice in the web development community.

Cloudinary is a cloud-based service that provides a comprehensive solution for managing, optimizing, and delivering images and videos for web and mobile applications

It offers a wide range of features that enable developers and content creators to handle media assets efficiently and effectively.

1 Image and Video Management: Upload, store, and organize images and videos with a powerful media library.

2 Automatic Optimization: Automatically optimize images and videos for different devices and bandwidths, ensuring fast load times and reduced bandwidth usage.

3 Responsive Delivery: Deliver responsive images and videos tailored to various screen sizes and resolutions using dynamic URLs.

4 Transformations: Apply a wide variety of transformations on the fly, such as resizing, cropping, overlaying text or watermarks, adjusting brightness and contrast, and more.

5 Content Delivery Network (CDN): Distribute media assets globally using a fast and reliable CDN to ensure quick delivery and improved performance.

6 Video Processing: Transcode, resize, and optimize videos, add effects, generate thumbnails, and more.

7 AI and Machine Learning: Use AI-powered features like automatic tagging, facial recognition, and content-aware cropping to automate and enhance media workflows.

8 APIs and Integrations: Comprehensive APIs and SDKs for various programming languages and frameworks, including JavaScript, Python, Ruby, PHP, Java, and more.

9 Security: Secure your media assets with features like signed URLs, access control, and encryption.

10 Analytics: Track usage and performance with detailed analytics and reporting.

Conclusion, Cloudinary provides a robust and versatile platform for managing, optimizing, and delivering media content With features like automatic optimization, on-the-fly transformations, global CDN delivery, AI and machine learning capabilities, and comprehensive API and SDK support, Cloudinary is an excellent choice for developers and businesses looking to handle media assets efficiently Its ease of use, powerful functionalities, and extensive integrations make it a valuable tool for enhancing the performance and user experience of web and mobile applications.

THIRD PARTIES INTEGRATION

VietQR is a popular payment gateway in Vietnam that facilitates quick and secure transactions through QR codes It allows businesses to offer a seamless and convenient payment experience for their customers by integrating with various banking systems and e-wallets.

VietQR allows users to make payments by scanning QR codes, making transactions fast and hassle-free.

It supports integration with multiple banks and e-wallets in Vietnam, providing flexibility for users to pay through their preferred method.

Transactions are secured with robust encryption and authentication protocols, ensuring the safety of user data and funds.

The system is designed to be user-friendly, with simple interfaces for both customers and merchants.

Payments are processed in real-time, providing instant confirmation and updates.

Customers can make payments quickly by scanning a QR code with their mobile banking app or e-wallet.

Advanced security measures protect against fraud and unauthorized transactions.

Real-time payment processing ensures faster cash flow for businesses.

Using a well-known and trusted payment method can enhance customer confidence in your business.

In summary, VietQR provides a fast, secure, and convenient way to handle online payments, making it an excellent choice for e-commerce websites looking to streamline their payment processes.

Giaohangnhanh is a popular delivery service in Vietnam that offers fast and reliable shipping solutions for businesses It helps e-commerce platforms manage their logistics and ensure timely delivery of products to customers.

Giaohangnhanh specializes in fast delivery services, ensuring that orders reach customers quickly and efficiently.

The service provides real-time tracking and notifications, allowing both businesses and customers to monitor the status of deliveries.

Giaohangnhanh covers a large geographical area, making it suitable for businesses with a broad customer base across Vietnam.

The platform offers various delivery options, including same-day delivery, next-day delivery, and scheduled deliveries.

Fast and reliable delivery services help enhance customer satisfaction and loyalty.

Real-time tracking and notifications keep customers informed about their order status, reducing uncertainty and improving the overall shopping experience.

Giaohangnhanh's wide coverage ensures that businesses can serve customers in different locations efficiently.

Flexible delivery solutions allow businesses to choose the most suitable delivery option based on their needs and customer preferences.

In summary, Giaohangnhanh offers fast, reliable, and flexible delivery services, making it a valuable partner for e-commerce platforms looking to optimize their logistics and improve customer satisfaction.

2.5.3 Google Mail / Zalo OA (Order Management)

Google Mail and Zalo OA (Official Account) are powerful tools for managing orders and customer communications in Vietnam Google Mail is widely used for email communication, while Zalo OA is a popular messaging platform in Vietnam that allows businesses to interact directly with customers.

Main features of Google Mail:

Automated email notifications for order confirmations, shipping updates, and other customer communications.

Seamlessly integrates with various e-commerce platforms and order management systems.

Customizable email templates to match your brand’s voice and style.

Google Mail’s robust infrastructure ensures that emails are delivered promptly and securely.

Main features of Zalo OA:

Businesses can send messages directly to customers through Zalo, a popular messaging app in Vietnam.

Send bulk messages for promotions, updates, or announcements.

Use rich media, buttons, and interactive elements to enhance customer engagement.

Integrate with order management systems to provide real-time updates and support.

Benefits of using Google Mail / Zalo OA:

Keep customers informed and engaged through timely and personalized messages.

Leverage the popularity of Zalo in Vietnam to reach a large audience directly on their mobile devices.

Customize communications to maintain a consistent brand image.

Automate notifications and updates to streamline order management processes.

Improve customer experience by providing clear and consistent communication throughout the order lifecycle.

In summary, integrating VietQR, Giaohangnhanh, Google Mail, and Zalo OA into your e-commerce website can enhance payment processing, delivery efficiency, and customer communication, leading to a seamless and satisfying customer experience.

2.5.4 Firebase (Phone OTP and Notification Services)

Firebase, a platform developed by Google, provides a comprehensive suite of tools for building and managing applications, including phone number authentication via OTP (One-Time Password) and notification services These features enhance the security and user engagement of your application.

Main features of Firebase OTP:

Firebase Authentication allows users to sign in using their phone numbers It sends a verification code (OTP) via SMS to the user’s phone, which they can then enter to authenticate.

Firebase provides SDKs for various platforms, making it easy to integrate phone authentication into your web and mobile applications.

Firebase handles the complexity of verifying phone numbers and OTPs, ensuring that the authentication process is secure and reliable.

Supports phone number authentication for users around the world, providing a seamless experience regardless of their location.

Firebase Authentication includes user management capabilities, such as handling user sessions and providing user data securely.

Main features of Firebase Notification Services:

FCM allows you to send notifications and messages to users across various platforms, including iOS, Android, and web.

Send targeted messages based on user behavior, demographics, or other criteria to enhance engagement.

Deliver real-time notifications to keep users informed about important events, updates, or promotions.

FCM supports rich media in notifications, such as images, videos, and action buttons, making messages more engaging.

Firebase provides analytics tools to measure the effectiveness of your notifications and understand user engagement.

Benefits of using Firebase OTP and Notification Services:

Phone number authentication via OTP adds an extra layer of security, reducing the risk of unauthorized access.

Users can quickly and easily authenticate using their phone numbers without the need for complex passwords.

Real-time notifications help keep users engaged and informed, leading to better retention and satisfaction.

Firebase’s comprehensive documentation and SDKs make it straightforward to implement authentication and messaging features.

Firebase services are built to scale, allowing you to handle a growing number of users and messages without performance issues.

In summary, Firebase OTP and Notification Services provide robust solutions for enhancing the security and engagement of your application By integrating these features, you can offer a secure and seamless authentication experience, as well as keep users informed and engaged through targeted notifications.

REQUIREMENT CAPTURING AND MODELING

ANALYSIS SIMILAR APPLICATIONS

Thế Giới Di Động (MWG) is one of the leading retail corporations in Vietnam, specializing in electronic and technology products This company stands out with its retail system spread across the country, including store chains such as Thegioididong.com, Dien May Xanh, and Bach Hoa Xanh.

Participate in many charity and community support programs, especially in the fields of education and health Implement environmental protection programs and activities, minimizing negative impacts on the environment from business activities Continuously on the list of companies with the fastest growth and most prestige in Vietnam Received many domestic and international awards for service quality, sustainable development and social responsibility.

Website thegioididong.com was established in 2004 This is one of the first and prominent e-commerce websites in Vietnam, specializing in providing electronic and technology products such as mobile phones and computers boards, laptops, and related accessories With its strong development, thegioididong.com has become a reliable and popular shopping address for consumers in the technology field.

Model Summary: Thegioididong.com is an e-commerce platform focusing on technology and electronic products, which has built reputation and consumer trust thanks to product quality, professional service and sales system widespread This website is not only a convenient online shopping destination but also a place to provide information, advice and effective technical support for technology users in Vietnam.

Having a product comparison feature helps customers easily compare options before deciding to buy

Committed to protecting customers' personal information, using advanced security technologies.

Supports many safe and convenient payment methods such as card payments, bank transfers, and e-wallets.

The interface is still a bit confusing and may not be fully optimized.

Because it provides many technology products, there is still limited diversity in some product categories compared to other major competitors

Shopee is one of the leading e-commerce platforms in Southeast Asia and Taiwan, providing a diverse and convenient online shopping experience for millions of users Founded in 2015, Shopee has quickly grown, expanding its operations to many different countries The platform offers a wide range of products from clothing, electronics, home appliances, to beauty products and food, meeting diverse consumer needs.

Shopee stands out with its friendly interface, simple and safe payment process, and professional customer support policy This platform also offers attractive promotions, helping buyers get the products they want at affordable prices In addition, Shopee also actively cooperates with major retailers and brands, bringing rich choices and guaranteed product quality to consumers.

With convenience and excellent customer service, Shopee has become a trusted online shopping destination for millions of users in Southeast Asia and Taiwan.

Model Summary: Shopee has built a powerful and diverse e-commerce platform, providing a comprehensive shopping experience for users With advanced features, buyer protection policies, and an extensive delivery network, Shopee continues to affirm its position as one of the leading e-commerce platforms in Southeast Asia and Taiwan.

Diverse types of items and product categories.

Easy-to-use interface and convenient shopping experience.

Unequal product quality leads to many fake and poor quality products, especially for higher priced products such as electronic devices.

Fragile devices may encounter problems during transportation.

Adopt a Better Experience with thegioididong.com:

Focus on some specific product categories and create a more diverse and rich product database.

Improve the user interface and shopping experience to engage consumers and build trust.

Guaranteed shipping and product transparency better than Shopee: Product insurance may be available to the user if the product is damaged when it reaches the user or the user discovers counterfeit goods.

Develop a Product and Seller Diversification Strategy: Focus on expanding the agricultural product list and attracting more sellers to increase diversity and choice for consumers.

From these analyses, combining the strengths and avoiding the limitations of these models can help build an effective and attractive online technology product sales platform for users.

DETERMINE REQUIREMENTS

Related Formulas Related forms Note

3 Search product Search Search by product name

5 Manage cart Store Change quantity or remove product from cart

7 Tracking order Search View order's delivery status

8 Review Store Give comments on purchased products

Related Formulas Related forms Note

Store Users can add and remove address in their accounts

Search Users can see all the products they've ever purchased

7 Search product Search Search by product name

9 Manage cart Store Change quantity or remove product from cart

11 Tracking order Search View order's delivery status

12 Review Store Give comments on purchased products

4 View all ordered products Search View all orders that the user has placed.

5 Cancel order Store Admin can cancel the order if the information provided by the user is invalid.

6 View all accounts in system

1 The website can be edited and upgraded to suit the tastes of customers and the needs of the admin such as promotions,

The website works well with many devices.

Function buttons are arranged not too complicated and easy to see

The functional screens interact well with each other, creating convenience for users.

3 The database is stored securely and easily accessible.

The website works stably, access and processing speed is fast.

4 The website meets the requirements of the user without affecting the activities of other users Compatibility

5 The design and functionality of the website can be reused for future development.

The code can be used many times and can be applied to many different programs without having to change the code too much.

LIST OF ACTORS AND USE CASES

- View the list of products

User - Log in/ Log out

Table 5 List of actors and use cases

USE CASE DIAGRAM

3.4.1.1 Description of Login Use Case

Description Actors log into the system

Precondition When the actor wants to log into the system to do something

(2) Click to the login part.

(3) Enter username and password into login form.

(5) If the password and username are correct, the actor will log into the system.

3.4.1.2 Description of Register Use Case

Description Actors register an account in the system

Precondition When the actor wants to have an account in the system to become a user

(2) Click to the register part.

(3) Fill in all required information and have that information checked for validation before signing up.

(4) Click on the register to create a new account (after checking whether the account has existed, or the password is correct or not).

3.4.1.3 Description of View Information of Products Use Case

Use Case View Information of Products

Description Actors view information of products

Precondition When the actor wants to view details products

(2) Login or not to the app and will be in the home screen.

(3) Click any product to see that product’s details.

Table 8 Use Case View Information of Products

3.4.1.4 Description of Search Use Case

Description Actors search for a specific product in the system

Precondition When the actor wants to find a specific product in the system

(2) Click the search button on the navigation bar and input the keyword then press enter.

(3) Result will show all things related to the keywords.

3.4.1.5 Description of Add to Cart Use Case

Use Case Add to Cart

Description Actors add product to their cart

Precondition When the actor wants to add product to their cart

(2) Click on any product to view that product’s details.

(3) Click the cart button and the product will be available in their cart.

Table 10 Use Case Add to Cart

3.4.1.6 Description of Order and Purchase Use Case

Use Case Order and Purchase

Description Actors order product in their cart

Precondition When the actor wants to order products in their cart

(2) Click on the cart button.

(3) Select the products you want to buy.

(4) Click the order button and proceed to payment.

Table 11 Use Case Order and Purchase

3.4.1.7 Description of Review Use Case

Description Actors review the products of website

Precondition When the actor wants to review the products of website

(2) Click on any product to view that product’s details.

(3) Actors click on the Shop Tab in the navigation bar at the top of the website and will see the product filter and a list of products

(4) Scroll to the bottom to see customer reviews.

(5) Give the star review and enter a comment.

3.4.1.8 Description of Manage Profile Use Case

Description Actors manage their profile

Precondition When the actor wants to update their profile information

(2) Log in to the system.

(3) Click into the profile management.

(4) Fill in or edit the information they want.

Table 13 Use Case Manage Profile

3.4.1.9 Description of Manage Address List Use Case

Use Case Manage Address List

Description Actors manage their address list

Precondition When the actor wants to update their address list

(3) Click into the address list management.

(4) Fill all information to add a new address, delete or update address.

Table 14 Use Case Manage Address List

3.4.1.10 Description of Manage Ordered List Use Case

Use Case Manage Ordered List

Description Actor manages their ordered list

Precondition When the actor wants to view their order history

(3) Click into the ordered list management.

(4) See order history and can click on an order being delivered to view the order status.

Table 15 Use Case Manage Ordered List

3.4.1.11 Description of Manage Products Use Case

Description Actors manage their products

Precondition When the actor wants to update their products

Steps (1) Open the web for admin.

(3) Fill all information to add new products, delete or update products.

Table 16 Use Case Manage Products

3.4.1.12 Description of Manage Users Use Case

Description Actors manage their users

Precondition When the actor wants to update information of users

(3) See all users in the system.

(4) Fill all information to add a new user, delete or update the user.

Table 17 Use Case Manage Users

3.4.1.13 Description of Manage Orders Use Case

Description Actors manage the orders list

Precondition When the actor wants to view and update orders list

(3) View all orders being placed by users and guests.

(4) Can view order details or edit information of orders and cancel orders.

Table 18 Use Case Manage Orders

3.4.1.14 Description of Manage Contents Use Case

Description Actors manage their contents

Precondition When the actor wants to update their blogs

(4) Add a new blog, delete or update any blog.

Table 19 Use Case Manage Contents

3.4.1.15 Description of Manage Promotions Use Case

Description Actors manage their promotion

Precondition When the actor wants to update their promotions

(4) Add a new promotion, delete or update any promotion.

Table 20 Use Case Manage Promotions

3.4.1.16 Description of Statistics and Reporting Use Case

Use Case Statistics and Reporting

Description Actors manage their statistics and reports.

Precondition When the actor wants to view their statistics and reports.

(3) See all system statistics and reports.

Table 21 Use Case Statistics and Reporting

SYSTEM DESIGN

CLASS DIAGRAM

DATABASE TABLE DETAILS

Ord Attribute Type Domain Meaning Note

Key Unique identifier for each document

Auto-gene rated by MongoDB

2 fullName String optional Full name of the user

3 email String unique Email of the user

4 dateOfBirth Date optional Date of birth of the user

Phone number of the user

6 username String required unique Username for authentication

7 password String required Password for authentication

8 role String required Role of the user Enum of

9 description String optional Description about the user

10 avatar String optional Avatar Url of the user

11 address String optional Address of the user

Date the document was created

13 updatedAt String system generated Date the document was last updated

1 _id ObjectId Primary Key Unique identifier for each document

2 name String required Name of the product

3 model String required Model of the product

4 slug String required, unique Unique

5 brand String required Brand of the product

6 descriptions String optional Description of the product

7 category ObjectId reference Reference to the

8 subCategory ObjectId optional Subcategory of the product

9 status String enum Status of the product

(new, used, popular, sold out)

10 images [String] optional List of image URLs

11 mainImageUrl String required Main image URL of the product

12 variants Array required List of variants

13 createdAt Date system generated Date the document was created

14 updatedAt Date system generated Date the document was last updated

Unique identifier for each document

Auto-gener ated by MongoDB

2 name String required Name of the variants

3 isDefault Boolean optional The main variant of the product

Option optional Options list to choose the color of variant

Option Model (Option of variant)

2 price Number required Price of the option

3 inventory Number required Inventory count for the option

4 color String optional Color of the option

5 hex String optional HEX code of the color

6 discount Number optional Discount on the option

7 soldCount Number optional Number of items sold

8 status String optional Status of the option

9 tag [String] optional Tags associated with the option

10 images [String] optional URLs of images for the option

11 mainImageUrl String optional URL of the main image

12 timestamps Date auto-gen Timestamps for created and updated dates

2 user ObjectId required User who owns the cart

Object required Items in the cart

4 description String optional Description of the category

Key Unique identifier for each document Auto-gen erated by MongoD B

2 productId ObjectId required Reference to the

3 productName String required Name of the product

4 variantId ObjectId required Reference to the variant

5 variantName String required Name of the variant

6 optionId ObjectId required Reference to the option

7 color String optional Color of the product

8 quantity Number required Quantity of the product ordered

9 hex String optional HEX code of the color

10 price Number required Price of the product

11 discount Number optional Discount on the product

12 specifications Object optional Specifications of the product

2 customerId ObjectId required User who made the review

3 customerGender ObjectId required Product that was reviewed

4 customerName String required Comment made by the user

5 customerEmail Number required min: 1 max: 5

Rating given by the user

String required Images attached with the review

Order Item required List of ordered items Reference to Order Model

8 status String required Status of the order

9 shippingAddress String required Shipping address for the order

10 paymentMethod required Payment method used for the order

11 orderDate Date required Date when the order was placed

2 userId ObjectId required User who made the review

3 productId ObjectId required Product that was reviewed

4 reviewerName String required The name of reviewer

5 reviewerPhone String required The phone number of reviewer

6 comment String optional Comment made by the user

7 rate Number required min: 1 max: 5

Rating given by the user

String optional Images attached with the review

9 createdAt Date auto-gen Date when the review was created

10 updatedAt Date auto-gen Date when the review was updated

2 name String required Name of the event

3 startDate Date required Start date of the event

4 endDate Date required End date of the event

5 panel String optional The panel URL of the event

6 description String optional Description of the event

7 isActive Boolean optional Indicates if the event is currently active

8 discount Number optional Discount percentage for the event

9 products [ObjectId] reference List of product references associated with the event

10 createdBy ObjectId reference Reference to the user who created the event

2 title String required Title of the blog post

3 isHtmlEmbedded Date optional Indicates if the content contains HTML

4 htmlContent Date optional HTML content of the blog post

5 content String optional Text content of the blog post

6 author String required Author of the blog post

7 tags [String] optional Tags for categorizing the blog post

8 likes Number optional Number of likes the blog post has received

2 date Date required Date of the statistic entry

3 establishDate Date required Date of establishment Default:

4 revenue Number required Total revenue Default: 0

5 visitingWebsite Number required Number of website visits

6 ordersCompleted Number required Description of the event

7 ordersCanceled Number required Reference to the user who created the event

8 productsSold Number required Timestamps for created and updated dates

9 customers Number required Total number of customers

10 staffs Number required Total number of staffs Default: 3

11 numberOfStores Number required Total number of stores

12 averageOrderValue Number required Average value of orders

13 newCustomers Number required Number of new customers

14 returningCustomers Number required Number of returning customers

15 popularProductId String optional ID of the most popular product

16 customerSatisfaction Number required Customer satisfaction rating

BACK-END STRUCTURE

SEQUENCE DIAGRAM

Figure 18 Search product sequence diagram

4.4.4 Add product to cart sequence diagram

Figure 19 Add product to cart sequence diagram

4.4.5 Delete cart item sequence diagram

Figure 20 Delete cart item sequence diagram

4.4.6 Create new order sequence diagram

Figure 21 Create new order sequence diagram

Figure 22 Cancel order sequence diagram

Figure 24 Search user sequence diagram

4.4.10 Update user profile sequence diagram

Figure 25 Update user profile sequence diagram

Figure 26 Add product sequence diagram

Figure 27 Update product sequence diagram

Figure 28 Delete product sequence diagram

Figure 29 Add promotion sequence diagram

Figure 30 Edit promotion sequence diagram

Figure 31 Remove promotion sequence diagram

Figure 32 Add content sequence diagram

Figure 33 Edit content sequence diagram

Figure 34 Remove content sequence diagram

GUI

3 Login button Button Login to website

4 Go to Register Page button Navigate Button Redirect to register page

1 Full name Text Input full name

3 Phone number Text Input phone number

6 Confirm password Text Re-input password

7 Register button Button Register ew account

8 Go to Login Page button Navigate Button Redirect to Login page

1 Navigate bar Navigate Bar Navigate to web pages

2 Search button Button Search products

3 Cart button Navigate Button Redirect to Cart page

4 Profile button Navigate Button Redirect to User Profile page

1 Filter tab List Button Filter product with selected category

2 Sort dropdown Dropdown Menu Sort product

1 View image button Button View other images of product

2 View list image button Button Slide product image list

3 Variants button List Button Choose one of product variants

4 Colors button List Button Choose one of product colors

5 Order button Button Make order with product

6 Add to cart button Button Add product to cart

1 Go to home page Navigate Button Go to home page

2 Select product Checkbox Select products that will be made order

3 Remove product Button Remove product from cart

4 Quantity group Button Change cart item quantity

5 Customer gender address Radio Select customer gender address

6 Customer name Text Input customer name

7 Customer phone number Text Input customer phone number

8 Shipping methods Radio Select shipping method

12 Street Text Input street and number

14 Call someone else to receive Checkbox Ask someone else to receive the package

15 Checkout button Button Make order

1 Manage order Navigate Button Redirect to shopping history page

2 Cancel button Button Cancel this order

3 Payment method Radio Select payment method

1 Cancel button Button Cancel payment

2 Download button Button Download QR code image

3 Back button Navigate Button Back to check out page

1 Featured article Navigate Redirect to selected featured article

2 Blog category List Button Filter article

3 Article Navigate Redirect to selected article

1 Toggle sidebar Button Toggle show/hide sidebar menu

2 Menu sidebar Navigate Button Redirect to selected page

3 User action button Button Change account status

4 Setting button Button Change app setting (theme, color)

1 Add button Navigate Button Redirect to add product page

2 Detail button Navigate Button Redirect to product detail page

3 Delete button Button Remove product

1 Search box Text Search order by user name

2 Change order status Button Change order status to next stage

3 Detail button Navigate Button Redirect to order detail page

1 Full name Text Input user full name

2 Email Text Input user email

3 Phone number Text Input user phone number

4 Date of birth Date Input user birthday

6 Gender Radio Select user gender

7 Save information Button Save user information

8 Edit address button Button Edit shipping address

9 Delete address button Button Delete shipping address

10 Save shipping address Button Save shipping address

IMPLEMENTATION AND TESTING

IMPLEMENTATION

The project's development and implementation were completed using the following auxiliary software by the team:

- Use Visual Studio Code to implement Nextjs, Reactjs web application and

- Use MongoDb compass to build and manage database

- Use Vercel for deploying website to hosting

- Use PostMan to test API

- Use Draw.io to draw UML diagrams

5.1.2 Introduction about technologies used in the application

MongoDB is a NoSQL database that stores data in a JSON-like format, known as BSON (Binary JSON) It offers flexibility and scalability, allowing the application to handle large volumes of data efficiently MongoDB's document-oriented structure makes it suitable for storing complex data structures.

Express.js is a web application framework for Node.js It simplifies the process of building web applications and APIs by providing a robust set of features for routing, middleware, and handling HTTP requests and responses Express.js helps in creating scalable and modular applications.

Next.js is a popular React framework for building server-side rendered (SSR) and statically generated web applications It aims to simplify the development process and improve performance by providing a range of built-in features.

React is a JavaScript library for building user interfaces It enables the creation of dynamic and interactive front-end components React's component-based architecture facilitates the development of reusable UI elements, enhancing the application's performance and maintainability.

Node.js is a runtime environment that executes JavaScript code server-side It allows developers to build scalable and high-performing applications Node.js uses an event- driven, non-blocking I/O model, making it efficient for handling multiple concurrent connections.

MUI (formerly known as Material-UI) is a popular React UI framework that provides a comprehensive set of components based on Google’s Material Design guidelines It helps developers build visually appealing and responsive user interfaces with ease.

Vercel is a cloud platform for static sites and serverless functions that simplifies the deployment and management of modern web applications It is particularly well-suited for frameworks like Next.js, but supports a wide range of frontend frameworks and technologies Vercel aims to provide developers with the tools they need to build fast, scalable, and highly performant websites and applications.

Cloudinary is a cloud-based service that provides a comprehensive solution for managing, optimizing, and delivering images and videos for web and mobile applications It offers a wide range of features that enable developers and content creators to handle media assets efficiently and effectively.

Tailwind CSS is a utility-first CSS framework designed to enable developers to build modern web interfaces quickly and efficiently Unlike traditional CSS frameworks that provide predefined components, Tailwind offers low-level utility classes that allow for fine-grained control over the design of elements.

SOFTWARE TESTING

Unit testing is the initial phase of testing and is commonly carried out by the developers themselves This process ensures that individual elements within a software piece at the code level function properly and operate as originally intended In a test-driven environment, developers typically write and execute tests prior to handing over the software or feature to the testing team While unit testing can be done manually, automating this process expedites delivery cycles and widens test coverage Moreover, conducting unit tests aids in easier debugging as identifying issues early on means they require less time to rectify compared to identifying them later in the testing phase TestLeft is an advanced tool that enables testers and developers to shift left by integrating the fastest test automation tool within any Integrated Development Environment (IDE).

Following comprehensive testing of each unit, they are integrated with other units to form modules or components designed for specific tasks or activities These assembled modules are then subjected to integration testing to ensure that entire sections of an application behave as intended (i.e., seamless interactions between units) These tests are typically outlined by user scenarios, such as logging into an application or opening files Integrated tests can be conducted by developers or independent testers and generally involve a combination of automated functional tests and manual tests.

System testing is a black-box testing approach employed to evaluate the completed and integrated system as a whole, ensuring it aligns with specified requirements This method involves testing the functionality of the software end-to-end and is usually carried out by a separate testing team, distinct from the development team, before the product is deployed into production.

Acceptance testing represents the final phase of functional testing, assessing whether the final software iteration is prepared for release It involves confirming that the product adheres to the original business criteria and fulfills the needs of end users This necessitates testing the product both internally and externally, meaning it needs to be evaluated by end users for beta testing in addition to the internal QA team Beta testing is crucial for gathering authentic feedback from potential customers and can address any remaining usability concerns.

White-box testing revolves around the understanding and content of the Source Code (alteration within the program's Code) The testing includes the following aspects:

This technique assesses the functionality of the website in terms of functioning according to specifications It identifies and rectifies website errors including:

- Errors in data structure or external database access.

- Behavioral or performance-related bugs.

CONCLUSION

ACHIEVEMENTS

About knowledge and skills: Concerning the knowledge and skills gained throughout the development of the MERN stack technology product selling application, notable achievements have been made.

Knowledge: Proficiency in utilizing new technologies, ranging from MongoDB,

Express.js, React, TailwindCSS, Next to Node.js, enabling the creation of a flexible, efficient, and easily scalable application.

Skills: Significant progress in developing user-friendly interfaces, effective data management, handling user requests, integrating a secure payment system and order management solutions.

About the product (website): The completed application and its deployment have fulfilled several key requirements:

● Displaying diverse products with detailed information including images, descriptions, prices, sources, and related data.

● Constructing a user-friendly interface enabling users to add items to a cart, confirm orders, and conduct secure online transactions.

● Developing a user account management system allowing easy updating of personal information, managing delivery addresses, and reviewing order histories.

ADVANTAGES

The utilization of the MERN stack has resulted in numerous advantageous aspects for the application:

● Flexible integration of technologies leading to a robust, adaptable, and easily expandable system.

● User-friendly interface facilitating efficient product management and ease of use.

● Secure payment system safeguarding transactions for both users and agricultural product suppliers.

DISADVANTAGES

Despite achieving success, some limitations have been encountered:

● Products sold on the website have a certain complexity, so the database design is not yet optimized and requires a lot of calculation.

● Initial learning curve and adaptation to the NextJS Technology & best practices to optimize SEO may require a significant amount of time.

● Integration complexities when combining various technologies could lead to management challenges.

FUTURE WORK

● Enhancing user experience: Continuous improvement of the user interface and feature enrichment for a better shopping experience.

● Apply other advanced SEO methods to improve website recognition

● Performance optimization: Focusing on enhancing the application's efficiency to handle increased user loads and concurrent interactions.

● Feature expansion: Considering the addition of new functionalities such as product rating systems, user community feedback integration.

● Integration more diverse payment & delivery methods.

1 MongoDB, Document for MongoDB, Retrieved May 1 st , 2024, from https://docs.mongodb.com/

2 Mongoose Library support for MongoDB, Retrieved May 1 st , 2024, from https://mongoosejs.com/docs/

3 Express.js, Document for Express.js, Retrieved May 1 st , 2024, from https://expressjs.com/

4 Next.js, Document for Next.js, Retrieved May 1 st , 2024, from https://nextjs.org/docs

5 React.js, Document for Express.js, Retrieved May 1 st , 2024, from https://reactjs.org/docs/

6 Node.js, Document for Node.js, Retrieved May 1 st , 2024, from https://nodejs.org/en/docs/

7 Firebase, Document for Firebase, Retrieved May 15 th , 2024, from https://firebase.google.com/docs/

8 Firebase OTP, Document for Firebase Integration OTP solution, Retrieved May

15 th , 2024, from https://firebase.google.com/docs/auth/web/phone-auth

9 Vercel, Document for deployment Front-end side with Vercel, Retrieved June 1 st ,

2024, from https://vercel.com/docs/deployments/overview

10 Amazon EC2, Document for Amazon EC2, Retrieved May 29 th , 2024, from https://docs.aws.amazon.com/ec2/?icmpid=docs_homepage_featuredsvcs

11 Amazon S3, Document for Amazon S3, Retrieved May 29 th , 2024, from https://docs.aws.amazon.com/s3/?icmpid=docs_homepage_featuredsvcs

12 Guideline to deploy Node server with EC2 and pm2, Retrieved June 1 st , 2024, https://medium.com/@opeoluwaakinsiku2017/deploying-node-js-app-with-pm2-on-aws- ec2-2024-31c9a23ea717

13 VietQR,Guideline to integrate payment with VietQR, Retrieved May 19 th , 2024, from https://www.vietqr.io/en/intro

14 PayOS, Payment Orchestration Platform support to integrate with VietQR,

Retrieved May 1 st , 2024, from https://payos.vn/docs/

15 Giaohangnhanh, Document for API of Giaohangnhanh, Retrieved May 1 st , 2024, from https://api.ghn.vn/home/docs

16 Google Mail for Developer, Document for integration with NodeJS, Retrieved May 21 st , 2024 from https://developers.google.com/gmail/api/quickstart/nodejs

17 Zalo Official Account, Document for developers to integrate Zalo OA Open AI, Retrieved May 15 th , 2024, https://developers.zalo.me/docs/official-account

Tiêu đề	Building A Seo-Optimized E-Commerce Website, Integrating Payment And Order Management Solutions
Tác giả	Nguyen Bui Duy Phong, Dang Van Thong, Pham Quoc Thai
Người hướng dẫn	Phd. Mai Anh Tho
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Graduation Thesis
Năm xuất bản	2024
Thành phố	Ho Chi Minh City

Định dạng
Số trang	126
Dung lượng	13,56 MB