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 Nader

Version <1.0>
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
● Existing Solutions
● Critique of the existing
● Provided Solution

3. Business features specification

● Task Assignment

4. Technical specification
a. Technical architecture
b. Languages and Frameworks
c. Software tools
d. Material tools

5. Other Requirements
6.Prototype

1
 1. Overall description

a. Project purpose
An ideal online 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. Project description
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
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. Project scope

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. Assumptions / Constraints / Standards

● Assumptions :

- The client is responsible for entering all content into the platform.
- The client is responsible for their buying decision.
- The client is responsible for their selling decision.
- The client is responsible for their exchange decision.
- The client is responsible for their donating decision.

● Constraints
- Budget : For example the purchase of paid apis.
- Human Resources.
- Learning new Technologies.
● Standards
- Responsive application
- Specific colors , fonts that align with our chart.
- A single page application

3
 2.state of the art

a. Description of the exiting

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 disadvantages such as :
- Hard to gain the user's trust.
- There is no diversity in the products.
- Some sites are more oriented towards female products (Dabchy).
- The process of donating is kind of hard.
- There is no 24/7 user assistance.
- Some sites tax a high percentage of money on each deal.
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 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 access to source code
- Difficulty in giving confidence.
- Rarely updated.
● Dabchy:
- There is no diversity in the products.

● Ebay :
- The site is so saturated that it’s hard to find the right 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.
- Notify subscribers of the products they are looking for before other customers (a paid
privilege)
- Grouping offers of donation, exchange, sale between groups of people with common
criteria (location, age, activity etc.)
- Develop a chatbot to measure consumer satisfaction rates for commercial purposes
,the system provides self-learning through technologies related to artificial intelligence
and Deep Learning.

6
 3.Business features specification

Module Submodules System features Description

Account Crud users Admin approved ,decline user

User Management Management subscription or delete them

Management profile User has the ability to update his

profile

User has the ability to check his

profile

Subscriptions Creation Accounts User register his account as normal

Management account

User register his account as premium

account

Authentication Access to user space Access to the relative space

depending on the role (Admin/User)

Payment Billing Management Make a bill

Print a bill

Payment method Choose a method to pay with.

User product Add,modify,delete The user has the possibility to

management product manage his products
Product Search The user has the possibility to search
Management Products(Region,Age,. his products depending on the
.) criteria selected

Donation Add,modify,delete The user has the possibility to

management donated products manage his donated products

Exchange Add,modify,delete The user has the possibility to

management exchange products manage his exchange products

Recommendation Recommendation User gets a list of products based on

System management his search.

7
Chat Bot Question/Response Talk to the user The user has the possibility to talk to
a virtual machine that’ll answer his
questions

Analyze The machine analyzes the degree of

behavior(emotional satisfaction of the user .
state)

Real Time Chat Real time talk Real time talk Users can talk to each other live

Task Assignment

8
 4.Technical specification
a. Technical architecture

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. Languages and frameworks

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.

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 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. Software tools

➢ 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.

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.

12
 d. Material tools

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 Hexa-Core( 2.70 GHz up to 4.50 GHz)

-RAM: 16 Go

-Storage: 512 Go SSD

-Operating System: Windows 11

Mohamed Benzarti

-Processor: Processeur Intel Core i5-11400H Hexa-Core( 2.70 GHz up to 4.50 GHz)

-RAM: 16 Go

-Storage: 237Go SSD

-Operating System: Windows 10

14
5. Other requirements

- Secure user accounts.

- Continuously scan for—and remediate—critical
and high vulnerabilities.
- Secure data in transit.
Safety requirements - Backup data.
- Secure web applications.
- Secure web servers.

- Availability
- Performance
Software quality - Security
- Extensibility
attributes - 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