Rapport

 

Full-Stack JS Project  report  Social Marketing & Emotions Detection

Developed by : Nassim Ben Aissa Mouna Ayed Mohamed Benzarti Mohamed Saif Eddine Hendili

Supervised by : Mr.Abdellaoui Mr .Abdellaoui Nader 

Version  22/02/2022 

 

Content  1. Overall description a. Project purpose b. Project description c. Project scope d. Assumptions / Constraints / Standards 2. State of the Art  a. Description of the exiting ● Exis Existi ting ng Sol Solut utiion ons s ● Cr Crit itiq ique ue of th the e exi exist stin ing g ● Pr Prov oviide ded dS Sol olut utio ion n

3. Business features specification ● Tas ask k Ass ssiign gnme ment nt

4. Technical specification a. Tech echnica nicall archite architectu cture re b. Lan Langua guages ges and and Frame Framewo works rks c. So Soft ftw war are e too tools ls d. Ma Mate teri rial al to tool olss 5. Other Requirements 6.Prototype

1

 

1. Ov Over eral alll descr descrip ipti tion on a. Pr Proje oject ct purpos purpose e An ideal online marketplace marketplace for second-hand goods , That offers the sellers the opportunity to turn unwanted items into cash, Exchange them with a more useful item or even donate them. Also , provides customers with a robust , flexible platform and a customized shopping experience.

b. Proje Project ct descr descript iption ion The current project is mainly a marketplace that provides the customers with a wide range of used items from numerous sellers, filtering them according to price, size, color, material,category, style etc. Providing a responsive web design and other tools such as a Chatbot and a realtime chat with sellers that will simultaneously enhance the customer’s user experience. Additionally, the current project aims to encourage sellers to profit from indesirable Additionally, goods like clothes ,electronics ,furniture etc. Or even donate them to charity representatives for example . As the saying goes, “one man's trash is another man's treasure”. It will provide a space for swapping unused items for something a bit more useful. Or even more worthy sometimes, depending on the offers. It will also focus on consumer behavior to acquire more specific product  recommendations thus making the best out of the visit.

c. Proj Projec ectt scop scope e Our team team of four will be working all along the semester on developing a Web Market that will combine selling , exchanging and donating all in one site ensuring the security and safety and trust of all our customers it will also provide : - Responsive application with easy to use interfaces.

2

 

- Chatbot assuring help along your visit. - A realtime chat between customers and sellers. - Tracking system to group people based on localisation. - Emotion detection system based on customer behavior. - Product suggesting systems with the help of machine learning.

d. Assum Assumptions ptions / Constr Constraints aints / Standar Standards ds ●  Assumptions : -

The cclie lient nt is rrespo esponsi nsible ble ffor or en enter tering ing a all ll co cont ntent ent int into o the p plat latfor form. m.

-

Th The e cl clie ient nt is rres espon ponsi sibl ble e ffor or thei theirr b buy uyin ing g de deci cisi sion on..

-

The cli client ent is respo responsi nsible ble for the their ir sel sellin ling g decis decision ion..

-

The cli client ent is rrespo esponsi nsible ble for the their ir ex excha change nge dec decisi ision. on.

-

The cli client ent is respo responsi nsible ble for the their ir don donati ating ng dec decisi ision. on.

● Constraints -

Bu Budg dget et : For For ex exam ample ple th the e purc purcha hase se of pai paid da api pis. s. Human Re Resources. Lear Learni ning ng new new Tec Techn hnol olog ogie ies. s.

● Standards -

Res esp ponsive app applicat atiion Specif Specific ic colors colors , ffonts onts that that align align with with our our chart. chart. A sin sing gle page page appl applic icat atiion

3

 

2.stat state e of the art  2. a. Desc Descrip riptio tion n of tthe he ex exiti iting ng Benefiting from the explosion of web technologies, developers are constantly conquering this field to satisfy the community by offering solutions to various daily problems, our application is dedicated to marketing. This type of projects has many disadvant disadvantages ages such as : Hard Hard to gain gain the the user user's 's trus trust. t. Ther There e is is no no div diver ersi sity ty in the the pro produ duct cts. s. Some Some sites sites are are more more orien oriented ted toward towards s femal female e produ products cts (Dabc (Dabchy) hy).. The The pro proce cess ss of do dona nati ting ng is kind kind of ha hard rd.. Ther There e is no 24/7 24/7 us user er assi assist stan ance ce.. Some Some site sites s tax tax a high high perce percenta ntage ge of mon money ey on each each dea deal. l. So in order to solve these drawbacks several tools were created based on new technologies. Among which we can mention :

Existing Solutions : ❖

Tayara Created in 2012 201 2 Tayara Tayara is one of the most famous websites in tunisia for buying and selling used and new products.

4

 

Dabchy Dabchy is a tunisian user friendly online shop that offers users the ability to buy and sell mostly second hand clothes. ❖

Ebay EBay is the world's online marketplace, a place for buyers and sellers to come together  ❖

and trade almost anything!

5

 

Critique of the existing With regard to this information, we can note that they meet the main needs of the users. We can also note the following disadvantages: ● Tayara: - No acc acce ess tto o so source cod code - Di Diff ffic icul ulty ty in in giv givin ing g con confi fide denc nce. e. - Rarely up updated. ● Dabchy: - Ther There e is no div diver ersi sity ty in in the the prod produc ucts ts.. ● Ebay : - The site is so so saturat saturated ed that that it’s it’s hard hard to find the right right choice choice..

Provided Solution To overcome these problems, we aimed at setting up a web application to help the client find the best choice product and provide them with everything they need : - Reserve and buy used products according to several criterias. - Notif ify y subsc bscribe ibers of the prod roducts they hey ar are e look ooking ing for bef befor ore e other her custome tomers rs (a paid privilege) - Grou Group pin ing g offers of donat nation ion, excha change, sal sale betwee tween n grou roups of peo people with ith com common mon criteria (location, age, activity etc.) - Develo elop a chat atb bot to mea measur ure e consum sumer satisf tisfa actio tion rates tes for commer mmerc cial ial purpo rposes ,the ,the sy syst stem em pr prov ovid ides es se self lf-l -lea earn rnin ing g thro throug ugh h tech techno nolo logi gies es rela relate ted d to arti artifi fici cial al inte intell llig igen ence ce and Deep Learning.

6

 

3.Business features specification Module

User Management 

Submodules

System features

Description

Account 

Crud users

Admin approved ,decline user

Management 

subscription or delete them Manag Ma nagem ement ent pr prof ofil ile e

User User has has the the a abi bili lity ty to up upda date te his his profile User has the ability to check his profile

Subscriptions Management 

Cr Crea eati tion on Acc ccou ount ntss

User User regis egistter his his acc accou ount nt as no norm rmal al account  User register his account as premium account 

Authentication

Access tto o us user sp space

Access to to tth he rre elative sp space depending on the role (Admin/User)

Payment

Billing Management

Make a bi bill Print a bill

Payment method

Choose a me method to to p pa ay with.

Add,modify,delete product 

The user has the possibility to manage his products

Search Products(Region,Age,. .)

The user has the possibility to search his products depending on the criteria selected

Donation management 

Add,modify,delete donated products

The user has the possibility to manage his donated products

Exchange management 

Add,modify,delete exchange products

The user has the possibility to manage his exchange products

Recommendation System

Recommendation management 

User gets a list of products based on his search.

User product  management  Product  Management 

7

 

Chat Bot

Question/Response Talk to the user

Real Time Chat

Real time talk

The user has the possibility to talk to a virtual machine that’ll answer his questions

Analyze behavior(emotional state)

The machine analyzes the degree of  satisfaction of the user .

Real time talk

Users can talk to each other live

Task Assignment Assi gnment

8

 

4.T Technical specification 4. a. Tech echnic nical al arc archit hitect ectur ure e

The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.

React.js Front End

The top tier of the MERN stack is React.js, the declarative JavaScript framework for  creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML. React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from a modern web framework: great support for forms, error handling, events, lists, and more.

9

 

Express.js and Node.js Server Tier 

The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a “fast, unopinionated, minimalist web framework for  Node.js,” and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front-end, you can connect to Express.js functions that power your application. Those functions in turn use MongoDB’s Node.js drivers, either via callbacks for using Promises, to access and update data in your MongoDB database. MongoDB Database Tier 

If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as React, Express, and Node. That’s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval. Again, if you’re building in the cloud, you’ll want to look at Atlas. If you’re looking to set up your own MERN stack. b. Lan Langua guages ges and fr frame amewo works rks MongoDB is a basic program for cross-platform document-oriented data.Classified as a basic program of NoSQL data, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Public License side server (SSPL).

10

 

Node.js is an open-source, cross-platform JavaScript runtime environment that runs JavaScript code outside of a web browser. Node.js allows developers to use JavaScript for writing command-line tools and for server-side scripting, executing server-side scripts to produce dynamic web page content before the page is sent to the user's web browser browser..

React (also known as React.js or ReactJS) is a library open-source JavaScript for building user interfaces. It is maintained by Facebook and a community of individual and corporate developers. React can be used as a base in the development of single page or mobile applications. However, React is only concerned with rendering data to the DOM, and thus building React applications typically requires using additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular  for building user interfaces. Similar to and inspired by Facebook’s flux architecture, it was created by Dan Abramov and Andrew Clark.

Express.js, or simply Express, is a web application framework for Node.js, released as free and open source software under the MIT License. It is designed to create web applications and APIs.

11

 

ECMAScript is a general purpose programming language, standardized by Ecma International according to ECMA-262. It was inspired by JavaScript and JScript and was created to help h elp foster several implementations Independent.

Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its use of significant indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects

c. So Soft ftw war are e too ools ls ➢

VSCode

Visual Studio Code is a code editor free source created by Microsoft for Windows, Linux and macOS. Features include debugging support, syntax highlighting, smart code completion, snippets, refactoring code and integrated Git. Users can change the theme, keyboard shortcuts, preferences and install extensions that add additional functionality functionality.. The source code for Visual Studio Code pro comes from Microsoft's VS Code free and open source software project released under the MIT License. ➢

Postman

Postman is a collaboration platform for API development. Postman's features simplify every step of creation of an API and streamline collaboration so you can create better API faster. faster.

12

 

d. Ma Matter eria iall too tools ls

Saif Hendili -Processor: Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz 2.59 GHz -RAM: 16 Go -Storage: 512 Go SSD -Operating System: Windows 10

Nassim ben aissa -Marque : ASUS -Processor: Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz 2.59 GHz -RAM: 16 Go -Storage: 240 GB SSD + 1 TB HDD -Operating System: Windows 10

13

 

Mouna Ayed -Processor: Processeur Intel Core i5-11400H i5-11400H Hexa-Core( 2.70 GHz up to 4.50 4.50 GHz) -RAM: 16 Go -Storage: 512 Go SSD -Operating System: Windows 11

Mohamed Benzarti -Processor: Processeur Intel Core i5-11400H i5-11400H Hexa-Core( 2.70 GHz up to 4.50 4.50 GHz) -RAM: 16 Go -Storage: 237Go SSD -Operating System: Windows 10

14

 

5. Other requirements -

Safety requirements

-

-

Software Softwar e quality attributes

-

-

Sec ecu ure use userr ac accou oun nts ts.. Conti Co ntinu nuous ously ly scan scan for— for—and and rem remed ediat iate—c e—crit ritica icall and high vulnerabilities. Sec ecu ure dat data a in in tr trans nsit it.. Backup da data. Secu Se cure re we web b app appli lica cati tion ons. s. Sec ecu ure web serv rve ers rs..

 Availa  Availability bility Performance Security Extensibility Maintenance User-friendliness

6. Prototype ➢

Logo

15

 

➢

Back Office Login

➢

Back Office Dashboard

16

 

➢

Back Office Live Chat 

➢

Front Office Login

17

 

➢

Front Office Product List 

➢

Front Office Product Details

18

 

➢

Front Office Cart 

19