A PROJECT REPORT

on

“End-to-End Social Media App”

Submitted to

KIIT Deemed to be University

In Partial Fulfilment of the Requirement for the Award of

BACHELOR’S DEGREE IN
Computer Science Engineering

BY

Sarthak Singh - 2005608

UNDER THE GUIDANCE OF

Harish Kumar Patnaik

 SCHOOL OF COMPUTER ENGINEERING

KALINGA INSTITUTE OF INDUSTRIAL TECHNOLOGY

BHUBANESWAR, ODISHA - 751024

May 2023
 KIIT Deemed to be University
School of Computer Engineering
Bhubaneswar, ODISHA 751024

CERTIFICATE
This is certify that the project entitled

“End-to-End Social Media

App“submitted by
Sarthak Singh 2005608

is a record of bonafide work carried out by them, in the partial fulfilment of the
requirement for the award of Degree of Bachelor of Engineering (Computer Sci-
ence & Engineering OR Information Technology) at KIIT Deemed to be university,
Bhubaneswar. This work is done during the year 2022-2023, under our guidance.

Date: 04/05/2023

Project Guide: Harish Kumar Patnaik

 Acknowledgements

We are profoundly grateful to Harish Kumar Patnaik of Affiliation for his

expert guidance and continuous encouragement throughout to see that this project
meets its target since its commencement to its completion.

Sarthak Singh
 ABSTRACT

The reason why people turn towards social media is because they want to
connect with both people and ideas. Through our project we have tried to do so
by designing a simple, seamless and interactive platform.

A website where people may communicate with one another and exchange ideas
and experiences is the Social Media App initiative. Users have the ability to set
up profiles, publish updates, like or dislike other users' postings, and follow or
unfollow other users. To ensure that only authorised users may access specific
pages and functions, the app also incorporates security features.

With a simple and contemporary style, the website is made to be simple to use
and comprehend. Users can do a real-time update on user behaviours, receive
notifications, and search and filter content. The software can be modified to
meet various demands because it is flexible and adaptive in design.

The Social Media App is, all things considered, a fantastic tool for individuals
to connect and share their lives with one another in a secure setting.

● Keyword: Real-time, Flexible, Secure, Adaptable, Interaction, User-friendly,

Notification, Minimalistic design
Contents
1 Introduction 1

1.1 Purpose 1
1.2 Objective 1
2 Basic Concepts 3

3 Problem Statement 7

3.1 Project Planning 7

3.2 Project Analysis (SRS) 9
3.3 System Architecture(UML) 11
4 Implementation 14

4.1 Methodology 14
4.2 Result Analysis / Screenshots 26
5 Conclusion and Future Scope 32

5.1 Conclusion 32
5.2 Future Scope 32
References 34

35

Plagiarism Report 36
1. Introduction

1.1 PURPOSE:
The proposed end-to-end social media application's goal is to give
users a seamless and engaging platform for social networking and
communication. It was constructed utilising Firebase as the
backend platform. The purpose of the programme is to effectively
link people so they may exchange material, communicate with one
another, and create communities based on common interests.

Through a visually appealing and simple user interface, easy

navigation, and seamless performance, the social media app will
also work to improve user experience.Create and manage user
profiles, submit content, participate in discussions, like and
comment on content are all capabilities that the app will offer. Its
responsive and scalable architecture will make it simple to expand
and modify to meet changing user needs and specifications.

To ensure the success and efficiency of the social networking app,

Firebase will act as a dependable backend platform for storing and
managing user data, delivering real-time updates, and facilitating
smooth user interactions.

1.2 OBJECTIVE:
To develop a fully functional social media app using React and
Firebase that allows users to post, view, and interact with content,
while providing a seamless and engaging user experience.

Create and employ a user interface that is simple to understand and

visually appealing.

To guarantee that users can register, sign in, and access their
accounts safely, provide authentication and authorization services.

To facilitate effective data storage and retrieval, create a database

schema and integrate it with Firebase.

Implement features for commenting on and liking posts as well as

for creating, editing, and deleting them.

1
 To guarantee that users receive updates as they happen, implement
real-time updates using Firebase's real-time database.

Make sure the application is user-friendly and functions properly

on both desktop and mobile platforms.

To make sure the programme is stable and bug-free, extensively

test and debug it.

Deploy the app to a production environment, and monitor its

performance and usage to identify and address any issues that arise

2
2. Basic Concepts:

2.1. What is Cloud Computing:

The on-demand, pay-as-you-go distribution of IT resources through the
internet is known as cloud computing. You may get technological
services like processing power, storage, and databases from cloud
providers like Amazon Web Services (AWS), Google Cloud, and
Microsoft Azure on an as-needed basis rather than purchasing, operating,
and maintaining physical data centers and servers.

2.2. Who is using cloud Computing:

A wide range of use cases, including data backup, disaster recovery,
email, virtual desktops, software development and testing, big data
analytics, and customer-facing web apps, are being used by businesses of
every size, kind, and sector.

2.3 Benefits of cloud computing:

a. Agility:

You can quickly develop and create almost anything you can dream of
thanks to the cloud, which makes it simple to access a wide range of
technologies. From infrastructure services like computation, storage, and
databases to Internet of Things, machine learning, data lakes, and
analytics, you can swiftly spin up resources as you need them.

b. Elasticity:

With cloud computing, you can handle future peaks in company activity
without having to overprovision resources now. As an alternative, you
just supply the resources that you truly require. As your company's needs
change, you can scale these resources up or down to instantly increase
and decrease capacity.

3
2.4 Deploy Globally in minutes:

With the cloud, you can quickly deploy globally and expand to new
geographical areas. For instance, AWS offers infrastructure all around the
world, allowing you to quickly deploy your application in several physical
locations. Applications run more quickly and provide a better experience when
placed close to users.

The cloud platform that we used for our project(Social-Media-Application) is

Firebase.

About Firebase:

Google’s Firebase is a collection of backend cloud computing services and

application development frameworks. It supports a wide range of apps,
including Android, IOS, javascript, Node.js, java, Unity, PHP, and C++, and
hosts databases, services, authentication, and integration.

The firebase services that we used are as follows:

a. Firebase Authentication:
Most apps use Firebase authentication to recognise the identity of their
users. This authentication solution includes backend services, simple
Firebase SDKs, and pre-build UI frameworks for authenticating users in
your project.

b. Cloud Firestore:
You probably will want to store your data on the cloud regardless of the
type of app you are creating. If your customers want to access the same
data from multiple devices or want to share their data with others for
engaging in-app collaboration, you may want to accommodate their
requests. In this case , you could get help from the Cloud Firestore.

c. Cloud Storage:

4
 A robust user-friendly, and reasonably priced object storage solution
designed for Google Scale is Cloud Storage for Firebase. Regardless of
network condition, the Firebase SDKs for cloud Storage gives Google
Security to file uploads and downloads for your firebase apps.

d. Firebase Hosting:

For developers, Firebase Hosting offers production-quality online content

hosting. You may easily launch web applications and send both static and
dynamic content to a worldwide CDN(content delivery network) with a
single command. To create and host microservices in Firebase, you may
also use Cloud Run or Cloud Functions in conjunction with Firebase
Hosting.

Apart from Firebase our Tech Stack includes:

I. React.js:
It is an open-source javaScript library for creating user interfaces. It was
developed by Facebook, because of its ease of use, adaptability, and
reusability, developers frequently utilise it. React.js enables developers to
construct reusable UI components and updates the UI quickly in response
to data changes using a virtual DOM. It is one of the most widely used
options for creating online applications.

II. Node.js:
Developers may run JavaScript code outside of a web browser thanks to
the open source Node.js runtime environment. It offers a potent collection
of APIs for creating server side applications and is built on top of the
Google V8 Javascript engine. The event-driven design, high scalability,
and a non-blocking I/O paradigm of Node.js make it the perfect platform
for developing real-time and data-intensive apps. It has a sizable and
vibrant developer community and is now a well-liked option for
developing web servers, APIs, and microservices.

5
III. Chakra UI:

Chakra Ui is an open-source React component library, it offers a selection

of UI components that may be customised for use in creating web apps. It
adheres to a design philosophy that places a strong emphasis on usability,
responsiveness, and adaptability. The Chakra UI offers a wide range of
pre-built elements including buttons, forms, and typography in addition to
more sophisticated capabilities like theming and support for dark mode. It
is simple to use and works nicely with well-known React frameworks like
Gatsby and Next.js.

6
3. Project Specifications:

3.1 Project Planning:

The schedule, team roles and responsibilities, available resources, and

risk management techniques are all described in the Social Media App project
plan. The project will be carried out in stages, with each phase building on the
one before it. A fully functional social media application will be the end result,
giving users a place to publish information and communicate with one another.

3.1.1 Project Scope

The Social Media App is a web-based application designed to

provide a platform for users to share posts and to interact with each
other. The application is built on the FERN stack, which includes
MongoDB, Express, React, and Node.js. The application will be
hosted on the cloud using service Firebase.

3.1.2 Project Timeline

The project timeline for the Social Media App will be divided into
several phases as follows:

Phase 1: Planning and Design

Define project scope and requirements (4 days)

Create UI/UX design and wireframes ( 1 week)

Phase 2: Backend Development

Setup backend environment ( 5 days)

Develop authentication and profile management features (1
week 4 days)
Implement post and comment management features (1 week
5 days)

Phase 3: Frontend Development

Setup frontend environment (1 week )

Develop UI components and integrate with backend (2
weeks)

7
 Phase 4: Testing and Deployment

Test application functionality and performance (1 weeks)

Deploy application to production environment (5 days)

3.1.3 Team Roles and Responsibilities

Backend Developer: responsible for setting up and developing
backend functionality, including authentication, profile
management, and post management.

Frontend Developer: responsible for developing UI components

and integrating them with the backend.

UI/UX Designer: responsible for creating the UI/UX design and

wireframes.

3.1.4 Resources:
FERN Stack (Firebase, Express, React, Node.js)

Firebase Authentication and Hosting

UI/UX Design Tools (e.g., Figma, Sketch)

Testing Tools (e.g., Jest, Mocha)

3.1.5 Risk Management:

The project's potential hazards and their effects will be identified
and assessed.
Plans for mitigation will be created to lessen the effects of
identified risks.
Throughout the project, risk management will be an ongoing
process.

8
3.2 PROJECT ANALYSIS (SRS)

Users of the Social Media App will be able to exchange material,

communicate with one another, and create communities on a user-friendly
and effective platform. For maximum performance and dependability, the
application will be developed using the most recent web technologies and
hosted on cloud-based services. Users' ability to connect with one another
will be made possible by the programme, which will also offer scalability.

3.2.1 Introduction

The Social Media App is a web-based programme created to give

users a place to share content and communicate with one another.
The FERN stack, which consists of Express, React, and Node.js, is
used to construct the application. The application will be hosted on
the cloud using Firebase as service.

3.2.2 Functional Requirements

3.2.2.1 Authentication
Users will be required to sign up and log in to use the
application. The authentication process will be done through
Firebase Authentication. Passwords will be encrypted and stored
securely in Firebase. Users will have the option of registering with
their email-IDs.

3.2.2.2 Profile Management

Users will be able to edit their profiles, add and update their
profile picture. Users will be able to view the profiles of other
people.

3.2.2.3 Post Management

Users will be able to create, like and delete posts. Users will
be able to comment on other users' posts and like them.

3.2.2.4 Security
The application will be secured through Firebase Security
Rules, which will ensure that users can only access their own data
and not that of other users.

9
 3.2.3 Non-functional Requirements
a) Performance
A big number of people should be able to utilise the application
simultaneously. The application should load quickly and be speed-
optimised.

b) Usability
The software should be simple to use and navigate. The
application's functionality should be made clear to users through the user
interface design.

c) Reliability
The software must function correctly and always be accessible. In
the event of a system breakdown, the application should have a backup
system in place.

d) Scalability
The application should be scalable and should be able to handle an
increasing number of users.

3.2.4.Constraints

i) Technology Stack:
The application will be built on the FERN stack.

ii) Hosting:
The application will be hosted on cloud-based service -Firebase.

iii) Budget:
The application will be developed within the budget constraints.

10
3.3 System Architecture:

I. Activity Diagram:

11
II. Use-Case Diagram:

12
III. Sequence Diagram:

13
4. Implementation
4.1. Methodology
We created a directory chat-app, then we created a React app inside it using the
command “yarn create react app.”, which creates a react app in the current
directory.

“yarn create react app.” is a command used to create a new React application
with a pre-configure set of tools and dependencies.

Yarn is package manager which manages the application’s dependencies,

Whereas ‘create-react-app’ automates the setting up of a new React project.

I. App.js:

It is a javascript file that is the main component of a React application. It is

where we typically define the structure and behaviour of our application’s user
interface.

It allows us to write HTML-like code within our javaScript files using JSX
syntax.

14
 Fig. Code screenshot of app.js
II. Route.js:

In the ‘lib’ subdirectory we have created routes.js which handles all the routes
for our project and also has the record of all the components to render when a
certain route is triggered.

Fig. Code screenshot of route.js

III. Login.js:

Login.js file is created inside a subdirectory ‘auth’ inside the components

directory. This file handles all the frontend for the Login functionality and also
calls the ‘useLogin’ function from the custom

15
 Fig. Code screenshot of login.js

hook auth.js which handles the backend for Logging in.

Fig. Code screenshot of useLogin function

IV. Setting up Firebase:

We created a new project in Firebase.

16
 Fig. Creating a new Firebase project

Fig. Cloud usage in Firebase

Fig. Code screenshot of firebase.js

17
V. Custom Hooks:
React Hooks are simple JavaScript functions that we can use to isolate the
reusable part from a functional component. Custom react hooks which handles
the CRUD functionalities.

a) auth.js:

This custom hook contains functions which handle all the operations related to
user authorization (Login,Register,Logout).

b)posts.js:

This custom hook contains functions which handle all the operations related to
posts, like adding posts, liking posts and deleting posts.

Fig. Code screenshot of posts.js

c) comments.js

This custom hook contains functions which handle all the operations related to
the comments like adding comments, arranging the comments according to their
date, deleting comments.

18
 Fig. Code screenshot of comment.js

d) users.js:

This custom hook contains functions which handle all the operations related to
the user, like updating the profile of the user.

Fig. Code screenshot of users.js

VI. Comments:
The Comments subdirectory contains all the js files which handles the frontend
related to Comments.

19
Comment.js: This file defines the Comment component, which is used to render
an individual comment. The component receives a comment prop, which
contains the data for the comment (such as the user who posted it and the text of
the comment). The Comment component renders the comment's data in a
specific format.

Fig. Code screenshot of comments.js

CommentList.js: This file defines the CommentList component, which is used

to render a list of comments. The component receives a comments prop, which
is an array of comment data. The CommentList component maps over the
comments array and renders an individual Comment component for each
comment.

20
 Fig. Code screenshot of comments.js

Overall, these files work together to provide comment functionality for the
social media app. The CommentSection component is used on a post page to
display the comments, and the CommentForm component is used to create new
comments. The CommentList and Comment components are used to render the
list of comments and each individual comment respectively.

VII. Dashboard:

The file `dashboard/index.js` exports a component called `Dashboard`, which is

the main component for the dashboard page of a social media app built with
React. The `Dashboard` component renders two child components: `NewPost`
and `PostsLists`.

Overall, `dashboard/index.js` provides the main page for the social media app,
with the ability to create new posts and display a list of existing posts.

21
 Fig. Code screenshot of Dashboard

VIII. Layout:

a) Sidebar.js:

The code in Sidebar.js is responsible for rendering the sidebar component of the
application's layout.

Fig. Code screenshot of sidebar.js

22
b) Index.js:

It is responsible for rendering the overall layout of the application, including the
navigation, content, and sidebar.

Fig. Code screenshot of index.js

IX. Post:

a)Actions.js:

post/Actions.js is a React component that renders the actions available for a

particular post. The component displays the number of likes and comments a
post has, and provides the ability to toggle a like, go to the comments section for
the post, and delete the post if the user is the owner of the post.

23
 Fig. Code screenshot of actions.js

X. Profile:

The Profile component is the main component, which renders the user's profile
picture, name, and bio, as well as a set of tabs for displaying the user's posts,
liked posts, and followers/following lists.

EditProfile component allows the user to edit their profile information, such as
their profile photo.

24
 Fig. Code screenshot of EditProfile.js

25
4.2. Result Analysis:

We have hosted our web app using Firebase’s hosting service and found out that
all its functionalities are all working correctly.

We are attaching the necessary screenshots below.

I. Login/Register:

We can see that our database in the firebase is getting updated simultaneously.

II. Adding/Deleting Posts:

26
The new post has been added to the Firestore simultaneously.

III. Adding/Deleting comments:

27
The comment has been added to the database.

28
 IV. Liking a Post:

We can see one like has been added.

29
 V. Changing our dp:

As we can see the profile has been updated.

30
 VI. Logging Out:

We can see that the user has been logged out successfully and a ‘Successfully
logged out’ message appears.

31
5. Conclusion and Future Scope:

5.1 Conclusion:

As a result, the Social Media Application project is a skillfully developed

application that enables users to connect and communicate with one another in a
comfortable and user-friendly social media environment. The application has
been designed with the FERN stack and integrates a number of technologies to
guarantee its speed, security, and usability.

The main functions of the programme, such as the creation of user accounts, the
creation ,editing profile have all been executed to a high degree. Because the
project is well-documented, other developers can easily understand it and
contribute to its ongoing development.

The Social Media Application project is an encouraging illustration of how

technology might be utilised to unite individuals in an online community
overall. The project team should be recognised for their diligence, careful
attention to detail, and dedication to creating an application that satisfies
industry standards.

Every software project has an opportunity for development, and the Social
Media Application is no exception. But with continued assistance and
improvement, this project could develop into a well-liked and useful tool for
social media users.

5.2 Future Scope:

Looking ahead, there are a number of possible areas where the Social Media
Application project might evolve and improve. These regions include, among
others:

1. Adding advanced search capability to the programme might make it simpler

for users to identify the information they are interested in and find new people

32
to follow. Advanced search options include looking for particular sorts of
content or persons.

2. Integration with other social media platforms: The application's reach might
be increased and its use for users who use several social media platforms could
be increased by integrating it with other well-known social media sites, such as
Twitter or Instagram.

3. Greater privacy and security: Although the app already has a number of
security measures in place, there is always opportunity for advancement. The
security of the programme might be improved by incorporating features like
two-factor authentication or stronger password encryption.

5. Development of mobile applications: By creating a mobile application

version of the social media application, users who primarily use social media on
their mobile devices may find it easier to use.

The Social Media Application project has a lot of room to expand and improve
in the future. These improvements may increase users' use and enjoyment of the
programme while also assisting it in standing out in the crowded social media
market.

33
6. References:
1. https://react.dev/learn

2. https://nodejs.org/en/docs

3. https://chakra-ui.com/docs/components

4. https://firebase.google.com/docs/

5. https://www.youtube.com/watch?v=1rc2zYqexLI

6. https://www.youtube.com/watch?v=K8YELRmUb5o&t=10s

34
35
 Plagiarism-Report
by Research Experts - Turnitin Report

Submission date: 04-May-2023 05:16AM (UTC-0400)

Submission ID: 2083923182
File name: RE-2022-118978.pdf (1.54M)
Word count: 3643
Character count: 19844
RE-2022-118978-plag-report
ORIGINALITY REPORT

15 %
SIMILARITY INDEX
12%
INTERNET SOURCES
1%
PUBLICATIONS
10%
STUDENT PAPERS

PRIMARY SOURCES

1
www.coursehero.com
Internet Source 5%
www.worldleadershipacademy.live
2 Internet Source 2%
3 Submitted to Asia Pacific University College of
Technology and Innovation (UCTI) 2%
Student Paper

4
Submitted to The University of the South
Pacific 1%
Student Paper

Submitted to Sunway Education Group

5 Student Paper 1%
6 Submitted to Queen Mary and Westfield
College 1%
Student Paper

Submitted to Roehampton University

7 Student Paper 1%
Submitted to CSU, San Jose State University
8 Student Paper 1%
9
hiteshiinfotech.wordpress.com
Internet Source <1 %
10
docplayer.net
Internet Source <1 %
11
ethesis.nitrkl.ac.in
Internet Source <1 %
12
www.geeksforgeeks.org
Internet Source <1 %
13
www.itstudentjunction.com
Internet Source <1 %
14
medium.com
Internet Source <1 %
15
cyberpanel.net
Internet Source <1 %
16
www.codegrepper.com
Internet Source <1 %

Exclude quotes On Exclude matches Off

Exclude bibliography On