• Name: Salma Mohamed Hussein Hamed

Design and
Implement an Student ID: 202032130218
online
College: Computer Science and Technology
Shopping
based on Major: Software Engineering
Spring boot
Supervisor: 潘竹生
and Vue.js
 • Born in Egypt, I've witnessed the challenges of accessing
user-friendly online shopping platforms in a culturally rich yet
fast expanding digital landscape.
• The decision to develop an online shopping platform is a
Background cultural response, addressing the changing needs of Egyptian
consumers.
and • Online shopping, a beacon of efficiency, addresses practical
challenges faced daily in the dynamic but time-consuming
Significant traditional markets.
•AIM
• This project aims to bridge tradition and technology, offering
a transformative online shopping experience tailored for
Egypt.
PROJECT The project aims to revolutionize Objectives

DESCRIPTIO the online shopping experience in 1.Cultural Sensitivity: Tailoring the online
shopping platform to resonate with Egypt's
N Egypt by developing a user-friendly
cultural fabric, from design elements to local
platform that seamlessly blends
payment methods.
tradition with technology. Born
2.Economic Impact: Empowering local
out of a deep understanding of the businesses through a digital storefront,
evolving needs of Egyptian fostering entrepreneurship, and contributing to
consumers, this endeavor economic growth.

addresses challenges in traditional 3.Digital Inclusion: Ensuring accessibility for a

markets, offering an efficient, wide demographic with an easy-to-use

platform, bridging the digital divide in Egypt.
culturally sensitive, and accessible
online shopping solution.
 What is my system

The diagram represents an online shopping system, divided into several sections, each representing a different aspect of the
system. It includes elements such as a database, a server, and a client. The database is connected to the server, and the server
is connected to the client. Additionally, the client is also connected to the database, creating a complete flow of information
between the different components of the system.
Also , the diagram includes a phone number, which might be related to customer support or communication with the online
shopping system. Overall, it provides a clear visual representation of the structure and interactions within the online shopping
system.
The identified
1. Localization:
• Tailoring the website to accommodate Arabic language, local currency, and culturally relevant
design elements to resonate with Egyptian consumers. The solution for it :
challenges and 1. Arabic Language Support: Ensure full Arabic language support as i can use (Vue i18n)
libraries because This tool allows me to define localization strings and switch between
opportunities languages easily.
2. Right-to-Left (RTL) Layout: Adapt the site's layout for RTL text, as I can use Use a CSS

in the framework that supports RTL

Egyptian 2. Logistics Optimization:

• Collaborating with reliable local logistics partners to ensure efficient and timely delivery,

online potentially offering same-day or next-day delivery options in key areas. The solution for it :
1. Research Local Logistics Providers: Identify and evaluate local logistics companies that
offer reliable services and can handle various delivery options, including same-day or
shopping next-day delivery in key areas.
2. Shipping API Integration: Integrate Spring Boot backend with the logistics partners'
landscape APIs. This would involve creating services that communicate with the logistics partners'
systems for shipping label creation, package tracking, and delivery notifications
 3. Customer Support:
• Providing multilingual customer support and clear communication channels to address
the needs and concerns of Egyptian shoppers effectively. The solution for it :
1. Multilingual Support: Offer customer service in Arabic and other languages

The identified spoken by your customer base to cater to all shoppers.

2. Omnichannel Support: Provide multiple support channels such as phone, email,
live chat, and social media, ensuring they are easily accessible from all devices.
challenges and 3. Chatbots: Integrate AI-powered chatbots that can handle basic inquiries in
multiple languages,
opportunities 4. Product Localization:

in the • Curating a product caconsideringtalog that includes items specifically appealing to

Egyptian consumers, local trends, traditions, and preferences. The solution for it :

Egyptian 1. Market Research: Conduct thorough market research to understand local

preferences, trends, and demand patterns.
2. Product Catalog Database Schema: Design my database to include fields for
online localized descriptions, categories, currencies, and any other locale-specific
attributes.
shopping 3. Internationalization Plugin: Use an internationalization plugin such as vue-i18n
to provide localized product information.

landscape 4. Customer Feedback: Use customer feedback to identify desired products and
gaps in your current product range
The identified
challenges and 5. User Experience Optimization:

opportunities • Crafting a seamless and intuitive user experience is challenging, with

concerns about responsiveness and page load times. The solution for it :

in the 1. Responsive Design: Ensure my Vue.js components are designed to be

responsive across all devices using CSS frameworks like BootstrapVue.

Egyptian 2. Lazy Loading: Implement lazy loading for Vue components and routes
to load resources as they are needed, reducing initial load times.

online
shopping
landscape
 How to develop the system :

• Planning and Requirements Gathering:

1. Thorough analysis of Online Shopping System requirements.
2. description of key features and functionalities needed for streamlined management.
• Technology Stack Selection:
1. Careful technology stack selection for a scalable, secure, and user-friendly system.
2. Spring-Boot Framework, Vue.js Framework, HTML, CSS, and MySQL were chosen to
ensure robust functionality user experience.
• System Architecture Design:
1. Creation of a comprehensive system architecture.
2. Definition of data models, relationships, and the overall structures.
 Development Technologies and Tools

Visual Studio Code (VS Code):VS Code is a highly customizable IDE with
features like IntelliSense and seamless Git integration, offering a
comprehensive environment for coding across multiple platforms,
boosting productivity and collaboration.

Spring Boot Framework: Spring Boot facilitates the creation of a flexible e-

commerce platform with inbuilt web server capabilities, microservices
support, and robust security features, ensuring a smooth and secure online
shopping experience.

Vue.js Framework: Vue.js, a progressive JavaScript framework, focuses on

creating dynamic user interfaces with its reactivity system and component-
based architecture, offering ease of use and adaptability for developing
responsive and interactive shopping websites.
Architectur
e Diagram
 •2023/11/30-2023/12/29: Proposal and opening defense preparation

•2024/1/1–2024/1/14: Final draft of the proposal.

• 2024/1/15– 2024/2/27. Finish my coding.

Arrangemen • 2024/3/1– 2024/5/4: Write the thesis paper

t Schedule • 2024/5/5– 2024/5/9: Submit all my documents.

• 2024/5/12– 2024/5/20:review my thesis and the opinions.

• 2024/5/31: Thesis Summary.

THANK YOU