An Najah National University Faculty of Engineering & Information Technology Department of Computer Engineering StudentTechShop Done By: 1- Adam Yaesh 2- Laith Alayyan Supervisor: Dr.Asmaa Afeefi January 26, 2025 1 Acknowledgements “First of all, we would like to thank our su- pervisor, Dr.Asmaa Afeefi, for his consis- tent efforts throughout the semester, and for being completely prepared to assist us with scien- tific support. We thank our friends and family. Those who gave us their undivided attention and believed in our ability.” 2 Disclaimer Adam Yaesh and Laith Alayyan have writ- ten this report as requirements for a Bache- lor’s degree in Computer Engineering Depart- ment. No one modifies or corrects it because it will be evaluated by professors at An Najah National University. It is worth mentioning that An-Najah National University does not have any responsibility for any word in this report. 3 1 Abstract As computer engineering students, we focused on hardware projects and realized that students often struggle to purchase the necessary components for their projects.To address this issue, we came up with the idea of creating a platform to make it easier for students to buy and sell parts, and we unified these processes on our website to simplify the experience. Our project allows users to buy and sell hardware components directly from other students. The project features a display of previous student projects, allowing users to explore similar ideas. It also provides a chat feature to sort out details and seek advice from previous students. To enhance the user experience, our platform also allows users to review any item they purchase, and these reviews are visible to other users. Additionally, we have integrated a chatbot that users can interact with to ask and answer questions about specific com- ponents. When a purchase is made, the seller receives a notification letting them know that someone is interested in purchasing their product. Likewise, the buyer is notified that the purchase is in the works. This idea is unique and has not been implemented before, although there may be similar concepts on commercial sites. However, our platform is designed specifically for students and focuses on help- ing them buy and sell components related to the project. 4 Contents 1 Abstract 4 2 Introduction 6 2.1 General background . . . . . . . . . . . . 6 2.2 Objectives . . . . . . . . . . . . . . . . . 7 2.3 Scope of the work . . . . . . . . . . . . . 7 2.4 Significance . . . . . . . . . . . . . . . . . 8 3 Theoretical Background and Previous Work 9 3.1 Theoretical Background of the project . . 9 3.2 Previous similar works . . . . . . . . . . . 9 4 Methodology 10 4.1 Constraints and Earlier Coursework . . . . 10 4.2 Used Technologies . . . . . . . . . . . . . 13 4.3 StudentTechShop as a Website & Mobile Application . . . . . . . . . . 17 5 Results & Discussion 48 6 Conclusion & Future Work 49 5 2 Introduction When students seek to start their own hardware projects, they often face challenges in obtaining the required com- ponents or identifying the parts they need. These issues are common in our field, computer engineering, where students seek to obtain parts at affordable prices and profit from them after completing their projects by sell- ing the components they no longer need. To address these challenges, we developed a website and mobile ap- plication that served as a solution to simplify the process of purchasing and selling hardware components for stu- dents. The goal was to provide a convenient online solu- tion that allowed students to search for, view, and pur- chase products, list unwanted parts for sale, and benefit from viewing past projects. This report details the devel- opment and features of the platform, which enables stu- dents to find, buy, and sell project-related components, and display items which the student interested in and direct communication features to enhance collaboration and chatbot to answer student’s questions. 2.1 General background Students working on hardware projects face difficulties in obtaining components and making use of unused parts 6 after completing the project. Although there are general e-commerce sites, there are no sites dedicated to the needs of students to buy and sell hardware components for the project. That is why we created StudentTechShop to help students easily find the parts they need and resell the items they no longer need. 2.2 Objectives In StudentTechShop the student can see all the products offered by the students in a way that enables them to give advice to each other and the student can buy any product or publish a product that he wants to sell. It also enables the students to benefit from the previous projects that were displayed on the site. 2.3 Scope of the work 1. Account Creation: Each user can register and create his own account. 2. Search Feature: Users can search for any product they want and open it. 3. Search Filters: Users can search for any product by product description as well. 7 4. Product View: Users can see the description of prod- ucts or previous projects and their images as well. 5. Project View: Users can see all previous projects and their images as well. 6. Product Purchase: Users can buy any product they want. 7. Review: Users can review the product they have pur- chased by commenting and rating it. 8. Messages: Users can send a message to another user about any information they want. 9. Chatbot Assistance: Provides answers to questions about component usage and connections. 10. Notifications: Users can see everything that is pub- lished, whether new products or new projects. 2.4 Significance Students who want to purchase or post hardware prod- ucts online can use (StudentTechShop) to do it all. 8 3 Theoretical Background and Previous Work 3.1 Theoretical Background of the project It is an application and a website that does not support a profitable institution, but rather aims to help students and facilitate them. Through it, the student can see all the pieces offered for sale, and he can display the pieces he wants for sale. He can also view the projects to benefit from them and have a broader background about projects in general. 3.2 Previous similar works The project idea was not new, but many features were added that make it popular with students. It does not support a for-profit institution that sells electronic prod- ucts, which makes this online store a suitable environ- ment to gain the trust of students and encourage them to use it and buy and display electronic products for sale on it. There are similar applications, including Shein and Alibaba, but they do not specialize in electronic products in particular, and the StudentTechShop website has no competitor, because it is not specific to a specific institu- tion. 9 4 Methodology 4.1 Constraints and Earlier Coursework 1. Economy Budget Limitations Developing and maintaining a comprehensive website and mobile application required a substantial budget. Costs include initial development, server hosting, learning the languages and ongoing maintenance. Maintenance Costs Regular updates, bug fixes, and student support are essen- tial, adding to the overall cost of the project. 2. Environment Power Consumption The platform is optimized for energy efficiency to minimize power consumption during its operation, both on servers and user devices. Electromagnetic Radiation Issues The platform’s usage does not significantly contribute to electromagnetic pollution. Environmentally Friendly Power Sources: Whenever possible, using servers powered by renewable en- ergy sources to host the platform. 10 3. Society Information Security Good security measures implemented to protect user data from unauthorized access and breaches. Privacy User data privacy is absolutely maintained, adhering to data protection laws and regulations. 4. Politics Promoting Equality The platform is designed to be inclusive, promoting gender and racial equality in both the user base and the content. National Security The platform complies with national regulations and poses no security risks. Resolving common issues Access to essential goods as users can easily view products without going to a specific store. 5. Ethics Safety and Health Issues Our website and Mobile application are safe to use and do not pose health risks, such as minimizing screen time to 11 avoid eye strain. 6. Health and Safety The platform’s use does not compromise public safety, such as during product deliver-ies. 7. Sustainability Our website and Mobile application are designed to be scal- able and easily upgradable to incorporate new features and improvements. 12 4.2 Used Technologies 1. ASP.Net ASP.net is a framework designed for building web ap- plications using the .NET platform, primarily lever- aging languages like C#. It was developed by Mi- crosoft and first released in 2002. ASP.net provides a robust environment for creating dynamic, data- driven web applications and services. Traditionally, web development involved static HTML and server- side technologies like classic ASP or PHP to handle dynamic content. With the advent of ASP.net, de- velopers gained a more structured and efficient way to build server-side applications. Why ASP.Net? 1. Asynchronous and Event-Driven: All APIs of the Asp.net library are asynchronous, that is, non- blocking. This means that a server based on Asp.net never waits for the API to return data. All improve- ments and bug fixes are quicker and released on a regular interval so that you do not have to wait for ages to harness the latest developments. 13 Flexibility of Open-Source framework is another rea- son why ASP.NET Core is a preferred choice for de- velopers. 2. ASP.NET, built on the .NET runtime, is highly optimized for performance, leveraging features like JIT compilation,and asynchronous programming to deliver fast and scalable web applications. 3. Asp.net uses a single-threaded model with iter- ating events. The event mechanism helps the server to respond in a non-blocking manner and makes the server highly scalable, unlike traditional servers that create limited threads to handle requests. Asp.net uses a single-threaded program and the same pro- gram can serve more requests than traditional servers such as Apache HTTP Server. 2. SQL Server It is SQL under the name SQL Server, a relational database management system where data is orga- nized into tables with defined relationships. It uses Structured Query Language (SQL) to manage and query data, making it one of the most widely used systems for relational databases. 14 Why SQL Server? Cloud-Based Developer Platform: SQL Server pro- vides a full cloud-based data platform for developers through Azure SQL Database for seamless data man- agement. Flexible document schemes: It offers flexible schemas for storing data, allowing for easy modifications. Widely Supported Tools: It integrates with various tools like SQL Server Management Studio (SSMS) for easy data handling. Change-friendly design: Its design accommodates changes and updates efficiently. Simple installation: SQL Server is easy to install and set up. Comprehensive Support: Microsoft offers full tech- nical support and documentation. 3. Visual Studio Also commonly referred to as VS made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelli- gent code completion, snippets, code refactoring, and embedded Git.[vs] 15 4. Postman Is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs— faster.[Postman] 5. GitHub Is an Internet hosting service for software develop- ment and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task man- agement, continuous integration, and wikis for every project. [github] 6. JWT (JSON Web Token) Is an open standard for exchanging security informa- tion between a client and a server, and is commonly used for user login authentication. [jwt] 16 4.3 StudentTechShop as a Website & Mobile Application When you enter the application, this interface is dis- played. Figure 1: Welcome Page. 17 1. Authentication and Validation Because StudentTechShop is regarded as a middleman between the students, each user must register on the plat- form in order to identify himself and have access to all of its features. The user needs to register his name, email, password. Figure 2: Login Page. 18 (a) Sign Up Form. (b) Login page. Signup In order to login to the website, you have to enter your first name, last name, username, valid phone number, valid email address and a valid password 19 Sign up Validation After signing up if the user tries to sign up with the same email again the system will alert him also. login To log in to the website, you must provide certain in- formation such as your email and password that you have already registered with them. Login Validation When a user attempts to login, the back-end validates the credentials; if they are invalid, the user is alerted, and if he attempts to log in using an non existing email address, he is also notified. 20 Forget password When a user wants to login and click on a forgotten password he will identify his email again to send the new password on the email, this is done by using Email.JS. As seen in Figure 4. Figure 4: Forget Paswword. 21 2. User Profile Each registered user has his own profile where he can see his wish list, his orders and purchases and can also add his number and update his personal information. Figure 5: Profile Page. 22 Edit Profile (a) User information. (b) Updating user information. The user can see his wish list, his request list and view the information of each request through his profile page. 23 (a) Orders list. (b) Order’s information. (c) WishList. (d) User order information. (e) Updating user order informa- tion. 24 3. Home page This is the home page that displays the site sections (items and their types, projects) and displays other fea- tures as shown in the navigation bar. This page also includes a box to display the user’s favorite products, where he is shown the products he is interested in or has previously purchased a similar product. (Recommendation System) (a) Home Page. (b) Home page2. 25 4. Items Page The user can see all the old and new items with the types and subtypes of items to make it easier for the user to find what he wants. Figure 9: Items Page. 26 Categories and SubCategories (a) All Categories. (b) Items and Subcategories of a spe- cific category. 27 (a) Category Item1. (b) Category Item2. 28 The user can also sorting the products to see them by price from highest to lowest or by the date they were added from most recent to oldest. Figure 12: Sort Items. 29 When the user clicks on the item, all the details of the item appear (price, explanation, number of times used, and the status of the item, whether it is available or not), and the user can add it to his card or to his wish list. (a) Item1. (b) Item2. 30 When you scroll down the product page: Figure 14: Item. From here, the user can communicate and talk to the product owner, and see the connection of this item with another item of the user’s choice. He can also evaluate this product and add a comment on it for the benefit of other users. 31 As shown in the following pictures: Chatting Page Figure 15: chatting with the item’s owner. 32 The user can see how the electronic piece is connected to another piece he wants, and this process is done using AI. (a) Select Board. (b) Show Connection. 33 Review Page The user can see previous comments and ratings for this product and can also add his own rating and com- ment for this product. (a) See Reviews. (b) Add Review. 34 Project Page The user can view the projects published on the site, see the components used for each project, and see other details of the project to benefit from them as much as possible. (a) All Projects Page. (b) Project details Page. 35 In addition, there are types of projects to facilitate the search process for the user. (a) Project Categories. (b) Project Category. 36 Add Item and Project The user can add and display his own product for sale and can also publish projects on the site. Figure 20: Add Item or Project. 37 Add Item When the user adds a new item, he must specify all the details of the item in addition to specifying the item’s category and uploading the item’s image. Figure 21: Add Item. 38 Add Project When the user publishes a new project, he must enter all the information and details of the project, specify the category of the project, upload a picture or group of pic- tures of the project, and then add the items used in the project with their details. (a) Add Project. (b) Add Item to project. 39 Cart Page From this page, the user can see the items he has added to his purchase card and can delete or modify them. Figure 23: Cart Page. If the user confirms the order, he will be transferred to the next page to complete the purchase process. 40 Purchase Page (a) Confirms the order. (b) Purchase successful. 41 Notifications Page When the user makes a purchase and receives the item, he can register that the purchase has been received, and then a notification will be sent to the owner of the item stating that the purchase has been received by the buyer. Figure 25: Notifications Page. 42 Chatting Page The user can communicate with another user and the owner of any piece or project through the chat page. (a) Chat Page. (b) Chatting. 43 ChatBot Page The user can also talk to a chatbot to answer any question he wants, as is the case with ChatGPT. Figure 27: ChatBot Page. 44 5. Admin Pages This interface appears to the administrator only when he enters the application as an admin, and a business page is created for him to manage the online store. (a) Admin Page for items. (b) Admin Page for projects. 45 The admin can add any new item or project and mod- ify any item or project in the store. As shown in the following pictures: (a) Add Item. (b) Edit Item. 46 (a) Add Project. (b) Edit Project. 47 5 Results & Discussion Result StudentTechShop is a platform with a website and a mobile app that allows users to perform the following: 1. Users can have his own profile page and edit his in- formation. 2. Users can see all new products. 3. The user can display the items he wants to sell for sale. 4. Users can review and buy any product. 5. Users can send a message to the owner of the item, inquire about any product, and have conversations with anyone. 6. The user can add, delete and update any product or project he has published, and the administrator can modify any product or project that he sees needs modification. 48 Discussion StudentTechShop most likely supplied the following: Providing an easy-to-use platform regardless of their tech- nical knowledge so that they can easily register and pub- lish on the site. 6 Conclusion & Future Work Conclusion The StudentTechShop online store offers various ser- vices to users. It provides a feature for the user to pub- lish the pieces he wants to sell so that other students can benefit from them and buy them at a good price. It also allows the user to display previous projects so that other students can benefit from them, and the ability to com- municate with students to enhance cooperation between them and communicate with the supervisor for various inquiries regarding the site, and the ability to talk to the chatbot to answer questions related to the pieces. The store is also easy to use. 49 Future Work There are several areas where StudentTechShop could improve, including: 1. Agree with a specific company to provide products in good quantities and prices for students and display them on the website. 2. Adding delivery service in agreement with the deliv- ery company. 3. Adding payment service using Visa card. 50