Faculty of Engineering & Information Technology Computer Engineering Department Graduation Project – I (10636581) CloudMerchant Submitted By: Muath Saed Hamza Nayef Supervisors: Dr. Hanal Abuzant Dr. Amjad AbuHassan July 2024 Presented in partial fulfilment of the requirements for Bachelor degree in Computer Engineering I Dedication Firstly, Thank God for everything we have done in this project, we would dedicate this work to our parents. Whom gave us all things to reach this stage in our life, which with their supports we can stand here today, we will never finish to thank our parents for all the opportunities that they have offer, for all the teachings that they have told us and for every advice that come out of their mouth. We hope that we can make you proud as we proud of you. To our brothers, teachers, doctors special our supervisors and our colleges we dedicate this research. II Acknowledgement We would like to express our deepest gratitude to our supervisors, Dr. Hanal Abuzant and Dr. Amjad AbuHassan, for their invaluable guidance, support, and mentorship throughout the duration of this project. Their insights and feedback have been instrumental in shaping the direction and quality of this work. We would also like to thank to all members of the teaching staff at the Department of Computer Engineering for their support, which has greatly contributed to the successful completion of this project. We are indebted to our families and friends for their unwavering encouragement and understanding during this journey. III Disclaimer Statement This project was done by Muath Saed and Hamza Nayef at the Computer Engineering Department, Faculty of Engineering, An-Najah National University. It has not been altered or corrected, other than editorial corrections. As a result of the assessment, it may contain language as well as content errors. The views expressed in it together with any outcomes and recommendations are solely those of the students. An-Najah National University accepts no responsibility or liability for the consequences of this report when being used for a purpose other than the purpose for which it was commissioned. IV Abstract The CloudMerchant is an innovative e-commerce platform designed to revolutionize the online shopping experience by seamlessly integrating local merchants into a vast digital ecosystem. This platform aims to enhance online shopping while fostering collaboration with local businesses, thus promoting community growth and economic sustainability. Through a user-friendly mobile app, customers can explore an extensive range of products from both global brands and neighborhood merchants, creating a customized shopping journey tailored to individual preferences. The project now includes the following enhanced key elements: user registration and authentication, user roles, shopping cart, payment methods, delivery and shipment tracking, user profile, chat, and notifications. CloudMerchant prioritizes inclusivity and diversity by providing a platform where local merchants can showcase their unique offerings alongside established retailers, thereby enriching the marketplace with a vibrant tapestry of goods. By empowering local businesses to reach a wider audience and connecting shoppers with authentic, community-driven products, CloudMerchant redefines the boundaries of traditional e-commerce, forging stronger connections between consumers and their local communities. V Table of Contents Dedication ...................................................................................................................................... I Acknowledgement ...................................................................................................................... II Disclaimer Statement ................................................................................................................ III Abstract ................................................................................................................................... IV Table of Figures ...................................................................................................................... VI Chapter One: Introduction .................................................................................................... 1 1.1 Motivation .................................................................................................................... 1 1.2 Objectives .................................................................................................................... 1 1.3 Scope of the Work ..................................................................................................... 1 1.4 Organization of the Report ...................................................................................... 1 Chapter Two: Constraints, Standards and Earlier Coursework ................................... 2 2.1 Constraints Limitations ............................................................................................. 2 2.2 Standards ................................................................................................................. 2 2.3 Earlier Coursework ................................................................................................ 2 Chapter Three: Literature Review ....................................................................................... 2 Chapter Four: Methodology ................................................................................................. 3 4.1 Tools, Methods and Programming Language ..................................................... 3 4.2 System Features Implementation (Mobile Application) ............................... 5 4.3 System Features Implementation (Web) ...................................................... 28 Chapter Five: Results and Discussion .............................................................................. 32 Chapter Six: Conclusion ...................................................................................................... 32 6.1 Summary ................................................................................................................... 32 6.2 Future Work .......................................................................................................... 32 References ............................................................................................................................. 33 VI Table of Figures Figure 1: Sign in Screen ............................................................................................................... 5 Figure 2: Sign Up Screen (Buyer) ............................................................................................. 6 Figure 3: Sign Up Screen (Seller) .............................................................................................. 7 Figure 4: Sign Up Screen (Driver) ............................................................................................ 8 Figure 5: Email Verification........................................................................................................ 9 Figure 6: Email verification success message ...................................................................... 9 Figure 7: Reset Password Screen .......................................................................................... 10 Figure 8: Reset Password Mail ................................................................................................ 10 Figure 9: Reset Password Page ............................................................................................... 11 Figure 10: Reset password success message ..................................................................... 11 Figure 11: Home Screen (Buyer) ............................................................................................. 12 Figure 12: Profile Screen ........................................................................................................... 13 Figure 13: Product Details Screen .......................................................................................... 14 Figure 14: Shopping Cart Screen ........................................................................................... 15 Figure 15: Checkout Screen with Stripe Payment ............................................................. 16 Figure 16: Successful Payment Message ............................................................................. 17 Figure 17: Order History Screen with an Order Details .................................................... 18 Figure 18: Add New Product Screen ..................................................................................... 19 Figure 19: Edit Product ............................................................................................................ 20 Figure 20: Pending Orders Screen ........................................................................................ 21 Figure 21: Real-time driver's location in Firebase ............................................................. 22 Figure 22: Out to Delivery Status Notification .................................................................. 23 Figure 23: Driver Tracking....................................................................................................... 24 Figure 24: Delivered Status Notification ............................................................................. 25 Figure 25: Messages on the Seller's Phone ........................................................................ 26 Figure 26: A Notification and Messages on the Customer's Phone ............................ 27 Figure 27: Sign In Page ............................................................................................................ 28 Figure 28: Admin Dashboard Page ....................................................................................... 29 Figure 29: Approval Requests Page ..................................................................................... 30 Figure 30: User Management Page ...................................................................................... 30 Figure 31: Products Page ......................................................................................................... 31 Figure 32: Order Management Page .................................................................................... 31 1 Chapter One: Introduction 1.1 Motivation The motivation behind CloudMerchant stems from the need to bridge the gap between global e-commerce platforms and local merchants. In a world where online shopping is dominated by large corporations, many small businesses struggle to gain visibility and compete. CloudMerchant aims to level the playing field by integrating local merchants into a robust digital platform, promoting economic growth within communities, and providing consumers with a diverse range of products. 1.2 Objectives The primary objectives of this project include: • Integrate local merchants into a comprehensive e-commerce platform. • Provide a user-friendly interface for both web and mobile applications. • Enhance the online shopping experience with personalized features. • Promote community growth and economic sustainability. 1.3 Scope of the Work The scope of the project includes the development of a mobile platform that incorporates user registration, user roles, shopping cart functionality, multiple payment methods, delivery options with real-time tracking, user profiles, chat functionality, and notification systems. The project also focuses on the inclusion of local merchants and the promotion of their products alongside global brands. 1.4 Organization of the Report This report is organized into several sections, starting with the introduction and motivation behind the project. It then covers the constraints, standards, and earlier coursework that influenced the project. The literature review provides context and background information. The methodology section details the tools, methods, and programming languages used, as well as the implementation of system features for both the mobile application and the website. The results and discussion section evaluates the outcomes of the project, and the conclusion summarizes the work and outlines potential future developments. 2 Chapter Two: Constraints, Standards and Earlier Coursework 2.1 Constraints Limitations • Technical Constraints: Limited by the availability and compatibility of development tools and technologies. • Budget Constraints: Funding limitations affecting the scope of features and functionalities. • Time Constraints: Deadlines impacting the depth of development and testing phases. 2.2 Standards • Web Standards: Compliance with W3C standards for web development. • Security Standards: Adherence to industry best practices for data security and user privacy. 2.3 Earlier Coursework • Web Development: Previous courses on web development provided foundational knowledge for building the CloudMerchant platform. • Database Management: Coursework in database management helped in designing and implementing the database structure for the project. • Web Standards: Compliance with W3C standards for web development. • Mobile Application Development: Previous experience in mobile app development was crucial for creating the CloudMerchant mobile application. Chapter Three: Literature Review The literature review encompasses a study of existing e-commerce platforms, their integration with local merchants, and the impact on community growth. It includes an analysis of user experience design, payment systems, delivery tracking technologies, and real-time communication tools. The review also covers the importance of inclusivity and diversity in digital marketplaces, highlighting the benefits of promoting local businesses within a global e-commerce framework. 3 Chapter Four: Methodology 4.1 Tools, Methods and Programming Language 4.1.1 Programming Language • Frontend: JavaScript, React Native for mobile applications, and React for the web interface. • Backend: Node.js and Express.js for server-side development. • Database: MongoDB for data storage and retrieval. 4.1.2 Tools • Development Tools: Visual Studio Code as the primary code editor for development. • Backend and Infrastructure: o Google Cloud: Hosting environment for the backend server. o Firebase: Powers the push notification system and enables real-time data synchronization and location tracking. o Stripe: Secure platform for processing online payments. o Cloudinary: Service for image upload, storage, optimization, and delivery. o Stripe: Secure platform for processing online payments. • Collaboration and Testing: o Google Cloud: For comprehensive API testing throughout the development lifecycle. 4.1.3 Database • MongoDB: A NoSQL database chosen for its flexibility and scalability, suitable for handling diverse product listings and user information. 4 4.1.4 Database Collections 4.1.4.1 AuthVerificationTokens The AuthVerificationTokens collection stores tokens used for user authentication verification. This collection is crucial for ensuring secure user registration and login processes. 4.1.4.2 Carts The Carts collection holds information about the items that users have added to their shopping carts. This collection is essential for managing the shopping cart functionality of the platform. 4.1.4.3 PasswordResetTokens The PasswordResetTokens collection manages tokens used for password reset functionality. This collection ensures secure and efficient password recovery for users. 4.1.4.4 AuthVerificationTokens The AuthVerificationTokens collection stores tokens used for user authentication verification. This collection is crucial for ensuring secure user registration and login processes. 4.1.4.5 Products The Products collection stores detailed information about the products available on the platform. This collection is essential for product management and inventory control. 4.1.4.6 Users The Users collection contains comprehensive information about the users registered on the platform. This collection is fundamental for user management and role-based access control. 5 4.2 System Features Implementation (Mobile Application) 4.2.1 User Authentication Implemented using JSON Web Tokens (JWT) for secure and seamless user management. This ensures that user sessions are securely maintained, and authentication is efficiently handled. Figure 1: Sign in Screen 6 4.2.2 Buyer Sign Up The buyer sign-up process involves collecting basic information such as name, email, password, address and location on the map. The sign-up form is designed to be user-friendly, with validation checks to ensure data integrity. Figure 2: Sign Up Screen (Buyer) 7 4.2.3 Seller Sign Up Seller sign-up includes additional fields such as a brief description of the products offered. Sellers are also required to upload a sample image of the products for authenticity. This information is verified before the account is activated. Figure 3: Sign Up Screen (Seller) 8 4.2.4 Driver Sign Up Driver sign-up involves collecting information such as name, email, password, and an image of the driver’s license. This information is verified before the account is activated. Figure 4: Sign Up Screen (Driver) 9 4.2.5 Account Verification Account verification is done through email, where a verification link is sent to the user. Upon clicking the link, the account is verified and activated. Figure 5: Email Verification Figure 6: Email verification success message 10 4.2.6 Reset Password The reset password feature allows users to reset their passwords via a secure link sent to their registered email address. This ensures that users can recover their accounts in case they forget their passwords. Figure 7: Reset Password Screen Figure 8: Reset Password Mail 11 Figure 9: Reset Password Page Figure 10: Reset password success message 12 4.2.7 Home Screen (Buyer) The home screen for buyers displays featured products. It also includes categories for quick access to different product types. Figure 11: Home Screen (Buyer) 13 4.2.8 Profile Screen (Buyer) The buyer's profile screen allows users to view messages, view and update their personal information, manage their addresses, and view their order history. It serves as a central hub for managing the buyer’s account. Figure 12: Profile Screen 14 4.2.9 Select a Product and Add to Cart (Buyer) Buyers can select products from the listings, view detailed descriptions, and add desired items to their shopping cart. The process is intuitive and allows for easy modifications to the cart. Figure 13: Product Details Screen 15 4.2.10 Shopping Cart (Buyer) The shopping cart feature enables buyers to review their selected items, adjust quantities, remove items, and proceed to checkout. The cart provides a summary of the total cost. Figure 14: Shopping Cart Screen 16 4.2.11 Checkout (Buyer) During checkout, buyers can choose their preferred payment method, and review their order before placing it. The checkout process is streamlined for efficiency and ease of use. Figure 15: Checkout Screen with Stripe Payment 17 Figure 16: Successful Payment Message 18 4.2.12 Order History (Buyer) Buyers can view and manage their past orders, including tracking shipments in real- time. The order history screen provides details on each order, including status updates and delivery information. Figure 17: Order History Screen with an Order Details 19 4.2.13 Add New Product Screen (Seller) Sellers can add new products by providing product details such as name, description, price, and images. The interface is designed to be straightforward, allowing for quick and easy product listings. Figure 18: Add New Product Screen 20 4.2.14 Edit Product (Seller) Sellers can edit existing product listings to update information such as price, description, and availability. This feature ensures that product information is always accurate and up-to-date. Figure 19: Edit Product 21 4.2.15 View Pending Orders (Driver) Drivers can view pending orders assigned to them, including pickup and delivery details. The interface provides real-time updates on order status, ensuring efficient delivery management. Figure 20: Pending Orders Screen 22 4.2.15.1 Real-Time Tracking Real-time tracking is a crucial feature for both drivers and customers within the CloudMerchant platform. This functionality leverages GPS and other tracking technologies to provide accurate and timely updates on the location of delivery drivers. • Implementation: o GPS Integration: The mobile application integrates with the device's GPS to continuously track the driver's location. o Location Updates: The driver's location is updated at regular intervals and sent to the server, which then updates the customer's view. o Firebase Integration: Firebase is used to store and synchronize the real-time coordinates of the drivers. This ensures that the location data is updated instantly across all devices. o Map Display: Customers can view the real-time location of their orders on a map interface within the app, providing transparency and reducing anxiety about delivery times. o Status Updates: Both drivers and customers receive real-time notifications about the status of the delivery, such as "Out for Delivery," and "Delivered." Figure 21: Real-time driver's location in Firebase 23 When the status changed to "Out to Delivery", the customer will receive a push notification. Figure 22: Out to Delivery Status Notification 24 Then "Track Order" button will be enabled and the customer can track the shipment. The blue marker indicating the driver's real-time location and the green marker indicating the destination. Figure 23: Driver Tracking 25 When the driver changes the status to "Delivered", the customer will receive a push notification. Figure 24: Delivered Status Notification 26 4.2.16 Chatting (Between Buyer and Seller) Real-time chat functionality allows buyers and sellers to communicate directly. This feature facilitates coordination, answers queries, and enhances the overall shopping experience. 4.2.16.1 The Seller received a message from a customer Figure 25: Messages on the Seller's Phone 27 4.2.16.2 The customer received a response from the seller Figure 26: A Notification and Messages on the Customer's Phone 28 4.3 System Features Implementation (Web) 4.3.1 Sign In Screen Figure 27: Sign In Page 4.3.2 Admin Dashboard The admin dashboard provides a snapshot of key metrics and data points, including the total number of users, products, orders, and total revenue. This overview is designed to give administrators a quick and clear understanding of the platform's current status and performance. • Total Users: Displays the total number of registered users on the platform. • Total Products: Shows the total number of products available on the platform. • Total Orders: Indicates the total number of orders placed through the platform. • Total Revenue: Summarizes the total revenue generated from all orders. 29 Figure 28: Admin Dashboard Page 4.3.3 Approval Requests The approval requests section allows administrators to manage and approve new user registrations, particularly for sellers and drivers who need additional verification before gaining full access to the platform. This section includes the following features: • User Details: Displays the name, email, role, description, and image of users who have requested approval. • Actions: Provides options for administrators to approve or reject the registration requests. 30 Figure 29: Approval Requests Page 4.3.4 User Management Figure 30: User Management Page 31 4.3.5 Products Figure 31: Products Page 4.3.6 Order Management Figure 32: Order Management Page 32 Chapter Five: Results and Discussion The development of CloudMerchant has resulted in a robust and user-friendly platform that integrates local merchants into the e-commerce ecosystem. The platform has successfully enhanced the online shopping experience by providing a diverse range of products and fostering community growth. The real-time tracking and chat functionalities have improved customer satisfaction by ensuring transparency and facilitating communication. The inclusion of multiple payment methods has catered to different user preferences, and the admin dashboard has streamlined management processes. Chapter Six: Conclusion 6.1 Summary CloudMerchant has achieved its objective of revolutionizing e-commerce by integrating local merchants into a digital platform. The project has provided a personalized and secure shopping experience, promoted economic sustainability, and strengthened connections between consumers and their local communities. 6.2 Future Work Future developments could include expanding the range of supported payment methods, enhancing AI-driven product recommendations, and further optimizing the platform for performance and scalability. Additionally, incorporating more advanced analytics and reporting tools could provide valuable insights for merchants and administrators. 33 References 1. Firebase Documentation. (n.d.). Retrieved May 2024, from Google: https://firebase.google.com/docs 2. Introduction · React Native. (n.d.). Retrieved May 2024, from React Native RSS: https://reactnative.dev/docs/getting-started 3. MongoDB Documentation. (n.d.). Retrieved May 2024, from MongoDB: https://www.mongodb.com/docs/ 4. Node.js V22.5.1 Documentation. (n.d.). Retrieved May 2024, from Node.js: https://nodejs.org/docs/latest-v20.x/api/index.html 5. Quick start. (n.d.). Retrieved May 2024, from React: https://react.dev/learn 6. The starting point for learning TypeScript. (n.d.). Retrieved May 2024, from TypeScript: https://www.typescriptlang.org/docs/ Blank Page