TURN-EXTRAS-INTO-ESSENTIALSBachelor in Computer Science Batch: 2014-2018Submitted ByMuhammad Aamir Hameed (28127)Muhammad Danish Zeeshan (27254)Supervised BySophia AjazSignature…………….Coordinated ByDr. Mansoor EbrahimSignature…………….
.. Faculty of Engineering, Sciences and TechnologyIQRA University, KarachiABSTRACTSeller who is desiring to earn money by selling clothes can sell their new or old clothes. Any buyer who is seeking clothes if affordable price can buy available products.
Seller and buyer can rate each other. Buyer or deserving entity will contact to the seller through a chat box available on web app. Advance filters are there to elevate your search, to make it quick to reach on your desired items. People who are willing to serve mankind can donate clothes through this platform.
Deserving entities will be benefited, they can get clothes after satisfying the seller/donor through chat box or contact details. User can manage his profile at any time including changing password or adding contact details.ACKNOWLEDGEMENTAs being a Muslim, we know that even a leaf cannot be move without Allah’s order thus we would not have completed our project without seeking for help form the Almighty Allah. Our supervisor Sophia Ajaz has gone out of her ways by not only supervising us but also giving us this idea of our FYP and always have been stood to our side till the completion of project, nothing would have been possible without her gracious efforts for us. In the last, we don’t have words to describe the gravity of how much we are thankful to Mansoor Ebrahim who has been the most responsible coordinator throughout our FYP.SUMMARY As our name implies our website provides a platform to any seller and buyer who wants to be benefitted through buying or selling clothes. Similarly, it is also a platform for potential donors who are willing to make a difference in this world through their good deeds.
For every seller there is vast range of options available on our website making, more feasible for him to sell clothes like there is a private chat box from which he can interact with the concerned party to make a step forward for closing a deal in the agreement of both parties.The seller can also share his experience of dealing with the buyer by using the option of rating the buyer’s profile.On other hand the buyer who is looking for the product of his desire can easily get what he wants by using our filtered search option. For price negotiations and other queries, relating the product the buyer can also exchange his thoughts with the seller by using chat box.After successful transaction the buyer also have a right to rate his concerned seller by rate them.Every user can also manage his profile according to his will for making it to look more of their respective identity.
LIST OF ACRONYMS AND ABBREVIATIONSTABLE OF CONTENT TOC o “1-6” h z u ABSTRACT PAGEREF _Toc523503650 h 2ACKNOWLEDGEMENT PAGEREF _Toc523503651 h 3LIST OF ACRONYMS AND ABBREVIATIONS PAGEREF _Toc523503652 h 5TABLE OF CONTENT PAGEREF _Toc523503653 h 6INTRODUCTION PAGEREF _Toc523503654 h 91.1.OBJECTIVE PAGEREF _Toc523503655 h 91.2.RELEVANCE OF DOMAINS PAGEREF _Toc523503656 h 101.
2.1.Firebase PAGEREF _Toc523503657 h 101.2.1.1.Database PAGEREF _Toc523503658 h 101.2.
1.2.Storage PAGEREF _Toc523503659 h 101.2.2.
Development PAGEREF _Toc523503660 h 101.2.2.1.JavaScript PAGEREF _Toc523503661 h 101.
2.2.2.
Node.js PAGEREF _Toc523503662 h 101.2.
2.3.Npm PAGEREF _Toc523503663 h 111.2.3.
1.React PAGEREF _Toc523503664 h 111.2.3.2.
React Semantic UI PAGEREF _Toc523503665 h 112.PROFESSIONAL CONSIDERATIONS PAGEREF _Toc523503666 h 112.1.Public Interest PAGEREF _Toc523503667 h 112.2.Duty to Relevant Authority PAGEREF _Toc523503668 h 113.
REQUIREMENTS ANALYSIS PAGEREF _Toc523503669 h 123.1.Existing Solutions PAGEREF _Toc523503670 h 123.2.Uniqueness PAGEREF _Toc523503671 h 124.PROJECT PLAN PAGEREF _Toc523503672 h 124.1.
Phases PAGEREF _Toc523503673 h 124.1.1.Product Backlog PAGEREF _Toc523503674 h 124.1.2.
Sprint Planning PAGEREF _Toc523503675 h 124.1.3.Scrum Meeting PAGEREF _Toc523503676 h 134.1.
4.Testing and Product Demonstration PAGEREF _Toc523503677 h 134.1.
5.Retrospective and Next Sprint Planning PAGEREF _Toc523503678 h 134.2.
Gantt chart PAGEREF _Toc523503679 h 154.3.Project Expectations PAGEREF _Toc523503680 h 164.
3.1.Primary Objectives PAGEREF _Toc523503681 h 164.
3.2.Extension Objectives PAGEREF _Toc523503682 h 165.DESIGN AND DEVELOPMENT PAGEREF _Toc523503683 h 175.1.Use Case PAGEREF _Toc523503684 h 175.
1.1.Use Case Diagram PAGEREF _Toc523503685 h 175.1.2.Narratives PAGEREF _Toc523503686 h 185.
1.2.1.
Manage PAGEREF _Toc523503687 h 185.1.2.2.Visit Site PAGEREF _Toc523503688 h 195.1.2.4.
Login PAGEREF _Toc523503689 h 215.1.2.5.Sell PAGEREF _Toc523503690 h 225.
1.2.6.Buy PAGEREF _Toc523503691 h 235.1.2.7.Donate PAGEREF _Toc523503692 h 245.
1.2.8.Acquire PAGEREF _Toc523503693 h 255.1.2.
9.Rate PAGEREF _Toc523503694 h 265.1.2.10.Chat PAGEREF _Toc523503695 h 275.1.
2.11.Delete PAGEREF _Toc523503696 h 285.1.
2.12.Edit PAGEREF _Toc523503697 h 295.1.
2.13.Search PAGEREF _Toc523503698 h 305.2.Initial Design PAGEREF _Toc523503699 h 315.2.1.
Initial Application Data Flow Diagrams PAGEREF _Toc523503700 h 315.2.2.Initial Application Interface Designs PAGEREF _Toc523503701 h 325.3.Design PAGEREF _Toc523503702 h 325.3.
1.Branding PAGEREF _Toc523503703 h 325.3.1.1.Color Scheme PAGEREF _Toc523503704 h 325.3.
1.2.Icon PAGEREF _Toc523503705 h 335.3.
2.UX Design PAGEREF _Toc523503706 h 345.3.2.
1.Initial Homepage PAGEREF _Toc523503707 h 345.3.2.2.Login Popup PAGEREF _Toc523503708 h 345.3.2.
3.Sign Up Popup PAGEREF _Toc523503709 h 355.3.2.
4.Successfully Sign in PAGEREF _Toc523503710 h 355.3.2.
5.Sell and Donate Upload Form PAGEREF _Toc523503711 h 365.3.2.6.Slider and Navigation bar PAGEREF _Toc523503712 h 375.3.2.
7.Current user’s profile page PAGEREF _Toc523503713 h 375.3.2.
8.Other’s user profile header PAGEREF _Toc523503714 h 385.3.2.9.
Description Popup PAGEREF _Toc523503715 h 385.3.2.
10.Footer PAGEREF _Toc523503716 h 395.3.2.11.
Item Cards PAGEREF _Toc523503717 h 395.3.2.12.Messages Areas PAGEREF _Toc523503718 h 405.3.3.Application Design PAGEREF _Toc523503719 h 415.
3.3.1.Database Design PAGEREF _Toc523503720 h 415.4.Development PAGEREF _Toc523503721 h 425.
4.1.Development Methods PAGEREF _Toc523503722 h 425.4.
1.1.Passing Data between Components PAGEREF _Toc523503723 h 42 HYPERLINK l “_Toc523503724” 5.4.1.2.
Accessing and Updating Database PAGEREF _Toc523503724 h 42 HYPERLINK l “_Toc523503725” 5.4.2.Application Architecture PAGEREF _Toc523503725 h 425.4.2.
1.Code Style PAGEREF _Toc523503726 h 425.4.3.
Problems, Issues Faced and Optimization PAGEREF _Toc523503727 h 435.4.3.1.Authentication of login and sign up PAGEREF _Toc523503728 h 435.
4.3.2.Responsiveness PAGEREF _Toc523503729 h 435.4.3.3.
Database Issue PAGEREF _Toc523503730 h 435.4.3.4.Chat box PAGEREF _Toc523503731 h 435.
4.3.5.User list of chat box PAGEREF _Toc523503732 h 435.4.3.6.NPM got outdated PAGEREF _Toc523503733 h 435.
4.3.7.Validation of upload forms PAGEREF _Toc523503734 h 446.TESTING PAGEREF _Toc523503735 h 456.1.Unit Testing PAGEREF _Toc523503736 h 45Signup-1A PAGEREF _Toc523503737 h 45Signup-1B PAGEREF _Toc523503738 h 46Login-1A PAGEREF _Toc523503739 h 46Login-1A PAGEREF _Toc523503740 h 47Login-1B PAGEREF _Toc523503741 h 48GmailLogin-1A PAGEREF _Toc523503742 h 49SellUploadForm-1A PAGEREF _Toc523503743 h 50SellUploadForm-1B PAGEREF _Toc523503744 h 51SellUploadForm-1C PAGEREF _Toc523503745 h 52DonateUploadForm-1A PAGEREF _Toc523503746 h 53DonateUploadForm-1B PAGEREF _Toc523503747 h 54DonateUploadForm-1C PAGEREF _Toc523503748 h 55Search-1A PAGEREF _Toc523503749 h 56Search-1B PAGEREF _Toc523503750 h 56Buy-1A PAGEREF _Toc523503751 h 57FilterCategory-1A PAGEREF _Toc523503752 h 58FilterCondition-1A PAGEREF _Toc523503753 h 59FilterPrice-1A PAGEREF _Toc523503754 h 60AddMobileNumber-1A PAGEREF _Toc523503755 h 61AddAboutMe-1A PAGEREF _Toc523503756 h 61ChangeProfilePic-1A PAGEREF _Toc523503757 h 62ForgotPassword-1A PAGEREF _Toc523503758 h 63ChangePassword-1A PAGEREF _Toc523503759 h 63DeleteItem-1A PAGEREF _Toc523503760 h 64SaleItem-1A PAGEREF _Toc523503761 h 64SearchItemByCode-1A PAGEREF _Toc523503762 h 65SignOut-1A PAGEREF _Toc523503763 h 657.CONCLUSION PAGEREF _Toc523503764 h 667.
1.Conclusion PAGEREF _Toc523503765 h 667.2.Future PAGEREF _Toc523503766 h 66INTRODUCTIONOBJECTIVEThe soul objectives of our web application are to provide a platform with an ease of access to any buyer willing to buy the product he/she wants available on our web application similarly any seller willing to sell the product which is meeting the criteria of our web application will be given a bright opportunity to sell his/her product. Having a concern of helping others our web application is based on the blocks of helping the mankind and for achieving this because we provide a platform from which any deserving entity can seek donations he wants through our web application on the other hand people who wants to help others can also achieve their goal of helpings other by donating on our web application.RELEVANCE OF DOMAINSFirebaseDatabaseThe Firebase Real-time Database is a cloud-hosted database. Data is stored as JSON and synchronized in real-time to every connected client. When you build cross-platform apps with our IOS, Android, and JavaScript SDKs, all of your clients share one Real-time Database instance and automatically receive updates with the newest data.
StorageCloud Storage for Firebase lets you upload and share user generated content, such as images and video, which allows you to build rich media content into your apps. Your data is stored in a Google Cloud Storage bucket, an Exabyte scale object storage solution with high availability and global redundancy. Cloud Storage lets you securely upload these files directly from mobile devices and web browsers, handling spotty networks with ease.DevelopmentJavaScriptJavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and thus is an essential part of web applications. The vast majority of websites use it, and all major web browsers have a dedicated JavaScript engine to execute it.Node.
jsNode.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside the browser. NpmNpm is a package manager for the JavaScript programming language.
It is the default package manager for the JavaScript runtime environment Node.js. User Interface React In computing, React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.React Semantic UISemantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI React is the official React integration for Semantic UI.
PROFESSIONAL CONSIDERATIONSPublic InterestPeople who are willing to serve mankind.Needy People.People who want clothes in affordable price.People who want extra earning by selling used or brand new clothes.Duty to Relevant AuthorityA donor shouldn’t make feel the deserving entity REQUIREMENTS ANALYSISExisting SolutionsThere is somehow an existing solution which is khazany.pk , they buy your products and sell them to their customers.UniquenessThere is a need to provide a way for needy people to get essentials and for people to get clothes in affordable price.
PROJECT PLANPhasesWe have used agile method`s Framework (Scrum).Product Backlog Product backlog is a list of work/task, which need to be done in a project.Sprint PlanningScrumMaster does sprint planning, who facilitates the meeting, a Product Owner, who clarifies the details of the product backlog items and their respective acceptance criteria, and the Entire Agile Team, who define the work and effort necessary to meet their sprint commitment.Scrum Meeting In Scrum, on each day of a sprint, the team holds a daily scrum meeting called the “daily scrum. “Meetings are typically held in the same location and at the same time each day. Ideally, a daily scrum meeting is held in the morning, as it helps set the context for the coming day’s work.
Testing and Product DemonstrationSince the ideal result of every sprint is a working product, the full life-cycle testing process is very important. There are different ways to minimize costs of the testing period. For example, you can decrease the overall amount of user stories. As a result, the number of possible bugs will be minimized.
The other way is to include QA engineers into the scrum team.Retrospective and Next Sprint PlanningRetrospective’s main aim is to discuss the results and determine the ways to improve development process on the next step. The team should conclude what went well during the working process and what can be done better during the future iteration. When the ways of improvement are defined, the team can concentrate on the next sprint planning.0287020Gantt chartProject ExpectationsPrimary ObjectivesTo build a web app to provide a platform to the seller, buyer, donor and deserving entity. So that they could buy or sell used or new clothes.Extension ObjectivesA profile page of every individual to show specific details of their self and to show a portfolio.
DESIGN AND DEVELOPMENTUse CaseUse Case DiagramNarrativesManage25717543624500-222885826135Admin00Admin224790016510 Manage00 ManageAuthor(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Manage Use Case ID: SBC-UC001 Priority: High Primary Actor: AdminDescription: This use case is about the admin which will manage the site.Trigger: This use case will initiate when the admin does loginTypical Course of Events: Actor Action System ResponseStep 1: Login. Step 2: The system will verify and logged in the Admin.Alternate Course: If the input details went wrong, system will ask to provide authentic details.Conclusion: This use case concludes that the admin will manage the site.
Visit Site-79513885383USER00USER2257425121285 Visit Site00 Visit Site25717544513400Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Visit Site Use Case ID: SBC-UC002 Priority: High Primary Actor: UserDescription: This Use case describes the event of a visitor who visits the site. The visitor will see the initial stuff which would be there for sale. He/she can see the initial promotions, offers and sales.Trigger: This use case will initiate when the user visit site and see available stuff placed there for sale.Typical Course of Events: Actor Action System ResponseStep 1: The user visit site.
Step 2: The system will show the all available stuff with description.Alternate Course: If the server is not available, the 404-error page would appear.Conclusion: This use case concludes that the system will show available stuff to the user.Sign Up289560085725 Sign Up00 Sign Up-180975857250USER00USER24765043815000Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Sign Up Use Case ID: SBC-UC003 Priority: High Primary Actor: UserDescription: This Use case describes the event of a visitor who will sign up to the web application. As being signed up he/she will become an official user of web application which can further lead him/her to discover the diverse ideas or functionality available on web application.
Precondition: The user is not registered before.Trigger: This use case will initiate when a new user registers itself.Typical Course of Events: Actor Action System ResponseStep 1: The new user will provide the required information to register in system.
Step 2: The system will check that the required Information has been provided.Step 3: The system will check the information of new user in previous database and compare some attributes. To confirm that he/she is not added before.Step 4: The system will add the new user in database with new login ID.Alternate Course: Step 2: If the required information is not completely provided then the system Will prompt to user to provide the complete information?Step 3: If the information of new user is matched with existed user then the System will Prompt to user and the operation will be reverted.Conclusion: This use case concludes that the new user is added in database or operation is Terminated.Post Condition: The user signed up successfully.
Login-76200857250USER00USER276225438150003257550-28575 Login00 LoginAuthor(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Login Use Case ID: SBC-UC004 Priority: High Primary Actor: UserDescription: The login process required username/email address and password. This Use case describes the event of a user who will login to the site in order to sell or buy. After logging into the web application, the user will now is exposed to all functions available on web application which can entertain him/her according his/her desire. Then login process required username/email address and password.
Precondition: SBC-UC003Trigger: This use case will initiate when the user requests login to system.Typical Course of Events: Actor Action System ResponseStep 1: The user will provide the Required information to Login into System. Step 2: The System will check that Required information is provided.Step 3: The system will check the info of user in database and compare required attributes to recognize the User.Alternate Course: Step 2: If the required information is not completely providing then the system will notify to user and prompt him/her to provide complete information.
Step 3: If the system will not able to recognize the user, the system will ask the User to check the entered attributes.Conclusion: This use case concludes that the user must provide login ID and Password to Authenticate.Post Condition: The user logged in successfully.Sell-114300845185Seller00Seller320040073660 Sell00 Sell25717544513500Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Sell Use Case ID: SBC-UC005 Priority: High Primary Actor: SellerDescription: This Use case describes the event of a seller who will sell his/her old or new stuff through web application. The seller can choose multiple options to sell his/her stuff in the manner which suits him/her the best according to their personal satisfaction.
Precondition: SBC-UC004Trigger: This use case will initiate when the seller sale items.Typical Course of Events: Actor Action System ResponseStep 1: The seller must upload item’s details i.e. required descriptions and images. Step 2: The system will check required information is provided.Step 3: The system will record the information into the database.
Alternate Course: Step 4: If the required information is not completely provided then the system will notify the seller to prompt him/her to provide complete information.Conclusion: This use case concludes that seller would sale items (clothes, shoes etc).Post Condition: The item for sale would show up in available list on the web application.Buy3114675-1905 Buy00 Buy-114935883285Buyer00Buyer24765040767000Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Buy Use Case ID: SBC-UC006 Priority: High Primary Actor: BuyerDescription: This Use case describes the event of a buyer who will buy some stuff.
The buyer can easily select the thing he/she wishes for through web application as he/she is now exposed to a versatile range of choices to select from.Precondition: SBC-UC004Trigger: This use case will initiate when the Buyer buys items.Typical Course of Events: Actor Action System ResponseStep 1: The buyer clicks on Buy button. Step 2: The system will open a chat box between buyer and seller to communicate.Conclusion: This use case concludes that the buyer buys the items available on the site.
Donate-209550857250Donor00Donor307657519050 Donate00 Donate26670042862500Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Donate Use Case ID: SBC-UC007 Priority: Medium Primary Actor: DonorDescription: This Use case describes the event of a donor who will donate some stuff through web application. The donor after reviewing our web application now can donate according to their mental satisfaction and can satisfy their personal need or will to help others.Precondition: SBC-UC004Trigger: This use case will initiate when the Donor donate items.Typical Course of Events: Actor Action System ResponseStep 1: The donor must upload item’s details i.e.
required descriptions and images. Step 2: The system will check required information is provided.Step 3: The system will save the information of items into the database.Alternate Courses: Step 4: If the required information is not completely provided then the system will notify the seller to prompt him/her to provide complete information.Conclusion: This use case concludes that donor would donate items (clothes, shoes etc.
) through web application.Post Condition: The item for sale would show up in available list on the web application.2982595192405 Acquire00 AcquireAcquire-171450847725Acquirer00Acquirer27622542862400Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Acquire Use Case ID: SBC-UC008 Priority: Medium Primary Actor: AcquirerAnother Participating Actor(s): DonorDescription: This Use case describes the event of an entity (deserving person) who will get some stuff from donor by satisfying him/her. The acceptor after going through a lot of different choices which would be available on web application now can select anything he/she wants which will be according to his/her need.Precondition: SBC-UC004Trigger: This use case will initiate when the Acquirer acquire items.Typical Course of Events: Actor Action System ResponseStep 1: The Acquirer clicks on Acquire Button.
Step 2: The system will open a chat box between Donor and Acquirer to communicate.Conclusion: This use case concludes that the Acquirer gets desired items available on web application.Rate19083143768100-114300847725Buyer00Buyer371475057150 Rate00 RateAuthor(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Rate Use Case ID: SBC-UC009 Priority: Medium Primary Actor: Acquirer, BuyerDescription: This Use case describes the event of a user/buyer who will rate the seller Or Seller’s stuff. The buyer after a successful transaction between him/her and the seller now can give his/her feedback in very simple way only by giving that particular transaction held between them just by giving a rating.
Precondition: SBC-UC006Trigger: This use case will initiate when the Acquirer or buyer rate items.Typical Course of Events: Actor Action System ResponseStep 1: The Acquirer or Buyer clicks on Rate bar. Step 2: The system will record rating of the item and visualize it on display.Conclusion: This use case concludes that the Buyer or Acquirer rates the item which will increase rating of Seller/Donor for a well reputation.Past Condition: Update rating attribute on seller ‘s profile.Chat4826442879116Seller00Seller-200025828675Buyer00Buyer324802543815000157162595250 Chat00 Chat25717544767400500062519050Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Chat Use Case ID: SBC-UC0010 Priority: Medium Primary Actor: Acquirer, BuyerDescription: This Use case describes the event of buyer and seller, who will communicate to do transaction in their own way. Both the parties can interact with each other and can be on a same page after having a convenient conversation according to their satisfaction leading them to a successful transaction.
Precondition: The Buyer or Acquirer is interested to get stuff and clicked on Buy Or Acquire button.Trigger: This use case will initiate when the chat box is open.Typical Course of Events: Actor Action System ResponseStep 1: The Acquirer or Buyer clicks on Buy or Acquire button. Step 2: The system will open a chat box between them.Alternate Courses: Step3: If the donor/seller is not online at the moment and his/her contact number is private, the Buyer can see his profile details, from there he can contact seller through Facebook or Gmail via notification.
Conclusion: This use case concludes that the chat box would be the medium to communicate between buyer and seller to do transaction.Past Condition: The transaction completed successfully.Delete-190500854710Seller00Seller31432544513500337185092710 Delete00 DeleteAuthor(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Delete Item Use Case ID: SBC-UC0011 Priority: Low Primary Actor: Seller, DonorDescription: This Use Case defines that Seller or Donor can delete their items details which are on selling list in case they changed their mind. They could do it before selling the stuff.
Precondition: Step 1: seller or donor must be login. Step 2: The items must have existed in the system.Trigger: This use case will initiate the seller or donor deletes his/her items.Typical Course of Events: Actor Action System ResponseStep 1: The Seller or Acquirer clicks on the delete button to delete item.Step 3: The seller or acquirer confirm or cancel. Step 2: The system will show the confirmation message.
Step 4: The system will remove the selected item from the system’s database if confirmed by the seller.Conclusion: This use case concludes that the seller or acquire can delete his/her stuff from web application.Past Condition: Items would be deleted from the system.Edit3267710163195 Edit00 Edit-209550857250Seller00Seller28575049530000Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Edit Item Use Case ID: SBC-UC0012 Priority: Medium Primary Actor: Seller, DonorDescription: This Use Case defines that Seller or Donor Can Edit their items details which are on selling list in case they changed their mind. They could do it before selling the stuff.Precondition: Step 1: seller or donor must be login.
Step 2: The items must have existed in the system.Trigger: This use case will initiate the seller or donor edits his/her items.Typical Course of Events: Actor Action System ResponseStep 1: The Seller or Acquire clicks on the Edit button to edit item’s details.Step 3: The seller would fill the input fields. Step 2: The system will provide input fields to edit.Step 4: The system will update the details of selected item to the system’s database.
Alternate Course: Step 5: If the user left the fields empty then the system will notify the seller/donor to prompt him/her to insert complete information.Conclusion: This use case concludes that the seller or acquire can edit his/her stuff if the details went wrong.Past Condition: The updated items would appear on the web application.Search3061252119712Search00Search-180975857250User00User26670043815000Author(s): Danish, Aamir Date: 29-Jan-2018Version:Use-Case TypeBusiness RequirementsUse Case Name: Search Use Case ID: SBC-UC0013 Priority: Medium Primary Actor: UserDescription: This Use Case defines that the User can search particular items by typing desired items name in the search bar, which will bring items according to his desire if available on web application.Precondition: The user must have visited the site.Trigger: This use case will initiate when the user types the name of the item into the search bar.Typical Course of Events: Actor Action System ResponseStep 1: The user inserts the desired name or keyword in the search bar.
Step 3: He/she can use the filters i.e. price, items type. Step 2: The system will show the all available results from the system.
Step 4: The system will show the all available results from the system according to the filter.Alternate Course: Step 5: The search result is not available into the system or vice versa.Conclusion: This concludes that the user can search his/her desired items by search bar.Past Condition: Searched or filtered items would appear.Initial DesignInitial Application Data Flow Diagrams-24765063881000Initial Application Interface DesignsDesignBrandingColor SchemeCYAN: Used for item code in item component card.BLUE: Used for headers, buttons.ORANGE: Used for shadow, in chat box UI and in item component card.
Purple: Used in profile page header.WHITE: Body background.GREY: Used in sold button.Icon Home Man Women Kid Upload Sign In Sign out Profile FilterUX Design Initial HomepageInitial homepage when a user opens this web app, he can see the available items but he cannot buy until he does sign in.Login PopupWhen a user clicks on sign in button or click on any item on landing page, a pop up appears from there he can sign in if he has account otherwise, he can directly login from his Gmail account, and if he forgot his password, he can recover it from here.
Sign Up Popup If the user doesn’t have account he can sign up to make his account by simply filled this sign form.Successfully Sign inThis is the interface when a user signs to the web app, now he can buy, sell, donate or get any item available on web app. She/he can use filters to advanced his/her search to save the time. Sell and Donate Upload Form0107188000This popup appears when a user wants to sell any item or cloth here he will have to enter item name, price, size, condition, and category and upload the image of specific cloth, he/she also can add some description accordingly.
Slider and Navigation barCurrent user’s profile pageThis is the main header on current user’s profile page, here he can maintain his profile and some details like adding contact info, about me, he can change his profile picture, he also can change his password from here.Other’s user profile headerOther’s user profile header, we can his given contact info, his rating and we also can rate that user.Description PopupWhen a user clicks on any item, this description pop up appears to the screen to show further details about selected item, from here he can contact with seller by clicking on his name.FooterItem Cards Item Component on HomepageItem Component on Profile PageMessages Areas Chat BoxUser List of Chat BoxApplication Design Database Design -63532448500Development Development MethodsPassing Data between ComponentsData is passed between components through props and by import them. Accessing and Updating Database Accessing data from node named as ‘users’fb.database().ref(‘/’).
child(‘users’) .on(‘value’, data => {// do something with data})Updating data fb.database().
ref(‘/’).child(‘items/’+i).update({isSold:true});Application ArchitectureCode StyleClass ComponentFunctional ComponentProblems, Issues Faced and OptimizationAuthentication of login and sign upAt first, we couldn’t secure the routes, then we follow the article of Robin Wrech to solve our problem.
ResponsivenessAt first, we were using Material UI in our project, and then we face some issues with UI. Then we switched to React-Semantic-UI to make the user interface of our project and to make it responsive.Database IssueWe faced issue with the node of item details and user details, could not make interaction between them. Then we reread the documentation of firebase, after tried several times we came to the right structure of nodes. Chat boxIt became the real headache for us to implement the chat; we overviewed so many articles and documentations but did not get what we really wanted. So we start by our own from scratch be using nodes of firebase database.User list of chat boxWhen we successfully made chat box, then we faced problems to get the user list of the people who messages to the current user and to show it on profile page.
Then we go through again database documentation and do some brainstorming and we done. NPM got outdatedOne day NPM went outdated, when we were trying to start the project through terminal/cmd it gave some errors in which it didn’t mentioned that our npm is out dated, it took 2 days, then a mate told us to upgrade the NPM. This is how we proceed to our project again.Validation of upload formsWe could not make validation on inputs as per it needs, and then we write some regex with some predefined components (dependencies) to achieve the task.
TESTINGUnit TestingTest Scenario ID Signup-1 Test Case ID Signup-1ATest Case Description Check Signup Activity (Positive) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Open Website Sign up button Sign up popup opens Sign up popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter validUsername, email,Password & confirm password Username: AamirEmail : [email protected]: ********Confirm Password : ******** Sign up Success Sign up Success ChromeV-69.
0.4397.57 Pass Successfully signupTest Scenario ID Signup-1 Test Case ID Signup-1BTest Case Description Check Signup Activity (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Open Website Sign up button Sign up popup opens Sign up popup opens ChromeV-69.
0.4397.57 Pass Successful2 Enter invalidUsername, email,Password or confirm password Username: invalid user nameEmail : [email protected]: *****Confirm Password : ******** Submit button remain disabled Submit button remain disabled ChromeV-69.0.4397.57 Pass Submit button remain disabledTest Scenario ID Login-1 Test Case ID Login-1ATest Case Description Check Login Activity (Positive) Test Priority HighPre-Requisite User must sign up Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click sign in button Sign in button Sign in popup opens Sign in popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid email and password Email : [email protected] : ******** Login Success Login Success ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID Login-1 Test Case ID Login-1ATest Case Description Check Login Activity (Positive) Test Priority HighPre-Requisite User must sign up Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on sign in button Sign in button Sign in popup opens Sign in popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid email and password Email : [email protected] : ******** Login Success Login Success ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID Login-1 Test Case ID Login-1BTest Case Description Check Login Activity (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on sign in button Sign in button Sign in popup opens Sign in popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter invalid email and password Email : [email protected] : ******** Login Error There is no user record corresponding to this identifier. The user may have been deleted. ChromeV-69.0.4397.57 Pass Invalid login attempt3 Enter valid email and incorrect password Email Id : [email protected] :***** Error The password is invalid or the user does not have a password. ChromeV-69.0.4397.57 Pass Invalid login attemptTest Scenario ID GmailLogin-1 Test Case ID GmailLogin-1ATest Case Description Check Login Activity (Positive) Test Priority HighPre-Requisite User must have Gmail account Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Gmail button Gmail button Gmail sign in popup opens Gmail sign in popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid email and password Email : [email protected] : ******** Login Success Login Success ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID SellUploadForm-1 Test Case ID SellUploadForm-1ATest Case Description Check Upload Form (Positive) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Sell Button Sell Button Sell upload component popup opens Sell upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid item name,Price, category, condition, size, description and upload valid image. Item Name: Shirt,Price : 500,Category :Kids,Condition: New,Size: Small,Image. Submit button will Enabled Submit button will be Enabled ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID SellUploadForm-1 Test Case ID SellUploadForm-1BTest Case Description Check Upload Form (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Sell Button Sell Button Sell upload component popup opens Sell upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter invalid item name,Invalid Price, didn’t select category, condition, size, description and upload valid image. Item Name: 82*#(,Price : invalid price,Category:unselectedCondition: unselectedSize: unselectedSubmit button remains Disabled Submit button remains Disabled ChromeV-69.0.4397.57 Pass Submit button Is disabledTest Scenario ID SellUploadForm-1 Test Case ID SellUploadForm-1CTest Case Description Check Upload Form (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Sell Button Sell Button Sell upload component popup opens Sell upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid item name, Price, select category, condition, size, description and didn’t upload valid image. Item Name: Shirt,Price : 600, Category:selectedCondition: selectedSize: selectedPic is not uploaded Error:Kindly upload image. Error:Kindly upload image. ChromeV-69.0.4397.57 Pass Error appears related to image uploadTest Scenario ID DonateUploadForm-1 Test Case ID DonateUploadForm-1ATest Case Description Check Upload Form (Positive) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Donate Button Donate Button Donate upload component popup opens Donate upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid item name,category, condition, size, description and upload valid image. Item Name: Shirt,Category :Kids,Condition: New,Size: Small,Image. Submit button will Enabled Submit button will be Enabled ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID DonateUploadForm-1 Test Case ID DonateUploadForm-1BTest Case Description Check Upload Form (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Donate Button Donate Button Donate upload component popup opens Donate upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter invalid item name, didn’t select category, condition, size, description and upload valid image. Item Name: 82*#(,Category:unselectedCondition: unselectedSize: unselectedSubmit button remains Disabled Submit button remains Disabled ChromeV-69.0.4397.57 Pass Submit button Is disabledTest Scenario ID DonateUploadForm-1 Test Case ID DonateUploadForm-1CTest Case Description Check Upload Form (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Donate Button Donate Button Donate upload component popup opens Donate upload component popup opens ChromeV-69.0.4397.57 Pass Successful2 Enter valid item name,select category, condition, size, description and didn’t upload valid image. Item Name: Shirt,Category:selectedCondition: selectedSize: selectedPic is not uploaded Error:Kindly upload image. Error:Kindly upload image. ChromeV-69.0.4397.57 Pass Error appears related to image uploadTest Scenario ID Search-1 Test Case ID Search-1ATest Case Description Search Activity (Positive) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Enter item name Item Name : ShirtHit search button Shirts item will appear Shirts item appeared ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID Search-1 Test Case ID Search-1BTest Case Description Search Activity (Negative) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Enter invalid item name or the name which is not available on web app. Laptop Show nothing Nothing showed ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID Buy-1 Test Case ID Buy-1ATest Case Description Buy Activity (Positive) Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on buy button Buy button Item description opens Item description pop up opens ChromeV-69.0.4397.57 Pass Successful2 Click on seller name button Seller name button Seller profile opens Seller profile opens ChromeV-69.0.4397.57 Pass Successful3 Type message in chat box and send it. Message Message forwards Message forwards ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID FilterCategory-1 Test Case ID FilterCategory-1ATest Case Description Filter Category Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click On Men button Men Button Items whose category is men appears. Items whose category is men appeared. ChromeV-69.0.4397.57 Pass Successful2 Click on Women button Women Button Items whose category is women appears. Items whose category is women appeared. ChromeV-69.0.4397.57 Pass Successful3 Click on kids button Kids Button Items whose category is kids appears. Items whose category is kids appeared. ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID FilterCondition-1 Test Case ID FilterCondition-1ATest Case Description Filter Condition Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click On Old button Old Button Items whose condition is old appears. Items whose condition is old appeared. ChromeV-69.0.4397.57 Pass Successful2 Click on New (Tagged)button New (Tagged) Button Items whose condition is new (tagged) appears. Items whose condition is new (tagged) appeared. ChromeV-69.0.4397.57 Pass Successful3 Click on New (Untagged) button New (Untagged)Button Items whose condition is new (untagged) appears. Items whose condition is new (untagged) appeared. ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID FilterPrice-1 Test Case ID FilterPrice-1ATest Case Description Filter Price Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click On 1-500 button 1-500 button Items whose price is between1-500 appears. Items whose price is between1-500 appears. ChromeV-69.0.4397.57 Pass Successful2 Click on 501-1500 button 501-1500 button Items whose price is between501-1500 appears. Items whose price is between501-1500 appears. ChromeV-69.0.4397.57 Pass Successful3 Click on 1501-3000button 1501-3000 Button Items whose price is between1501-3000 appears. Items whose price is between1501-3000 appears. ChromeV-69.0.4397.57 Pass Successful4 Click on 3001-5000 Button 3001-5000 Button Items whose price is between3001-5000 appears. Items whose price is between3001-5000 appears. ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID AddMobileNumber-1 Test Case ID AddMobileNumber-1ATest Case Description Add Mobile Number Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Add Mobile Number button Add Mobile Number Button Pop up opens to enter mobile number. Pop up opens to enter mobile number. ChromeV-69.0.4397.57 Pass Successful2 Enter mobile number and hit submit button Number : 0300-1234567Click on submit Mobile number added. Mobile number added. ChromeV-69.0.4397.57 Pass Mobile Number Added SuccessfullyTest Scenario ID AddAboutMe-1 Test Case ID AddAboutMe-1ATest Case Description Add About Me Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Add About Me button Add About Me Button Pop up opens to enter About me. Pop up opens to enter About me. ChromeV-69.0.4397.57 Pass Successful2 Enter About Me and hit submit button About Me : Hi I’m Danziee, live in Karachi. About Me added. AboutMe Added. ChromeV-69.0.4397.57 Pass About Me Added SuccessfullyTest Scenario ID ChangeProfilePic-1 Test Case ID ChangeProfilePic-1ATest Case Description Change Profile Pic Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on Change Image button Change Image Button A window open to choose pic A window opens to choose pic ChromeV-69.0.4397.57 Pass Successful2 Select image and click on upload button Upload button Profile pic updates. Profile Pic updated. ChromeV-69.0.4397.57 Pass Profile pic updated.Test Scenario ID ForgotPassword-1 Test Case ID ForgotPassword-1ATest Case Description Forgot Password Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Enter your email address and click on submit Email : [email protected] on submit button A link would be sent to you via email to change your password. Link received via email. ChromeV-69.0.4397.57 Pass SuccessfulTest Scenario ID ChangePassword-1 Test Case ID ChangePassword-1ATest Case Description Change Password Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Enter Password, confirm password and click on submit button. Enter password : ********Confirm password:********Submit Button Password Changed. Password Changed. ChromeV-69.0.4397.57 Pass Password changed successfully.Test Scenario ID DeleteItem-1 Test Case ID DeleteItem-1ATest Case Description Delete item Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on delete button Delete button Item deletes. Item deleted. ChromeV-69.0.4397.57 Pass Item deleted successfully.Test Scenario ID SaleItem-1 Test Case ID SaleItem-1ATest Case Description Sale item Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on sell button Sell button Item sold. Item sold. ChromeV-69.0.4397.57 Pass Item sold successfully.Test Scenario ID SearchItemByCode-1 Test Case ID SearchItemByCode-1ATest Case Description Search item by code Activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Go to profile page, type in code item search and click on search button Input : uaj82Search button Item with that code appears. Item appeared. ChromeV-69.0.4397.57 Pass Successful.Test Scenario ID SignOut-1 Test Case ID SignOut-1ATest Case Description Sign out activity Test Priority HighPre-Requisite NA Post-Requisite NATest Execution Steps:S.No Action Inputs Expected Output Actual Output Test Browser Test Result Test Comments1 Click on sign out button Sign out button User will be signed out. Signed out. ChromeV-69.0.4397.57 Pass SuccessfulCONCLUSIONConclusionTEIE is providing a platform to seller and buyer who are interested in buying and selling clothes in affordable price. In the same way it is providing a space to the people who feels good to donate something i.e. clothes to the needy people, which would be very helpful for deserving entities in the society.The seller and buyer can rate each other, which will make a good reputation of their selves on their profile page; they can interact with each other through a chat box available on this web application. There are filters through which user can easily sort out the products according to his desire. Every user can also manage his profile according to his will for making it to look more of their respective identity.FutureBy improving and adding more features in this project, we may make it a vast startup, which would be more flexible for the users. In addition, by working on this concept we may upgrade this from cloth’s items to other useful items such that books, stationary, and other useful stuff which is needed by any student or common person.
