Stacker's

Stacker’s
A
PROJECT REPORT
on
Stacker’s
(Submitted in partial fulfillment of the requirements for the award of the degree
of)
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE & ENGINEERING
by
Rishabh Kumar Sharma (1750810059)
Rashmi Bind (1750810057)
Under the Guidance of
Mrs.Alka Singh
(Assistant Professor)
BABU BANARASI DAS ENGINEERING COLLEGE
Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow
College Code: 508
June 2021

Stacker’s
Page 2 of 125
CS&E DEPPT, BBDEC, LUCKNOW
CERTIFICATE
Certified that Rishabh Kumar Sharma(1750810059) and Rashmi
Bind(1750810057) has carried out the Project work presented in this
report entitled “Stacker’s” for the B.Tech. Final Year from Babu
Banarasi Das Engineering College, Lucknow under my supervision.
The report embodies the result of original work and studies carried
out by students themselves and the contents of the Project do not form
the basis for the award of any other degree to the candidate or
anybody else.
Head Cse Project Guide:
Mrs. Alka Singh
Date- 09/07/2021 (Assistant Professor)

Stacker’s
Page 3 of 125
ACKNOWLEDGEMENT
I take this occasion to thank God, the almighty for blessing us with
his grace and taking our endeavor to a successful culmination. We
extend our sincere and heartfull thanks to our esteemed guide, Mrs.
Alka Singh, for providing us with the right guidance and advice at
the crucial junctures and for showing us the right way.I extend my
sincere thanks to our respected Head of the Department for allowing
me to use the facilities available.
I am also thankful to the entire department who helped provide their
thorough insight which helped me in enhancing the various modules
and features of this project.I would also like to thank my family and
friends for being a constant source of motivation throughout the
project work.
Thank Fully
Rishabh Sharma
(1750810059)
Rashmi Bind
(1750810057)

of 125
Table of Contents
Abstract 6
Table of Figures 7
1. Introduction 8
1.1 About the Stacker's 8
1.2 Problem 8
1.3 Objectives 9
1.4 Tools used 9
1.5 Technologies used 11
1.6 Function 13
2. Staker's App Download 14
2.1 Stacker’s App Download – Using Google Play Store 15
2.2 Stacker’s APK Download for Android 16
2.3 Stacker’s for PC Windows Desktop 18
2.4 Stacker’s App Download for Mac 20
2.5 Stacker’s for iPhone & iPad Download App 22
2.6 How to use Stacker’s app? 24
2.6 General Description 28
2.8 Stacker’s App Alternatives 29
3. Stacker's Services 31
3.1 Integrated Apps 31
4. Design 37
4.1Set up a workflow in Stacker’s 37
4.1.1 What you’ll learn 37
4.2 Flow Chart 41
4.3 Use Case 45
4.4 Modal flow 46
4.5 ER Diagram 47
4.6 DFD 48
5. Code 49

of 125
6. Results 101
7. Security 112
7.1 Security features for more control, visibility, and flexibility 112
7.2 Identity and device management 112
7.3 Data protection 113
7.4 Information governance 113
8. Conclusion 114
8.1 For all kind of teams 114
8.2 At all kind of companies 116
8.3 Doing amazing things 118
9. Limitation and Scope 119
9.1 The message, file, and app limits on the free version of Stacker’s 119
9.2 Message visibility limit 119
9.3 What counts as a message 120
9.4 File storage limit 120i
9.5 App installation limit 121
10. Reference 122

Stacker’s
Page 6 of 125
Abstract
There are many web-based tools like social networks, collaborative
writing, or messaging tools that connect organizations under web
principles. Stacker’s is such a web instant messaging tool. As per
developer, it integrates the entire communication, file-sharing, real-time
messaging, digital archiving and search at one place,stock marketing.
Usage in line with these functionalities would reflect expected
appropriation, while other usage would account for unexpected
appropriation. We explored which factors of web tools determine actual
usage and how they affect knowledge management (KM). Therefore, we
investigated the relation between the three influencing factors, proposed
tool utility from developer side, intended usage of key implementers, and
context of application, to the actual usage in terms of knowledge
activities (generate, acquire, organize, transfer and save knowledge).
Stacker’s was implemented to enable exchange between project teams,
connecting distributed project members, initiate a community of learners
and establish a communication platform. Independent of the context, all
key implementers agreed on knowledge transfer, organization and saving
following Stacker's proposed utility.
Moreover, results revealed that a usage intention of internal management
does not lead to acquisition of external knowledge, and usage intention
of networking not to generation of new knowledge. These results suggest
that it is not the context of application, but the intended usage that mainly
affects the tool's efficacy for KM: I.e. intention seems to affect tool
selection, first, explaining commonalities concerning knowledge
activities (expected appropriation) and, subsequently, intention also
affects unexpected appropriation beyond the developers' tool utility. A
messaging tool is, hence, not only a messaging tool, but it is ‘what you
make of it!'

Stacker’s
Page 7 of 125
Table of Figures
S.No. Fig Name Page No.
1.1 Stacker’s App for Android 16
1.2 Stacker’s App for Desktop 19
1.3 Stacker’s App for iOS 23
1.4 Stacker’s Logo 25
1.5 Connected App 31
1.6 Outlook Calendar Logo 31
1.7 Teams Logo 33
1.8 Adobe XD logo 35
1.9 Adobe Creativity studio 36
1.10 Voice Message 34
1.11 Sale Force 35
1.12 Front Page of App 101
1.13 Login Accounts Page 102
1.14 Home Screen 104
1.15 Side bar menu 105
1.16 User information 106
1.17 Right bar menu 106
1.18 Search icon 106
1.19 Left bar menu 106
1.20 Calling Screen for Phone’s and Desktop 107
1.21 Calling History Screen 108
1.22 Calling Frame 109
1.23 Profile Information Screen 110
1.24 Stocks App 110
1.25 File Search and Storage 111
1.26 Apps Integrated Section 111
1.27 Payment Gateway 112
1.28 Indentification function 113
1.29 Information Governance 114
1.30 Project management 116
1.31 Customer Services 117
1.32 Sales Execution 117
1.33 Human Resources 118
1.34 Marketing Services 118
1.35 Education Engage 118
1.36 Media Expedite production 119

Stacker’s
Page 8 of 125
Chapter 1
INTRODUCTION
1.1 About the Staker’s
Stacker’s is the platform for any team and organization working and
communication program with the help of a channel-based messaging
system.
This is the improved version of all communication and social media
platform which has been created for meetings (Zoom, Microsoft team,
Google meets, WhatsApp, etc.)
In the Stacker’s you will get multiple software integrated into it just like
all the above app mention and much more Adobe-XD, Adobe Photoshop,
MS Office, Video calling apps, Instagram, VS Code, Google Drive, One
Drive, Paytm, and many more which any team of any type of business
which is based on any type of industry and requires team support every
time they can easily connect through it.
It can run on any platform Web, Android & IOS. So that you are free to
work and connect.
1.2 Problem
• According to the previous year 2019-2020. We see the actual
phase of work where the whole world face
• Extremely hard work loss due to COVID-19.
• As lack of workers, place, Equipment, Proper Communication,
and Tools.
• Schools and Colleges lose a proper way of Study and work
records.
• By Other Apostolos, we can communicate as video meetings but
there are no proper records of Videos and Chats. We cannot share
our Works with others in any proper Way. Loss of proper
communication record, works records are not stored that’s why
Everyone faces the loss.

Stacker’s
Page 9 of 125
1.3 Objective
➢ Conversations and documents in one place for all team members.
➢ Everyone can in the groups work together, rather than in separate
emails.
➢ For your team only. You will not be “disturbed” by others.
➢ Everyone can track the content of any type of file (word, pdf,
PowerPoint, etc.)
➢ You can control what notifications you want and what information
to get.
➢ Share all working Files and live work with the team and
organization.
➢ Automate a task with a workflow builder.
➢ Providing Online Compilers with the best IDEs.
➢ Work with any type of company.
1.4 Scope
• Cover any type of Companies (MNCs and Non-MNCs)
• Work with remote And Task Management.
• Support Engineering, IT, Customer Support, Human Resources,
Sales, marketing, project management.
1.5Tools used
1.5.1 Visual Studio Code-
Visual Studio Code is a source-code editor made
by Microsoft for Windows, Linux, and macOS. Features include
support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git. Users
can change the theme, keyboard shortcuts, preferences, and
install extensions that add additional functionality. Visual Studio
Code was first announced on April 29, 2015, by Microsoft at the
2015 Build conference. A Preview build was released shortly
thereafter.
➢ Visual Studio code features-

Stacker’s
Page 10 of 125
• Visual Studio Code is a source code editor that can be used
with a variety of programming languages,
including Java, JavaScript, Go, Node.js, Python, and C++. It
is based on the Electron framework, which is used to
develop Node.js Web applications that run on the Blink layout
engine. Visual Studio Code employs the same editor
component (codenamed "Monaco") used in Azure
DevOps (formerly called Visual Studio Online and Visual
Studio Team Services).
• Instead of a project system, it allows users to open one or more
directories, which can then be saved in workspaces for future
reuse. This allows it to operate as a language-agnostic code
editor for any language. It supports several programming
languages and a set of features that differs per language.
Unwanted files and folders can be excluded from the project
tree via the settings. Many Visual Studio Code features are not
exposed through menus or the user interface but can be
accessed via the command palette.
• Visual Studio Code can be extended via extensions, available
through a central repository. This includes additions to the
editor and language support. A notable feature is the ability to
create extensions that add support for new languages, themes,
and debuggers, perform static code analysis and add code
lines using the Language Server Protocol.
• Visual Studio Code includes multiple extensions for FTP,
allowing the software to be used as a free alternative for web
development. Code can be synced between the editor and the
server, without downloading any extra software.
• Visual Studio Code allows users to set the code page in which
the active document is saved, the newline character, and the
programming language of the active document. This allows it
to be used on any platform, in any locale, and for any given
programming language.
1.5.2 MongoDB Compass- The GUI for MongoDB. Visually explore
your data. Run ad hoc queries in seconds. Interact with your data
with full CRUD functionality. View and optimize your query
performance. Available on Linux, Mac, or Windows. Compass
empowers you to make smarter decisions about indexing,
document validation, and more.
CS&E DEPPT, BBDEC,

Stacker’s
Page 11 of 125
1.6 Technology Used-
1.6.1 Node.JS- Node.js (Node) is an open-source development
platform for executing JavaScript code server-side. Node is useful for
developing applications that require a persistent connection from
the browser to the server and is often used for real-time
applications such as chat, news feeds, and web push notifications.
• Node.js is intended to run on a dedicated HTTP server and to
employ a single thread with one process at a time. Node.js
applications are event-based and run asynchronously. Code built
on the Node platform does not follow the traditional model of
receive, process, send, wait, receive. Instead, Node processes
incoming requests in a constant event stack and sends small
requests one after the other without waiting for responses.
• This is a shift away from mainstream models that run larger, more
complex processes and run several threads concurrently, with
each thread waiting for its appropriate response before moving on.
• One of the major advantages of Node.js, according to its creator
Ryan Dahl, is that it does not block input/output (I/O). Some
developers are highly critical of Node.js and point out that if a
single process requires a significant number of CPU cycles, the
application will block and that the blocking can crash the
application. Proponents of the Node.js model claim that CPU
processing time is less of a concern because of the high number of
small processes that Node code is based on.
1.6.2 React JS-React is a JavaScript library for building user
interfaces. React has been designed from the start for gradual adoption,
and you can use as little or as much React as you need. Whether you
want to get a taste of React, add some interactivity to a simple HTML
page, or start a complex React-powered app, the links in this section will
help you get started.React is the most popular front-end JavaScript
library in the field of web development. It is used by large, established
companies and newly-minted startups alike (Netflix, Airbnb, Instagram,

Stacker’s
Page 12 of 125
and the New York Times, to name a few). React brings many advantages
to the table, making it a better choice than other frameworks like
Angular.js
1.6.3 MongoDb-
MongoDB is a source available crossplatform document-oriented
database program. Classified as a NoSQL database program,
MongoDB uses JSON-like documents with optional schemas.
MongoDB is developed by MongoDB Inc. and licensed under
the Server Side Public License (SSPL).
1.6.4 ExpressJS- Express.js, or simply Express, is a back-end web
application framework for Node.js, released as free and open-source
software under the MIT License. It is designed for building web
applications and APIs. It has been called the de facto standard server
framework for Node.js.
1.6.5 Type-Script- TypeScript is an open-source language that builds on
JavaScript, one of the world’s most used tools, by adding static type
definitions.
• Types provide a way to describe the shape of an object, providing
better documentation, and allowing TypeScript to validate that
your code is working correctly.
• Writing types can be optional in TypeScript because type
inference allows you to get a lot of power without writing
additional code.
1.6.6 Heroku cloud- Heroku is a container-based cloud Platform as a
Service (PaaS). Developers use Heroku to deploy, manage, and scale
modern apps. Our platform is elegant, flexible, and easy to use, offering
developers the simplest path to getting their apps to market. Heroku is
fully managed, giving developers the freedom to focus on their core
product without the distraction of maintaining servers, hardware, or
infrastructure. The Heroku experience provides services, tools,
workflows, and polyglot support—all designed to enhance developer
productivity.
Here are a few important ones:

Stacker’s
Page 13 of 125
• Our culture is collaborative, flexible, and fun.
• Our work provides opportunities for challenge and growth.
• Our team contributes expertise to a wide variety of open-source
projects.
• Our company invests in our professional and personal well-being.
• Our products are simply the best in their class.
1.6.7 Pusher-
Pusher Channels JavaScript Client. This Pusher Channels client library
supports web browsers, web workers, Node. Js and React Native. If
you're looking for the Pusher Channels server library for Node. Js,
use pusher-HTTP-node instead.
1.6.8 React Native-React Native (also known as RN) is a
popular JavaScript-based mobile app framework that allows you to build
natively-rendered mobile apps for iOS and Android. The framework lets
you create an application for various platforms by using the same
codebase.
React Native was first released by Facebook as an open-source project
in 2015. In just a couple of years, it became one of the top solutions used
for mobile development. React Native development is used to power
some of the world’s leading mobile apps, including Instagram,
Facebook, and Skype. We discuss these and other examples of React
Native-powered apps further in this post.
There are several reasons behind React Native’s global success. Firstly,
by using React Native, companies can create code just once and use it to
power both their iOS and Android apps. This translates to huge time and
resource savings.
Secondly, React Native was built based on React – a JavaScript library,
which was already hugely popular when the mobile framework was
released. We discuss the differences between React and React Native in
detail further in this section.
Thirdly, the framework empowered frontend developers, who could
previously only work with web-based technologies, to create robust,
production-ready apps for mobile platforms.
Interestingly, as with many revolutionary inventions, React Native was
developed as a response to...a big technological mistake.
1.6.9 Finnhub- Finnhub is an American company with people working
in New York, Mumbai, Sydney, and Ho Chi Minh to source, clean and

Stacker’s
Page 14 of 125
serve the right financial data to our customers. Finnhub makes use of
state-of-the-art machine learning algorithms to collect, clean, and
standardize data across global markets.
1.6.10 API- An application programming interface is a connection
between computers or between computer programs. It is a type of
software interface, offering a service to other pieces of software. A
document or standard that describes how to build such a connection or
interface is called an API specification.
1.6.11 WebRTC- WebRTC (Web Real-Time Communication) is a
technology that enables Web applications and sites to capture and
optionally stream audio and/or video media, as well as to exchange
arbitrary data between browsers without requiring an intermediary. The
set of standards that comprise WebRTC makes it possible to share data
and perform teleconferencing peer-to-peer, without requiring that the
user install plug-ins or any other third-party software.WebRTC consists
of several interrelated APIs and protocols which work together to achieve
this. The documentation you'll find here will help you understand the
fundamentals of WebRTC, how to set up and use both data and media
connections, and more.
1.7 Function-
➢ File sharing,
➢ Two-way audio & video,
➢ Activity Tracking,
➢ Chat functionality,
➢ Document Indexing,
➢ Open API to build your integrations,
➢ Desktop & mobile messaging
➢ Mobile integration,
➢ Online Workspace
➢ Internal Meeting
➢ Live Video Conferencing
➢ Stocks
➢ Booking trips

Stacker’s
Page 15 of 125
Chapter -2
Stacker’s App For
2.1 Stacker’s App Download – Using Google Play Store
Sometimes, what happens is that the users may face an error like “parse
error” or “error while parsing the package” while installing APK files
from third-party sites and markets. If such a thing occurs do not worry.
You can use the official method of the Google Play Store for the
Stacker’s Download. Yess friends! Stacker’s App is available for free
and also a price for the basic and premium versions respectively. If you
do not wish to download the APK file from any other third-party source
then you can use this method. In this method, we will see how users can
download the Stacker’s App for Android using Google Play Store.
Follow these steps to get through the process without any hassle:
• First, launch the Google Play Store App on your Android devices.
• Remember, it is better to upgrade your Play Store market to get the
latest versions of all the apps from it.
• You will have to link your Google account with the Google Play
Store to use the services. This is a mandatory step so get it done
first.
• Enter your Gmail credentials if you have an account or create a new
account from there directly.
• When the App Store loads, type “Stacker’s App” in the search bar
of the Play Store home screen.
• You will see several results for the app and you have to select the
latest version with the highest ratings.
• To help our readers, we have provided the link here. Simply click
on it and reach the app’s description page:
Stacker’s Download for Android using Google PlayStore
• Click the “Install” option and then allow the ‘permission message’
using account credentials to the App Store for the purchase.
• Wait for the app to download and install on your Android device.
• After completion of the process, select “open” or “finish” as per
your preference.

Stacker’s
Page 16 of 125
By following these simple steps you will be able to get the Stacker’s
Download for Android in no time. This is completely official as all
official and safe apps are published on the Google Play Store. Users can
download the free version first and then upgrade to the premium version
when they are comfortable with the app. And the best thing
about Mobdro APK is that we can enjoy the great videos.
2.2 Stacker’s APK Download for Android
“There are two types of people in the world: those who have never heard
of Stacker’s, and those who can’t imagine life without it.” This line has
been quoted by The Guardian paper’s editor. Also, the New York Times
editor has published a positive review regarding the Stacker’s App.
Hence we can imagine the greatness of this app.
Figure 2.1: Stackers’app for android
As a product for the organizations, Stacker’s plays a decent role in the
entire network’s communications. Now, we understand that Stacker’s

Stacker’s
Page 17 of 125
plays an important role in team collaboration. In this section of the
article, we will brief you on the steps for the Stacker’s download for
Android device users.
First, we will have to cross-check the compatibility of our Android
devices with Stacker’s APK version download. Here are the
requirements for this app:
• RAM should be higher than 512MB. (Preferable 1GB or more)
• Android OS should be version 4.1 and above for this version APK
file.
• Free disk space of about 100MB for lag-free operations.
So, after checking these requirements you are good to go on with the
download procedure. Now there is no one to stop you from getting the
APK file for your Android device. Now, to run the APK file that we will
provide to you in this article, you have to configure your Android device
first.
This is a mandatory step so that the Android device accepts the APK file
and installs the files in it. To do this you have to change some settings of
the mobile or tablet device. Follow these steps to correctly configure
your Android device:
• Go to the “Settings” menu and tap on “Application settings”
• Look for option “Unknown Settings” and there you will see a small
check box.
• If the box has been tick marked then leave it as it is.
• If the box has no tick, then tick-mark the box and save the settings.
• Finally, exit the settings menu.
By doing this, you will not endanger your device settings at all. So, don’t
worry. This change will allow the APK file to run and install the apps.
Now we will tell you the actual steps for the Stacker’s download and
installation on Android:
• Click on this link and download the APK file of the Stacker’s App
for Android devices:

Stacker’s
Page 18 of 125
Download Stacker’s APK for Android
• The file size is about 39.4 MB so please be patient while the file is
downloading.
• After downloading the APK file, run its setup and select the
“install” button.
• Allow the installation to complete and then proceed.
• When the App installation completes, select “open” or “finish” as
per choice.
In this manner, you will safely download the Stacker’s App for your
Android device. Our APK file download link is tested and we guarantee
that it is 100% safe and working. Though, for any reason, Android users
can download the app directly by another method that we will discuss
next.
2.3 Stacker’s Download for PC Windows Desktop
We know that when we work in an organization, people tend to use their
laptops and PCs more than their mobile devices. Even when the superiors
are around, it is not convenient to keep using the mobile phone as it
seems very unprofessional. Merging several advantages, we have come
up with this section to the Stacker’s download for PCs.
You may wonder why to use such an app on the PC right? Well, the
answer is that there are many advantages of the PC connection with this
app. Firstly, communication is regarding work or semi-professional so
mobiles are not optimal. Also, storage, battery, and compatibility allow

Stacker’s
Page 19 of 125
PC users to enjoy this app in much better ways.
Figure 2.2: Stacker’s App for Desktop
First, we will check the compatibility of the Windows PCs for the
Stacker’s Download:
• Runs on Windows 7 and higher versions.
• Requires about 200MB free disk space.
• 2GB RAM or higher is preferred for lag-free operations.
So, after checking with the requirements, you are ready for the download
procedure. We have two methods for our Windows PC users to get the
Stacker’s Download for their devices. Read about both the steps and
consider any of them for safe download of the app:
Method 1: Using official Stacker’s App
The Stacker’s developers have launched the official ‘.exe’ file for the
Windows PCs for its users. The version that we are providing is the basic
version. Users can later upgrade their version to premium through the
net. Follow these steps to download the Stacker’s App for your Windows
PC:
• Click on this link and download the .exe file of the Stacker’s app
for your Windows PCs:

Stacker’s
Page 20 of 125
Stacker’s Download for Windows PC
• The file size is about 60MB so please be patient with the download.
• After the download is complete, run its setup and initiate the
installation process.
• When the installation is complete, select the “finish” option.
• Now you can use the Stacker’s App on your Windows PC without
any restrictions.
Method 2: Using Bluestacks Application
The official version is quite sensible to use but if you have an Android
emulator and the Android APK file of the Stacker’s App then you do not
need to download anything for this method. Here are the steps for this
method:
• If you have the Bluestacks or Nox App Player on your PC then you
can carry out this method.
• Transfer your APK file from an Android device to your PC.
• Locate the APK on your PC and then right-click the tab on the file.
• Select the “open with..” option in the menu.
• Then select the Bluestacks option from the list of actions.
• The application will run the APK file and install it on the PC.
• After the process is complete, you can launch the Stacker’s App
from the “All Apps” section of the Bluestacks app.
So, now you have learned two different methods to download the
Stacker’s App for your Windows PC. Try any of them and we are
confident that both work well. The experience of using Stacker’s
Download app is unique and different from the mobile version.
2.4 Stacker’s App Download for Mac
If the Windows users can enjoy Stacker’s services then also the Mac
users can do that too. The Apple Mac OS also is compatible with the
Stacker’s Download. With the strong and amazing OS performance of
the Mac devices, the Stacker’s App is like a cherry on the ice cream.

Stacker’s
Page 21 of 125
Before we move to the steps for download, we would like to tell you
about the system requirements of the Mac OS with the Stacker’s
Download. Consider these points for the requirements:
• The Stacker’s App is compatible with Mac OS X 10.9 – 64-bit
processor.
• Free disk space to be around 200MB.
• It is preferable to have the updated version of the iTunes App
Store.
Check the requirement carefully as the app may not work if the version
is not compatible with your Mac OS device. Further, we have two
methods of the Stacker’s Download for Mac devices. Consider these two
methods and then try any of them as per your choice:
Method 1: Using official Stacker’s App
Similar to the Windows PC version, Stacker’s developers have also
prepared the Mac version for its user. This app file is compatible with
the Mac device. Follow these steps to successfully get through the
process:
• Click on this link to reach the download page of the ‘.dmg’ file of
the Stacker’s App for Mac devices:
Download Stacker’s for Mac
• When the page loads, click on the “Download” button and wait for
the process to complete.
• Next, locate the file in your downloads folder and click on the zip
file to reveal the Stacker’s icon.
• In the screen’s slide bar, drag and drop the Stacker’s App icon in
the Applications folder over there.
• Stacker’s will install on your Mac device.
• Finally, you will be able to use the Stacker’s App services on your
Mac device.

Stacker’s
Page 22 of 125
Method 2: Using Mac App Store
The App is also available on the Mac device’s iTunes App Store for the
users to download and install through purchase. The Mac App Store
provides the users with the latest version of the Stacker’s download so
that no feature remains hidden from the users. To perform this method,
simply follow these steps:
• Go to the iTunes App Store on your Mac device.
• As we said above, it is better to update iTunes first so that we get
the new version of Stacker’s App.
• You must have an Apple ID linked with the iTunes store to make
the purchases. If you do not have one then you cannot make any
purchase. To create an Apple ID first to proceed.
• When the iTunes App Store loads, type “Stacker’s App” in the
search bar and tap the search icon.
• The search results will display many versions for you but you will
select the one with the highest ratings.
• To help our readers, here is the link to the iTunes App Store
Stacker’s download page.
Download Stacker’s for Mac from iTunes
• Click on the “install” tab to initiate the installation process.
• After the installation is complete, go back to your device
download manager.
• Drag the Stacker’s icon to the Applications folder and then you are
ready for use.
Try both these sources or any one of them, whichever is convenient to
you. We assure you that these links work and will get you closer to the
Stacker’s Download for your Mac devices. Next, we will describe the
steps of the Stacker’s download for the iPhone and iPad devices.
2.5 Stacker’s for iPhone & iPad Download App
The iOS platform is the strongest in appeal and in terms of usage too it
delivers utmost performance. Because of its smooth and concurrent
Software, it is also famous for its usage in the corporate world. This
gives users a chance to implement the Stacker’s App with the iPhone

Stacker’s
Page 23 of 125
and iOS devices to give the perfect match.
Figure 2.3: Stacker’s app for ios
Stacker’s App was launched concerning iOS database compatibility as
it was considered to render more efficiency in the market. This belief
was also driven by the cause to make the app’s progress noticeable yet
not too quick. Stacker’s App is available for the iPhone and iPad
devices in the iTunes App Store.
We will guide you through the process as we have for the Android and
PC device proceedings. First, users must comply with the system
requirements of the iPhone devices for the Stacker’s App download.
Here are the points for the system requirements:
• The app works well with iOS 8.0 and above.
• Prefer an updated version of iTunes for download.
• The app is compatible with iPhone, iPad, and iPod touch.
With the requirements under control, you can now proceed to the
download and installation process. For our readers, we will describe the
process for downloading the Stacker’s App from the iTunes App Store.
Here are the steps to follow to get the procedure done correctly:
• On your iPhone and iPad device, Go to iTunes App and launch it.

Stacker’s
Page 24 of 125
• Remember, you must have a valid Apple ID to use the services of
the App Store.
• When the App Store loads, type “Stacker’s App” in the search
box and tap on the search icon.
• The search results will be displayed on the screen. You will have
to choose the latest version with the highest ratings.
• To help out our readers, follow this link to automatically reach the
Stacker’s App download page on the iTunes App Store.
Stacker’s Download for iPhone/iPad from iTunes App Store
• On this page, select the “Get” tab and purchase the Stacker’s App
on your device.
• You can purchase the premium or the basic (free) version of the
app as per your preference.
• Allow the installation and then wait for the process to finish.
• After successful installation, exit the App Store.
• Press the home screen button to return to the home screen and
swipe the screens till you find the Stacker’s App icon with the rest
app icons.
• Launch the Stacker’s App by tapping on it.
This way you will be able to get the Stacker’s App download on your
iPhone or iPad devices. The app size is about 116MB so be sure to have
about 300MB free space in the memory. The Stacker’s App for iOS
devices supports several different languages like English, Spanish,
German, Japanese, Italian. Download the app using these steps and link
and join the networking for your organization
2.6 How to use Stacker’s app?
Now that we have downloaded the amazing app, we will begin
to use it. But how?! The app has a simple user interface and is
quick to adapt, yet we will describe to our readers how the
different integrations work and how the starters can become
comfortable with the app in less time.
The complexity of the app is due to its ability to perform many different
tasks for the user. Since there is so much that the users can get from the
app, they tend to confuse it with the functionality of the app.

Stacker’s
Page 25 of 125
Figure 2.4: Stacker’s logo
Here is a list of a few tips and tricks for the user to start with the Stacker’s
App use:
• Using the Web service of the Stacker’s App, users can first create
their main account and then integrate it with the company or
organization.
• Users can feed their other accounts and access by authorizing
Stacker’s to connect with the other services and link you up.
• If you are using Google’s file collaboration tools like Google drive,
simply drag a file into it and the Stacker’s App will ask permission
to permanently join the link or just for a single file. Select as per
your choice to make the integration work as often as you want to.
• To enable Two-factor authorization, users must go to “Your
Account” and then click on the option for 2-factor Authorization.
A series of steps will be listed out which you will follow and
provide the necessary information too. After completing the setup,
a list of ten backup codes will appear, and you have to grant access
to Stacker’s App by using the ten backup codes.
• Users can switch teams within the same Stacker’s integration. To
achieve this just tap on “Switch team” and then sign in with another
team. The Stacker’s App Manager will prompt up the save option
to remember all the teams. Select the “save” option so that you can
use any integration and receive all updates from any team.
• Users can change notifications and set up channel settings as per
their choice from the appropriate menu.
• Use standard and special key codes to make communication easy.
for instance, when addressing a topic or message to someone, use
the @ symbol followed by the name of the person.

Stacker’s
Page 26 of 125
These few tips will get you through the start-up process for the Stacker’s
App. There are many different options to make use of for the user which
are clearly defined in the menu. The internet web support is also always
there to guide users for specific functions of the Stacker’s App.
• Features of Stacker’s App
The Stacker’s App finds its use for team collaboration, employee
intranet, the discovery of human resources, and many more subjective
expectations. It is an app for all kinds of communication across an
organizational network. The Stacker’s App is the best option for free
extensive collaboration network communication as it works with few
restrictions but handles most of the work with dignity.
Figure 2.5: Stacker’s connected app
Early starters require a good channel involvement and Stacker’s
Download is the correct decision for them. The app provides its user with
various features through which the teams can collaborate and
communicate to expand their networks in an organization.
In this section of the article, we are going to describe the awesome
features that the Stacker’s Download App has to offer. Here is a
descriptive list of the features of the Stacker’s App:

Stacker’s
Page 27 of 125
• The Stacker’s App is freemium. This means that it has both types
of services i.e. free and there is a premium version with few extra
capabilities.
• It is compatible with Android, iOS, Windows, and Mac OS.
Hence it is very flexible with any OS platform.
• It is easy to use and adapt for regular virtual communication.
• Supports the discovery of human resources for the company. The
fact that people use the app for discussing employment relating
issues can lead to advancement in the industry through a proper
communication channel.
• The app is well integrated for any team member to join the
channel.
• It retains the privacy of the internal discussions and members too.
The integration is strictly within the organization’s channel.
• Allows file and data sharing through the networks. Though
sometimes authorization is required to send information to
members outside the organization.
• The app allows near to about 100 integrations through several
mass media networks like Skype, Trello, Rocketbolt, etc.
• It allows users to search for information, people, and
organizational resources through its network channels.
• Users can open their organizational integration channel using
Stacker’s API services.
• It allows communication over a frame. Users can communicate
using Stacker’s online service on PC to mobile Stacker’s app
anytime they want.
• Also, audio and video linking channels are open to users for best
communication.
• Regular messaging and informal communication is also
acceptable in the network.
• Allows use of Hashtags and @mentions to stipulate the messages.
• Encrypted with Chat functionalities like messaging, emoticon use,
notification alerts, etc.
All these features are in one app. Yeah! that’s right people! You too can
now enjoy the services of the Stacker’s download App. We are confident
that many of our readers are ready for the download procedures and
hence we will quickly brief you on that now.
✓ Stacker’s v/s HipChat – Ultimate Comparison

Stacker’s
Page 28 of 125
Both of these apps have been around for some time and people are going
more rookie on how they compare. The Stacker’s App is said to be the
modern 21st Century App for organizational communications whereas
HipChat also is today’s business-based communication app. So, the
question arises that which one is better?
To help out our readers and make them understand which is better, we
have listed down some important factors and assigned the winner traits
to the deserving app. Here are the points for your consideration:
2.7 General Description:
o The Stacker’s App offers its user the ability to communicate
through real-time messaging, archive control, and file
transfer through information exchange using several
integrations with the app. On the other hand, the HipChat
App is a communication channel app that allows Business
related chatting within the organization and through different
integrations that it supports.
2.7.1 Subscription packages and pricing:
o Stacker’s App offers four types of plans which are ‘Free’
version with no limits in time, the ‘Standard’ version for
$6.67 for an annual subscription per user, ‘Plus’ version for
$12.50 per user on an annual subscription, and the
‘Enterprise’ version billing for $48 monthly. The HipChat
App has the following plans; HipChat basic for free and
HipChat Plus for $2 per month per user with extra
integration features.
2.7.2 OS Support:
o Both the apps support all the common major platforms but
HipChat has an extra point for supporting Linux OS which
the Stacker’s App cannot support.
2.7.3 Features:
o This is the main and major factor that leads to the victory of
one of these apps. When we review the features of the
Stacker’s App and the HipChat App, the major finding is

Stacker’s
Page 29 of 125
that Stacker’s has more features than the HipChat App. We
will mention the additional features of the Stacker’s App that
win the points; Flexible file browsing, Dozens of app’s
support for integration, Extensive search even in files for
specific entries, offers Google and Apple
emoticons, Snippets, etc...
So, the terms for deciding the winner are based on the betterment of the
app and how worth it is with the features it provides. The verdict here
ends with the Stacker’s App as the winner. Also, many organizations
prove this fact by voting the Stacker’s App as the better app.
2.8 Stacker’s App Alternatives
Despite the awesomeness of the Stacker’s App, it still has few flaws
due to which it does not get the right uplift that is it needs. The choice
for the alternatives arises if you have tried the Stacker’s App and see
that it does not suit your organization. Also, the free plan exists for
Stacker’s but limits the search feature and other premium services. For
few reasons that prevail in the market regarding the Stacker’s App,
people prefer alternatives to the Stacker’s Download. There are many
alternatives in the market to the Stacker’s App as of now. In this
section of the article, we are going to discuss some of the best
alternatives to the Stacker’s download for your devices.
Here is a list with a short description of Stacker’s app alternatives for
you to consider The Zoom Developer Platform is an open platform
that allows third-party developers to build applications and integrations
upon Zoom’s video-first unified communications platform. Leverage
APIs, Webhooks, and SDKs to build custom applications and super-
power your business with a powerful collaboration suite. r:
• HipChat: HipChat as we have discussed the comparison for both
too. When the average rating for Stacker’s App is 4.5 stars (from
five stars), HipChat scores the rating of 4 stars. This proves its
equivalency with the Stacker’s App. HipChat is also an amazing
app for organizational communication and formal integration.
• Bitrix24: This app is the best free project management software
that organizations use all over the world. It has several Stacker’s

Stacker’s
Page 30 of 125
App features and a few more of its own. The only flaw with this
app is the lack of durability and also its Library styled navigation.
• Mattermost: Mattermost is Stacker’s compatible integration app
which offers similar services as the Stacker’s App. The app is an
open-source alternative to the Stacker’s download and can
perform several features and integrations like the Stacker’s App.
The texting tools of the Mattermost App allow the user to edit text
fonts, calligraphy and also involve threaded commenting for users
to apply.
There are several more alternatives in the market like Samepage, Hall,
eXo Platform, Team Tracker App, Skype, etc. You can look up the
internet for more options and understand more about our suggested
alternatives too. We hope these alternatives will provide you with the
experience which the Stacker’s App has missed out on.
Finally, in conclusion to this article on Install & Download Stacker’s
Download for Android, iOS & PC Windows & Mac Desktop
App. we would like to thank our readers for completing this article. We
hope that the information provided in the article was up to the mark and
useful to our readers. If you wish to send your feedback or in case of
query, please write to us at Stacker’s Download App.

Stacker’s
Page 31 of 125
Chapter 3
Stacker’s Services
3.1 Integrated Apps
1. Zoom- The Zoom Developer Platform is an open platform that
allows third-party developers to build applications and
integrations upon Zoom’s video-first unified communications
platform. Leverage APIs, Webhooks, and SDKs to build custom
applications and super-power your business with a powerful
collaboration suite.
The Zoom Marketplace introduces your product or service to
millions of users who all interact daily with Marketplace apps and
integrations - as well as developers like you who are building to
serve them.
Figure.3.1: Connected Apps
2. Office 365 Apps-
Figure.3.2: Outlook calendar

Stacker’s
Page 32 of 125
➢ Outlook Calendar
Sync your status, respond to invites, and see your schedule.
Keep your calendar top of mind without leaving Stacker’s with the
Outlook Calendar app. Spend less time managing meeting invites
and keep coworkers up to date with your presence.
With Outlook Calendar you can:
➢ Receive and respond to meeting invites
➢ Update your Stacker’s status automatically
➢ Join video calls from meeting reminders
Send emails to Stacker’s
➢ Bring emails out of siloed inboxes and into Stacker’s where you
can quickly collaborate with your team. Stacker’s for Outlook is a
helpful sidekick that sits alongside your inbox so you can quickly
send emails to Stacker’s.
➢ With Stacker’s for Outlook you can:
➢ Send emails to channels or direct messages
➢ Include attachments or a note if needed
➢ Share OneDrive files
➢ Keep everyone in the loop by sharing OneDrive files in Stacker’s
with the push of a button. Teammates can preview your file or
search for them inside of Stacker’s—even as you work on the file.
➢ With Microsoft OneDrive you can:
➢ Share OneDrive files with a click
➢ Preview OneDrive files from Stacker’s
➢ Find OneDrive files in search

Stacker’s
Page 33 of 125
3)GoogleWorkspace
• Google calendar
• Google mail(Gmail)
• Google Drive
• Google Share
4) GitHub Enterprise Server
This app was made by a member of the Stacker’s team to help connect
Stacker’s with a third-party service; these apps may not be tested,
documented, or supported by Stacker’s in the way we support our core
offerings.
5)Microsoft Teams
Figure.3.3: Microsft teams logo
Start a Teams video call right from Stacker’s Launch a call in Stacker’s
with the /teams-calls slash command. Before joining, get a glance at
who’s already on the call and when the call kicked off. Jump from
Stacker’s straight into a meeting.
Gone are the days of fumbling for meeting links—join Teams meetings
directly from calendar reminders in Stacker’s, using the Outlook or
Google Calendar apps. Customize call settings for your team
Set Microsoft Teams Calls as your default calling provider, so anyone
can start a video call in Teams with a quick click of the phone button in
Stacker’s.

Stacker’s
Page 34 of 125
6)Voice Message
Figure 3.4: Voice message
Fully functional FREE version One solution for any platform: Mac /
Win / iOS / Android / Linux.
No external integration is needed! Just run /VM command in Stacker’s
Use /VM command in a channel or direct message where you want to
send the voice message.Privacy policy: https://talk-
talk.me/privacy#voice #voicemail #audio #record #recording
8) Airbnb
Airbnb is the new way to make travelers, bookers, and bottom liners
successful, productive, and happy. By bringing Airbnb into Stacker’s,
your travelers can instantly reach our travel advisors on any device
where Stacker’s is enabled. An active company Airbnb.com account is
required to book travel. How it works:
• Ask your Stacker’s administrator to make the Airbnb app available to
your travelers by clicking the “Add to Stacker’s” button
• Travelers can then just type any message into the app to reach our
travel advisors for assistance.
• It's that easy.
9)Salesforce-
Support for custom objects across Sales Cloud and Service Cloud, in
both Classic and Lightning experiences.
Teams can now: Stay in the know
Customize your public or private channels to notify you or your team

Stacker’s
Page 35 of 125
about new and updated records, like when an opportunity stage changes
or a quote is approved. Keep everyone on track
Use /salesforce [search terms] to find and preview all standard and
custom Salesforce objects, all without leaving Stacker’s.Extend
collaboration across sales and service.
Easily send Salesforce records directly to Stacker’s channels, and link
key customer interactions and internal conversations with related
Salesforce records.
Figure 3.5: Salesforce
10)AdobeXD
Connect your Stacker’s workspace(s) and share artboards and XD links
seamlessly with individuals and channels on Stacker’s from Adobe XD
directly. Provide channel members with rights to access private links
proactively without leaving Adobe XD.
Figure.3.6 Adobe XD logo

Stacker’s
Page 36 of 125
11)Adobe Creative Studio
Figure 3.7: Adobe creativity studio
Adobe Creative Cloud for Stacker’s lets you easily share and preview
files from your Creative Cloud storage or applications, like XD,
Photoshop, Illustrator, and InDesign. With this integration, your team
can:
• Share the assets saved in Creative Cloud storage into any
conversation.
• Reply to comments that are made on XD links and CC files (Ps, AI,
IDD files stored in CC) directly from Stacker’s and have them posted
to the files.
• Subscribe Ps, AI, IDD, and XD files saved in Creative Cloud to a
channel in Stacker’s to keep you and your team up to date on comments
and updates that happen on the subscribed files.
• Add collaborators to your private XD prototypes and design specs.
If you use Stacker’s in Japanese, Spanish, German, French, or English,
the Adobe Creative Cloud app will send messages and respond to you
in your preferred language.
You will need to be a free-trial user or have an active subscription to
Creative Cloud to get the most out of this integration.

Stacker’s
Page 37 of 125
Chapter-4
Design
4.1 Set up a workflow in Stacker’s
Workflows are automated multi-step tasks or processes – no coding
required! – that start in your Stacker’s workspace. They can run directly
in Stacker’s or connect with other tools and services.
By default, any member of a Stacker’s workspace on a paid subscription
can use Workflow Builder to create custom workflows. However,
owners and admins can choose to restrict access to Workflow Builder. If
you don’t see this option, ask an owner or admin for more information.
4.1.1 What you’ll learn
• How to choose a trigger for your workflow
• How to customize your workflow depending on the trigger
you select
• How to find and open Workflow Builder
✓ Set up your workflow
While you’ll first be presented with picking a name for your workflow,
the more important decision you’ll need to make is how your workflow
will start.
• Choose a trigger
The trigger that you pick for your workflow determines how it will
start. Workflows are channel-specific and can only be used in the
channel that you choose.

Stacker’s
Page 38 of 125
Trigger How it works
Shortcuts menu
Your workflow starts when someone selects it
from the shortcuts menu.
New channel
member
Your workflow starts automatically when
someone joins the channel.
Emoji reaction
Your workflow starts automatically when
someone in the channel adds a certain emoji
reaction to a message.
Scheduled date and
time
Your workflow starts automatically at a set date
and time.
Webhook*
Your workflow starts automatically when a
custom webhook sends a web request to
Stacker’s from another app or service.
*Creating workflows with webhooks requires some technical expertise.
Workflows in the shortcuts menu are easily accessible by members of a
channel and can be used at any time. Workflows with other triggers that
launch automatically are more contextual; you may want to consider
the context of the action that launched them, and keep in mind that
people may not be expecting them.
• Customize your workflow
Once you’ve chosen a trigger, you’ll pick the channel where the
workflow will be available and be prompted to further customize your
workflow. What you need to do will depend on the trigger that you
chose.
• Put what you’ve learned into practice
Follow the steps below to open Workflow Builder and set up your
workflow.

Stacker’s
Page 39 of 125
Step 1: Open Workflow Builder
1. From your desktop, click on your workspace name in the top
left.
2. Select Tools from the menu.
3. Select Workflow Builder, which will open in a new
window.
Step 2: Choose your workflow name and trigger
1. From Workflow Builder, click Create in the top right.
2. Enter a name for your workflow, then click Next.
3. Click Select next to the trigger that you'd like to use.
Step 3: Finish workflow setup
Follow the steps for the trigger you selected to choose a channel for your
workflow and finish the setup.
ShortcutNew | channel | memberEmoji |Date & time
1. Select a channel from the drop-down menu.
2. Add a short name for your workflow that will be visible in
the shortcuts menu.
3. Click Next.
5 Add a custom workflow icon

Stacker’s
Page 40 of 125
1. Open your workflow in Workflow Builder.
2. Click the Settings tab at the top of the screen.
3. Click Edit next to your workflow icon.
4. Select Choose File to upload a file.
5. Crop your icon if you like.
6. Click on Save.

Stacker’s
Page 41 of 125
4.2 Flow Chart
Channel Notifications
You can be notified of messages on the channels you are part of unless you mute a
channel.

Stacker’s
Page 42 of 125
That's the first thing Stacker’s checks in their flowchart.
Check if the user has muted the channel
Do not disturb (DnD)
The next thing they check is if the user has enabled DnD. Users can enable it at any
time or set up a schedule to toggle DnD automatically.
Stacker users can mute their notifications

Stacker’s
Page 43 of 125
However, Stacker’s also offers the sender an option to override your DnD setting,
thereby resulting in the next section of the Flowchart
Check if the user has setup DnD and if the send overrode DnD
If you are not in DnD or if DnD was ignored by the sender, Slack checks if this
message is a @channel, @everyone, or @here mention and if you have disabled
notifications for those (for this channel).
You can stop @channel/@here from being mentions for you
This is checked in the next part of the flowchart
Check what kind of mention this is and if it should create a notification
Notice the part about this message being part of a thread? Stacker lets you set a global
preference for notifying you of replies to threads
See this part of the Flowchart (the leftmost branch leads you to the big RED NO).
The channel preference overrides the global thread notification preference
Mobile-specific notification preferences

Stacker’s
Page 44 of 125
Before we go on any further, let us talk about Stacker’s ability to set you set up a
different preference for mobile notifications. They allow you to do this globally, as
well as per channel. It looks something like this
Assuming that the notification candidate has made it so far (and so have you!),
Stacker’s checks for mobile-specific notification preference for this channel. If none
has been set up, they check if you have a preference globally.
Check if a mobile-specific notification preference exists for this channel or globally
If you have chosen to not be notified of anything, it's a straight line to the big RED
NO. However, if you have chosen to be notified, based on your preferences, you may
lead down to the big GREEN YES. However, you may reach here on the desktop or
the mobile. In the Flowchart they talk about checking for "past mobile push timing
threshold" but I wasn't able to find this as an option in their UI. Perhaps this is
something check for in their backend without it being a user-adjustable property.

Stacker’s
Page 45 of 125
4.3USE case diagram

Stacker’s
Page 46 of 125
4.4 Modal Flow Diagram
1. A user interacts with an app entry point. This sends an interaction
payload to the app.

Stacker’s
Page 47 of 125
2. With the trigger id from the payload, and a newly composed initial
view (view A), the app uses views. open to initiate a modal.
3. The user interacts with an interactive component in view A. This
sends another interaction payload to the app.
4. The app uses the context from this new payload to update the
currently visible view A with some additional content.
5. The user interacts with another interactive component in view A.
Another interaction payload is sent to the app.
6. This time the app uses the context from the new payload to push a
new view (view B) onto the modal's view stack, causing it to appear
to the user immediately. View A remains in the view stack but is no
longer visible or active.
7. The user enters some values into input blocks in view B and clicks the
view's submit button. This sends a different type of interaction
payload to the app.
8. The app handles the view submission and responds by clearing the
view stack.
4.5 E R Diagram
• Users can create channels or join the existing channels
• Workspace is for sharing files and work live on any task
• # denotes Channels
• Users can store data or send and receives data in the form
message

Stacker’s
Page 48 of 125
4.6 Data Flow Diagram
• For Client-side
• For Server

Stacker’s
Page 49 of 125
Chapter -5
Code
1. Stacker’s Frontend
• App.js--------------------------------------------------
import React from 'react';
import './App.css';
import Header from './Header';
import Sidebar from './Sidebar';
import { BrowserRouter as Router, Switch, Route } from "react-
router-dom";
import Chat from './Chat'
import Login from './Login';
import { useStateValue } from './StateProvider';
function App() {
const [{ user }] = useStateValue();
console.log(user)
return (
<div className="app">
<Router>
{!user ? (
<Login />
) : (
<>
<Header />
<div className="app__body">
<Sidebar />
<Switch>
<Route path="/room/:roomId">
<Chat />
</Route>
<Route path="/">
<h1>Welcome To Stacker's</h1>
</Route>
</Switch>
</div>
</>

Stacker’s
Page 50 of 125
)}
</Router>
</div>
);
}
export default App;
• App.css-------------------------------------------------
body{
--Stacker’s-color: #ce1717cb;
overflow: hidden;
}
.app__body{
display: flex;
height: 100vh;
}
Chat.Js----------------------------------------------------------------
---
import React, { useState, useEffect } from 'react'
import "./Chat.css"
import { useParams } from "react-router-dom"
import { InfoOutlined, StarBorderOutlined } from '@material-ui/icons';
import db from './firebase'
import Message from './Message'
import ChatInput from './ChatInput';
const Chat = () => {
const { roomId } = useParams();
const [roomDetails, setRoomDetails] = useState(null);
const [roomMessages, setRoomMessages] = useState([]);
useEffect(() => {
if (roomId) {
db.collection("rooms")
.doc(roomId)
.onSnapshot((snapshot) => setRoomDetails(snapshot.data()));
}

Stacker’s
Page 51 of 125
db.collection("rooms")
.doc(roomId)
.collection("messages")
.orderBy("timestamp", "asc")
.onSnapshot((snapshot) =>
setRoomMessages(snapshot.docs.map((doc) => doc.data()))
);
}, [roomId])
return (
<div className="chat">
<div className="chat__header">
<div className="chat__headerLeft">
<h4 className="chat__channelName">
<strong> #{roomDetails?.name} </strong>
{/* <strong>#general</strong> */}
<StarBorderOutlined />
</h4>
</div>
<div className="chat__headerRight">
<p><InfoOutlined /> Details</p>
</div>
</div>
<div className="chat__messages">
{roomMessages.map(({ message, timestamp, user, userImage
}) => (
<Message
message={message}
timestamp={timestamp}
user={user}
userImage={userImage}
/>
))}
</div>
<ChatInput channelName={roomDetails?.name}
channelId={roomId} />
</div>
)

Stacker’s
Page 52 of 125
}
export default Chat
• Chat.css
.chat {
flex: 0.7;
flex-grow: 1;
overflow-y: scroll;
padding-bottom: 150px;
}
.chat__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid lightgray;
}
.chat__channelName {
display: flex;
text-transform: lowercase;
}
.chat__channelName>.MuiSvgIcon-root {
margin-left: 10px;
font-size: 18px;
}
.chat__headerRight>p {
display: flex;
font-size: 14px;
}
.chat__headerRight>p>.MuiSvgIcon-root {
margin-right: 5px !important;
font-size: 16px;
}

Stacker’s
Page 53 of 125
ChatInput--------------------------------------------------------------------------
-----
import React, { useState } from 'react'
import "./ChatInput.css";
import db from "./firebase";
import firebase from "firebase";
import { useStateValue } from "./StateProvider";
function ChatInput({ channelName, channelId }) {
const [input, setInput] = useState("");
const [{ user }] = useStateValue();
const sendMessage = (e) => {
e.preventDefault();
if (channelId) {
db.collection("rooms").doc(channelId).collection("messages").add({
message: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
user: user.displayName,
userImage: user.photoURL,
});
}
setInput("");
};
return (
<div className="chatInput">
<form>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder={`Message
#${channelName?.toLowerCase()}`}
/>
<button type="sumbit"
onClick={sendMessage}>SEND</button>
</form>
</div>
)

Stacker’s
Page 54 of 125
}
export default ChatInput
• ChatInput.css-------------------------------------------
------------------
.channelInput {
border-radius: 20px;
}
.channelInput > form {
position: relative;
display: flex;
justify-content: center;
}
.chatInput > form > input {
position: fixed;
bottom: 30px;
width: 60%;
outline: none;
border: 1px solid gray;
border-radius: 3px;
padding: 20px;
}
.chatInput > form > button {
height: 0;
width: 0;
border: none;
background-color: transparent;
}
• Header.js------------------------------------------------
-----------
import React from 'react'
import './Header.css'
import { Avatar } from '@material-ui/core'
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import SearchIcon from '@material-ui/icons/Search';

Stacker’s
Page 55 of 125
import NotificationsActiveIcon from '@material-
ui/icons/NotificationsActive';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import { useStateValue } from './StateProvider';
import DuoIcon from '@material-ui/icons/Duo';
import AppsIcon from '@material-ui/icons/Apps';
import AddIcCallIcon from '@material-ui/icons/AddIcCall';
import AccountBalanceIcon from '@material-
ui/icons/AccountBalance';
import MeetingRoomIcon from '@material-ui/icons/MeetingRoom';
import MyLocationIcon from '@material-ui/icons/MyLocation';
import MapIcon from '@material-ui/icons/Map';
const Header = () => {
const [{user}]=useStateValue()
return (
<div className='header' >
<div className="header__left">
<Avatar className="header__avatar"
src={user?.photoURL} alt={user?.displayName} />
<AccessTimeIcon />
<DuoIcon />
<NotificationsActiveIcon />
<AddIcCallIcon />
<AccountBalanceIcon />
<MapIcon />
</div>
<div className="header__search">
<SearchIcon />
<input placeholder="Let' Search" />
</div>
<div className="header__right">
<HelpOutlineIcon />
<AppsIcon />
<MeetingRoomIcon />
<MyLocationIcon />
</div>
</div>

Stacker’s
Page 56 of 125
)
}
export default Header
--------------------------------Header.css------------------
.header {
display: flex;
flex:auto;
padding: 10px 0;
background-color: var(--Stacker’s-color);
color: rgb(19, 17, 18);
}
.header__left {
flex: 2px;
display: flex;
margin-left: 20px;
}
.header__left>.MuiSvgIcon-root {
margin-left: auto;
margin-right: 60px;
}
.header__search {
flex: 0.4;
background-color: #faf3fa;
text-align: center;
display: flex;
padding: 0 50px;
color: gray;
border: 1px solid gray;
border-radius: 6px;
}
.header__search>input {

Stacker’s
Page 57 of 125
border: none;
text-align: center;
min-width: 35vw;
outline: none;
}
.header__right {
flex: 0.3;
display: flex;
align-items: flex-end;
}
.header__right>.MuiSvgIcon-root {
margin-left: auto;
margin-right: 20px;
}
Message.js---------------------------------------------------
import "./Message.CSS";
function Message({ message, timestamp, user, userImage }) {
return (
<div className="message">
<img src={userImage} alt="" />
<div className="message__info">
<h4>
{user}{" "}
<span className="message__timestamp">
{new Date(timestamp?.toDate()).toUTCString()}
</span>
</h4>
<p>{message}</p>
</div>
</div>
)
}
export default Message

Stacker’s
Page 58 of 125
• Message.css--------------------------------
.message {
display: flex;
padding: 20px;
}
.message>img {
height: 50px;
width: 50px;
object-fit: contain;
}
.message_info {
padding-left: 15px;
}
.message__timestamp {
color: gray;
font-weight: 300;
font-size: 13px;
}
• Index.js--------------
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { StateProvider } from './StateProvider';
import reducer, { initialState } from './reducer';
ReactDOM.render(
<React.StrictMode>
<StateProvider initialState={initialState} reducer={reducer} >
<App />

Stacker’s
Page 59 of 125
</StateProvider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
service-worker.unregister();
Index.css
*{
margin: 0;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier
New',
monospace;
}
• Login.js-----------------------------------

Stacker’s
Page 60 of 125
import "./Login.css";
import { Button } from "@material-ui/core";
import { auth, provider } from "./firebase";
import { useStateValue } from "./StateProvider";
import { actionTypes } from "./reducer";
import logo from './logo.svg';
const Login = () => {
const [state, dispatch] = useStateValue();
const signIn = () => {
auth.signInWithPopup(provider)
.then((result) => {
dispatch({
type: actionTypes.SET_USER,
user: result.user,
});
})
.catch((error) => {
alert(error.message);
});
};
return (
<div className="login" >
<div className="login__container">
<img src={logo} className="login_logo" alt="logo" />
<h1>Stacker's The Way to Connect</h1>
<p>Stacker's</p>
<Button onClick={signIn}>Sign in with Google</Button>
</div>
</div >
)
}
export default Login
• Login.css-------------------------------------
.login {
height: 100vh;

Stacker’s
Page 61 of 125
background: #967878;
display: grid;
place-items: center;
}
.login__container {
padding: 100px;
text-align: center;
background-color: rgb(253, 252, 252);
box-shadow: 0 1px 3px rgba(0, 0, 0, 12), 0 1px 2px rgba(0, 0, 0, 24);
}
.login__container>img {
animation: login_logo-spin infinite 20s linear;
object-fit: contain;
height: 100px;
margin-bottom: 40px;
}
.login__container>button {
margin-top: 50px;
text-transform: inherit !important;
background-color: #7242e2 !important;
color: white;
}
• Sidebar.Js-------------------------------------------
import React,{useEffect,useState} from 'react';
import './Sidebar.css';
import FiberManualRecordIcon from '@material-
ui/icons/FiberManualRecord';
import CreateIcon from "@material-ui/icons/Create";
import SidebarOption from "./SidebarOption";
import InsertCommentIcon from "@material-ui/icons/InsertComment";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts"
import BookmarkBorderIcon from "@material-
ui/icons/BookmarkBorder";
import PeopleAltIcon from "@material-ui/icons/PeopleAlt";

Stacker’s
Page 62 of 125
import AppsIcon from "@material-ui/icons/Apps";
import FileCopyIcon from "@material-ui/icons/FileCopy";
import ExpandLessIcon from "@material-ui/icons/FileCopy";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import AddIcon from "@material-ui/icons/Add";
import {useStateValue} from "./StateProvider";
import axios from './axios';
import Pusher from "pusher-js";
const pusher = new Pusher('f5c2d6e97f8a17ae6aac', {
cluster: 'ap2'
});
const Sidebar=()=>{
const[channels,setChannels]=useState([]);
const[{user}]=useStateValue();
const getChannelList=()=>{
axios.get('./get/channelList').then((res)=>{
setChannels(res.data)
})
}
useEffect(()=>{
getChannelList()
const channel = pusher.subscribe('channels');
channel.bind('newChannel', function(data) {
getChannelList()
});
},[])
return(
<div className="sidebar">
<div className="sidebar_header">
<div className="sidebar_info"> <hr></hr>
<h1>Stacker's</h1>
<hr></hr>
<h3>
<FiberManualRecordIcon />
{user?.displayName}
</h3>
</div>
<CreateIcon/>

Stacker’s
Page 63 of 125
</div>
<hr />
<SidebarOption Icon={InsertCommentIcon} title="Threads" />
<SidebarOption Icon={InboxIcon} title="Mentions & reactions
. " />
<SidebarOption Icon={DraftsIcon} title="Saved items" />
<SidebarOption Icon={BookmarkBorderIcon} title="Channel
browser" />
<SidebarOption Icon={PeopleAltIcon} title="People & user
groups " />
<SidebarOption Icon={AppsIcon} title="Apps" />
<SidebarOption Icon={FileCopyIcon} title="File browser" />
<SidebarOption Icon={ExpandLessIcon} title="Show less" />
<hr />
<SidebarOption Icon={ExpandMoreIcon} title="Channels" />
<SidebarOption title='YouTube' />
<SidebarOption title='BBDEC' />
<hr />
<SidebarOption Icon={AddIcon} addChannelOption title="Add
Channel" />
{
channels.map(channel => (
<SidebarOption title={channel.name} id={channel.id} />
)
)
}
</div>
)
}
export default Sidebar
----------------------------Sidebar.css--------------------------------------------
.sidebar {
color: rgb(253, 253, 253);
background-color: var(--Stacker’s-color);
border-top: 1px solid #49274b;
max-width: 260px;
padding: 10px 0px 10px 10px;

Stacker’s
Page 64 of 125
}
.sidebar>hr {
margin-top: 10px;
border: 1px solid #49274b;
}
.sidebar__header {
display: flex;
border-bottom: 1px solid #49274b;
padding: 13px;
}
.sidebar__info {
flex:auto;
}
.sidebar__info>h2 {
font-size: 25px;
font-weight: 900;
}
.sidebar__info>h3 {
display: flex;
font-size: 13px;
font-weight: 400;
}
.sidebar__info>h3>.MuiSvgIcon-root {
font-size: 14px;
margin-top: 5px;
margin-right: 2px;
color: green;
}
.sidebar__header>.MuiSvgIcon-root {

Stacker’s
Page 65 of 125
padding: 8px;
color: #49274b;
font-size: 18px;
background-color: white;
}
• SideBar.Js--------------------------------------------------------------
-------------------
import './SidebarOption.css'
import { useHistory } from "react-router-dom";
import db from './firebase'
const SidebarOption = ({ Icon, id, addChannelOption, title }) => {
const history = useHistory();
const selectChannel = () => {
if (id) {
history.push(`/room/${id}`)
} else {
history.push(title);
}
};
const addChannel = () => {
const channelName = prompt("Please enter the channel name");
if (channelName) {
db.collection('rooms').add({
name: channelName
})
}
};
return (
<div className="sidebarOption" onClick={addChannelOption ?
addChannel : selectChannel}>
{Icon && <Icon className='sidebarOption__icon' />}
{Icon ? (
<h3>{title}</h3>

Stacker’s
Page 66 of 125
) : (
<h3 className="sidebarOption__channel">
<span className="sidebarOption__hash"> # </span>
{title}
</h3>
)}
</div>
)
}
export default SidebarOption
SidebarOption.css
.sidebarOption{
margin-top: auto;
display: flex;
font-size: 15px;
padding-left: 8px;
cursor: pointer;
}
.sidebarOption:hover{
opacity: 2.9;
background-color: #340e36;
}
.sidebarOption__icon{
padding: 15px;
font-size: 20px !important;
}
.sidebarOption__channel{
padding: 10px 0;
}
.sidebarOption__hash{
padding-left: 15px;
}

Stacker’s
Page 67 of 125
.sidebarOption > h3{
font-weight: 500;
}
Card.js----------------------------------
import './Card.css'
function Card({ src, title, description, price }) {
return (
<div className='card'>
<img src={src} alt="" />
<div className="card__info">
<h2>{title}</h2>
<h4>{description}</h4>
<h3>{price}</h3>
</div>
</div>
)
}
export default Card
Card.css---------------------------------
.card {
margin: 10px;
overflow: hidden;
box-shadow: 0px 6px 18px -9px rgba(0, 0, 0, 0.75);
transition: transform 100ms ease-in;
cursor: pointer;
}
.card:hover {
transform: scale(1.07);
}
.card > img {
object-fit: fill;
min-width: 300px;
min-height: 200px;

Stacker’s
Page 68 of 125
width: 100%;
}
.card__info {
margin-top: -9px;
padding: 20px;
padding-top: 20px;
border: 1;
}
.card__info > h2 {
font-size: 18px;
font-weight: 600;
}
.card__info > h4 {
font-size: 14px;
font-weight: 300;
margin-top: 8px;
margin-bottom: 8px;
}
• Search.js-----------------------------------------
import React, {useState} from 'react';
import './Search.css';
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
import { DateRangePicker } from "react-date-range";
import { Button } from "@material-ui/core";
import PeopleIcon from "@material-ui/icons/People";
import { useHistory } from "react-router-dom";
// DATE PICKER COMPONENT
function Search() {
const history = useHistory();
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const selectionRange = {

Stacker’s
Page 69 of 125
startDate: startDate,
endDate: endDate,
key: "selection",
};
function handleSelect(ranges) {
setStartDate(ranges.selection.startDate);
setEndDate(ranges.selection.endDate);
}
return (
<div className='search'>
<DateRangePicker ranges={[selectionRange]}
onChange={handleSelect} />
<h2>
Number of guests <PeopleIcon />
</h2>
<input min={0} defaultValue={2} type="number" />
<Button onClick={() => history.push('/search')}>Search
Airbnb</Button>
</div>
)
}
export default Search
Search.css-----------------------
.search {
position: absolute;
top: 35px;
left: 25%;
width: 100vw;
}
.search > h2 {
display: flex;
width: 559px;
padding: 10px;

Stacker’s
Page 70 of 125
position: absolute;
left: 0;
top: 380px;
}
.search > input {
width: 539px;
padding: 20px;
position: absolute;
left: 0;
height: 30px;
top: 420px;
border: none;
}
.search > input:focus {
outline-width: 0;
}
.search > button {
position: absolute;
left: 0;
top: 480px;
text-transform: inherit !important;
background-color: #ff7779;
color: white;
width: 579px;
}
.search > button:hover {
color: #ff7779;
}
Package.json--------------------------------
{
"name": "stackers-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@capacitor/core": "^2.4.5",

Stacker’s
Page 71 of 125
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"aws": "0.0.3-2",
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.4",
"finnhub": "^1.2.1",
"firebase": "^8.2.0",
"firestore": "^1.1.6",
"heroku": "^7.47.6",
"ionic": "^5.4.16",
"mapbox-gl": "^2.2.0",
"pusher": "^4.0.1",
"pusher-js": "^7.0.2",
"react": "^17.0.1",
"react-chartjs-2": "^2.11.1",
"react-dom": "^17.0.1",
"react-native": "^0.63.4",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [

Stacker’s
Page 72 of 125
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React
App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {
"@capacitor/cli": "^2.4.5"
},
"author": "",
"license": "ISC"
}
-----------------------Stocks Integration-----------------------------------------
-----
• Stocksapp.js-----------------------------------------
import "./stocksApp.css";
import Header from "./Header";
import NewsFeed from "./Newsfeed";
import Stats from "./Stats";
function stocksApp() {
return (
<div className="app">
<div className="app__header">
<Header />
</div>
<div className="app__body">
<div className="app__container">

Stacker’s
Page 73 of 125
<NewsFeed />
<Stats />
</div>
</div>
</div>
);
}
export default App;
Stocksapp.css---------------------------------------------------
* {
margin: 0;
}
body {
background-color: black;
}
.app {
/* height: fit-content; */
}
.app__header {
}
.app__body {
/* make background black later */
margin: 0;
display: grid;
z-index: -1;
}
.app__container {

Stacker’s
Page 74 of 125
display: flex;
padding-top: 36px;
width: 1024px;
box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.7);
color: white;
z-index: 50;
}
Article.js-------------------------------------------
import React, { useState, useEffect } from "react";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import FlashOnIcon from "@material-ui/icons/FlashOn";
import {key} from "./api";
import axios from "axios";
const BASE_URL =
"https://finnhub.io/api/v1/news?category=general";
function Article(props) {
const [article, setArticle] = useState({});
useEffect(() => {
if (props) {
return axios
.get(BASE_URL)
.then((res) => {
console.log(res.data, 'res data');
let article = res.data[0];
setArticle(article);
})
.catch((error) => {
console.error("Error", error.message);
});
}
},[]);
return (
<div className="newsfeed__articles">

Stacker’s
Page 75 of 125
<div className="newsfeed__article__title">
<FlashOnIcon />
<div className="newsfeed__article__source">
<p>{article.headline}</p>
</div>
<MoreHorizIcon />
</div>
<div className="newsfeed__article__content">
<div className="newsfeed__article__paragraph">
<p>
{article.summary}
</p>
</div>
<div className="newsfeed__article__image">
<img src={article.image} width="125" height="75"/>
</div>
</div>
</div>
);
}
export default Article;
• stocks Header.js-----------------------------------
import React from "react";
import SearchOutlined from "@material-ui/icons/SearchOutlined";
import "./Header.css";
import Logo from './robinhood.svg'
function Header() {
return (
<div className="header__wrapper">
<div className="header__logo">
<img src={Logo} width={25}/>
</div>
<div className="header__search">
<div className="header__searchContainer">
<SearchOutlined />
<input placeholder="Search" type="text" />
</div>
</div>

Stacker’s
Page 76 of 125
<div className="header__menuItems">
<a href="/">Free Stocks</a>
<a href="/">PortFolio</a>
<a href="/">Cash</a>
<a href="/">Messages</a>
<a href="/">Account</a>
</div>
</div>
);
}
export default Header;
• LineGraph.js-------------------------------------------
--------------
import React, { useEffect, useState } from "react";
import { Line } from "react-chartjs-2";
const options = {
legend: {
display: false,
},
hover: {
intersect: false
},
elements: {
line: {
tension: 0
},
point: {
radius: 0,
},
},
maintainAspectRatio: false,
tooltips: {
mode: "index",
intersect: false,
callbacks: {
},
},
scales: {

Stacker’s
Page 77 of 125
xAxes: [
{
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
ticks: {
display: false,
}
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
display: false,
},
},
],
},
};
function LineGraph({ casesType }) {
const [data, setData] = useState({});
useEffect(() => {
let data = [];
let value = 50;
for(var i = 0; i < 366; i++){
let date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value += Math.round((Math.random() < 0.5 ? 1 : 0) *
Math.random() * 10);
data.push({x: date, y: value});
}
setData(data)

Stacker’s
Page 78 of 125
}, []);
return (
<div>
{data?.length > 0 && (
<Line
data={{
datasets: [
{
type: 'line',
backgroundColor: "black",
borderColor: "#5AC53B",
borderWidth: 2,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#5AC53B',
pointHoverBorderColor: '#000000',
pointHoverBorderWidth: 4,
pointHoverRadius: 6,
data: data,
},
],
}}
options={options}
/>
)}
</div>
);
}
export default LineGraph;
• Newsfeed.Js----------------------------------------
import "./Newsfeed.css";
import Article from "./Article";
import { Avatar } from "@material-ui/core";

Stacker’s
Page 79 of 125
import FlashOnIcon from "@material-ui/icons/FlashOn";
import LineGraph from "./LineGraph";
import Chip from '@material-ui/core/Chip';
import TimeLine from './TimeLine'
function Newsfeed() {
const [popularTopics, setTopics] = useState([
"Technology",
"Top Movies",
"Upcoming Earnings",
"Crypto",
"Cannabis",
"Healthcare Supplies",
"Index ETFs",
"Technology",
"China",
"Pharma",
]);
const [seed, setSeed] = useState("");
useEffect(() => {
setSeed(Math.floor(Math.random() * 5000));
}, []);
return (
<div className="newsfeed">
<div className="newsfeed__container">
<div className="newsfeed__chart__section">
<div className="newsfeed_price_asset">
<h1> $114,656,84</h1>
<p> $142.90 (-0,12) Today </p>
</div>
<div className="newsfeed__chart">
<LineGraph />
<TimeLine />
</div>
</div>
<div className="newsfeed__buying__section">

Stacker’s
Page 80 of 125
<h2> Buying Power</h2>
<h2> $4.11</h2>
</div>
<div className="newsfeed__market__section">
<div className="newsfeed__market__box">
<p> Markets Closed</p>
<h1> Happy Thanksgiving</h1>
</div>
</div>
<div className="newsfeed__popularlists__section">
<div className="newsfeed__popularlists__intro">
<h1>Popular lists</h1>
<p>Show More</p>
</div>
<div className="newsfeed_popularlists_badges">
{popularTopics.map((topic) => (
<Chip
className="topic__badge"
variant="outlined"
label={topic}
avatar={<Avatar
src={`https://avatars.dicebear.com/api/human/${topic}.svg`}
/>}
/>
))}
</div>
</div>
</div>
</div>
);
}
export default Newsfeed;
• Newsfeed.css-------------------------------------------
----

Stacker’s
Page 81 of 125
.newsfeed {
flex: 0.7;
display: flex;
flex-direction: column;
}
.newsfeed__container {
flex: 1;
font-size: 12px;
}
.newsfeed__chart__section {
}
.newsfeed__buying__section {
display: flex;
border-bottom: 1px solid #3b4754;
}
.newsfeed__market__section {
margin: 12px 0;
padding: 0;
}
.newsfeed__market__box {
height: 10vh;
padding: 20px;
border-radius: 4px;
border: 1px solid #31363A;
}
.newsfeed__market__box p {
color: #7B858A;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;

Stacker’s
Page 82 of 125
margin-bottom: 8px;
}
.newsfeed__popularlists__section {
height: fit-content;
}
.newsfeed__popularlists__intro {
display: flex;
}
.newsfeed__popularlists__intro > p {
font-weight: bold;
color: orange;
}
.newsfeed_popularlists_badges {
display: flex;
flex-wrap: wrap;
}
.newsfeed_popularlists_badges .topic__badge {
border: 1px solid #31363A;
color: white;
margin-right: 8px;
margin-bottom: 8px;
}
.newsfeed__articles__section {
}
.newsfeed__articles__header {
}

Stacker’s
Page 83 of 125
.newsfeed__articles {
}
.newsfeed__article__title {
display: flex;
}
.newsfeed__article__source {
font-weight: bold;
flex: 1;
}
.newsfeed__article__content {
display: flex;
align-items: top;
padding-right: 30px;
}
.newsfeed__topmovers__section {
height: fit-content;
}
.newsfeed__topmovers__intro__details {
display: flex;
color: darkgrey;
}
.newsfeed__topmovers__intro__details p:nth-child(2) {
font-weight: bold;
color: orange;
}
.newsfeed__topmovers__cards__container {

Stacker’s
Page 84 of 125
justify-content: space-evenly;
display: flex;
}
.newsfeed__topmovers__card {
color: white;
margin-left: 12px;
width: 90px;
height: 120px;
border: 1px solid lightgray;
border-radius: 5px;
display: flex;
}
.newsfeed__topmovers__card__name {
}
.newsfeed__topmovers__card__numbers {
color: #66ff00;
}
Stats.js-----------------------------------------------
import "./Stats.css";
import StatsRow from "./StatsRow";
import { key } from "./api";
import { db } from "./firebase";
const BASE_URL = "https://finnhub.io/api/v1/quote?symbol=";
const KEY_URL = `&token=${key}`;
const testData = [];

Stacker’s
Page 85 of 125
function Stats() {
const [stocksData, setStocksData] = useState([]);
const [myStocks, setMyStocks] = useState([]);
const getMyStocks = () => {
db
.collection('myStocks')
.onSnapshot(snapshot => {
let promises = [];
let tempData = []
snapshot.docs.map((doc) => {
promises.push(getStocksData(doc.data().ticker)
.then(res => {
tempData.push({
id: doc.id,
data: doc.data(),
info: res.data
})
})
)})
Promise.all(promises).then(()=>{
setMyStocks(tempData);
})
})
}
const getStocksData = (stock) => {
return axios
.get(`${BASE_URL}${stock}${KEY_URL}`)
.catch((error) => {
console.error("Error", error.message);
});
};
useEffect(() => {
const stocksList = ["AAPL", "MSFT", "TSLA", "FB", "BABA",
"UBER", "DIS", "SBUX"];
getMyStocks();
let promises = [];

Stacker’s
Page 86 of 125
stocksList.map((stock) => {
promises.push(
getStocksData(stock)
.then((res) => {
testData.push({
name: stock,
...res.data
});
})
)
});
Promise.all(promises).then(()=>{
console.log(testData);
setStocksData(testData);
})
}, []);
return (
<div className="stats">
<div className="stats__container">
<div className="stats__header">
<p> Stocks</p>
<MoreHorizIcon />
</div>
<div className="stats__content">
<div className="stats__rows">
{myStocks.map((stock) => (
<StatsRow
key={stock.data.ticker}
name={stock.data.ticker}
openPrice={stock.info.o}
volume={stock.data.shares}
price={stock.info.c}
/>
))}
</div>
</div>
<div className="stats__header stats-lists">
<p>Lists</p>
</div>

Stacker’s
Page 87 of 125
<div className="stats__content">
<div className="stats__rows">
{stocksData.map((stock) => (
<StatsRow
key={stock.name}
name={stock.name}
openPrice={stock.o}
price={stock.c}
/>
))}
</div>
</div>
</div>
</div>
);
}
export default Stats;
Stats.css------------------------------------
.stats {
flex: 0.3;
display: flex;
}
.stats__container {
flex: 1;
background-color: #1E2023;
border-radius: 5px;
border: 1px solid #42494D;
}
.stats__content {
font-size: 13px;
}

Stacker’s
Page 88 of 125
.stats__header {
display: flex;
font-size: 16px;
border-bottom: 1px solid #42494D;
font-weight: 500;
}
.stats-lists {
height: 52px;
border-top: 1px solid #42494D;
}
.row {
display: flex;
height: 60px;
padding: 0 24px;
cursor: pointer;
}
.row:hover {
background-color: #31363A;
}
.row__intro > h1 {
font-size: 16px;
font-weight: bold;
}
.row__intro > p {
font-size: 12px;
}
.row__numbers {
text-align: end;

Stacker’s
Page 89 of 125
font-weight: 500;
}
.row__price {
}
.row__percentage {
color: #5AC53B;
}
Timeline.js---------------------------------------------------
import "./Timeline.CSS";
function TimeLine() {
return (
<div className="timeline__container">
<div className="timeline__buttons__container">
<div className="timeline__button">LIVE</div>
<div className="timeline__button">1D</div>
<div className="timeline__button active">1W</div>
<div className="timeline__button">3M</div>
<div className="timeline__button">1Y</div>
<div className="timeline__button">ALL</div>
</div>
</div>
)
}
export default TimeLine
Timeline.css----------------------------------------------------
import "./Timeline.CSS";
function TimeLine() {

Stacker’s
Page 90 of 125
return (
<div className="timeline__container">
<div className="timeline__buttons__container">
<div className="timeline__button">LIVE</div>
<div className="timeline__button">1D</div>
<div className="timeline__button active">1W</div>
<div className="timeline__button">3M</div>
<div className="timeline__button">1Y</div>
<div className="timeline__button">ALL</div>
</div>
</div>
)
}
export default TimeLine
Wishlist.js
function Wishlist({ stocks }) {
return (
<div>
</div>
)
}
Stocks api.js----------------------------
const key = "bv1uf4v48v6o5ed6h88g";
export { key };
Stocks package.js-----------------------------
{

Stacker's

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Stacker's

Semelhante a Stacker's (20)

Último

Último (20)

Stacker's