VISVESVARAYA TECHNOLOGICAL UNIVERSITY

BELAGAVI-590018

“INTERNSHIP”
(21INT68)

REPORT ON

“FULL STACK WEB DEVELOPMENT”

Submitted in partial fulfillment for the requirements for the Award of Degree of

BACHELOR OF ENGINEERING
IN
INFORMATION SCIENCE AND ENGINEERING
BY

R SANGEETHA
1EP21IS080

UNDER THE GUIDANCE OF

Dr. SHANTHI M
PROFESSOR
DEPT. OF ISE, EPCET

Department of Information Science and Engineering

Approved by AICTE New Delhi| Affiliated to VTU, Belagavi
Virgo Nagar, Bengaluru-560049
2023-24
 (Affiliated to Visvesvaraya Technological University, Belagavi)
Bangalore-560049

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

CERTIFICATE

This is to certify that the INTERNSHIP entitled “FULL STACK WEB

DEVELOPEMENT” is a bona-fied work carried out by Ms. R SANGEETHA , bearing
USN 1EP21IS080 in partial fulfillment for the award of Bachelor of Engineering in
Information Science and Engineering under Visvesvaraya Technological University,
Belagavi during the year 2023-24. It is certified that all the corrections/suggestions indicated in the
Internal Assessmenthave been incorporated in the report and submitted in the department library. This
Internship report hasbeen approved as it satisfies the academic requirements in respect of Internship
(21INT68)prescribed for the award of the said degree.

GUIDE HOD PRINCIPAL

Dr. Shanthi M Prof. Kemparaju N Dr. Mrityunjaya V Latte
Professor EPCET EPCET

Examiners

Name of the Examiners Signature with date

1.

2.
 ACKNOWLEDGEMENT

Any achievement, be it scholastic or otherwise does not depend solely on the individual efforts
but on the guidance, encouragement and cooperation of intellectuals, elders and friends. I would
like to take this opportunity to thank them all.

First and fore-most I would like to express our sincere regards and thanks to Mr. Pramod
Gowda and Mr. Rajiv Gowda, CEOs, East Point Group of Institutions, Bangalore, for
providing necessary infrastructure and creating good environment.

I express my gratitude to Dr. Prakash S, Senior Vice President, EPGI and Dr. Mrityunjaya
V Latte, Principal, EPCET who has always been a great source of inspiration.

I express my sincere regards and thanks to Prof. Kemparaju N, Professor and Head,
Department of Information Science and Engineering, EPCET, Bangalore, for his
encouragement and support.

I am obliged to Dr. Vaishali Shende, Associate Professor, Department of Information Science

and Engineering, who rendered valuable assistance as the Internship coordinator.

I am grateful to acknowledge the guidance and encouragement given to me by Dr.Shanthi M

Professor, Department of Information Science and Engineering, EPCET, Bangalore, who has
rendered a valuable assistance.

I also extend my thanks to the entire faculty of the Department of Information Science and
Engineering, EPCET, Bangalore, who have encouraged me throughout the course of the
Internship.

Last, but not the least, I would like to thank my family and friends for their inputs to improve
the Internship.

Name: RSANGEETHA

USN: 1EP21IS080
Certificate of Completion of Internship
 ABSTRACT

There are so many advancements in the field of technology and as the environment around us
grows, we have to grow with it as well. Our idea of modernization in technology leads us to
design something which will lead to advancement in social media application use. Our
project idea was to implement a social media app by using technology - React.js. The project
is just a basic implementation of that of a social media app which you can identify by the
way it looks. Our work was based around implementation and UI design and now we are
trying to get this Idea towards finalization.
 CONTENTS

Chapter Description Page no.

no.
1 INTRODUCTION 1-4
1.1 INTRODUCTION

1.2 PROBLEM STATEMENT

1.3 OBJECTIVE

1.4 METHODOLOGIES

1.5 ORGANIZATIONS

LITERATURE REVIEW 5-7

2

3
SYSTEM DEVELOPMENT 8-12
3.1 ABOUT VISUAL STUDIO

3.2 ABOUT NPM

3.3 ABOUT REACT

3.4 ABOUT NODER.JS

3.5 FLOW CHART

3.6 IMPLEMENTATION OF PHASES

4
PERFORMANCE ANALYSIS 13-27
CONCLUSION

REFERENCES
 LIST OF FIGURES

Fig. no. Description Page no.

Flow Diagram Depicting Procedures To Be 11
3.4
Followed
3.5 Implementation Of Phases/Stages 12
4.1 Ui Of Social Media App 25
4.2 Image Uploder 25
4.3 UI 26
4.4 Finalized Look Of App 27

LIST OF GRAPHS

Graph no. Description Page no.

Flow Diagram Depicting Procedures To Be
3.4 Followed In App 11

LIST OF TABLES

Table no. Description Page no.

4.1 Analysis Of Clone Detection Technique 13
 CHAPTER 1
INTRODUCTION
1.1 Introduction

The social media applications in itself have Billions of users. It uses fundamental concepts like
user authentication, Database management, UI/ UX design, and software development while
taking it to an advanced level.

The aim of this project is to Generally recreate a social media app which provides similar
functionalities to the apps like Facebook, Instagram application while trying to improve on
some of the aspects from a developer’s point of view.

The project will be developed on new technologies like React.js and Material UI while using
Google’s Firebase for Authentication and Database management. The Web app lets you post
images on your feed or story for a specific period of time after which the story disappears. You
can view who has seen your story via checking the usernames that are provided in the story
section. It is easy to navigate through the list if the list is short but imagine doing so with 10K
followers or even 200 followers. The process of scrolling to see who has viewed your story
gets hectic and a lot time-consuming.

There should be an alternative for the process and that is why we suggest adding a search bar
in the story section so that a user can easily navigate through their stories leading to a better
user experience.

Reasons to use React Js

• Simple:- With React, you express how your app should look at any given point in time
- and it will automatically manage your UI updates when your underlying data changes.
• Declarative:- With changes in Data, React automatically refreshes with it and it knows
to only update the changed parts and not the whole UI. This improves the overall
performance.
• Reusable:- With React we can build reusable components, we majorly build
components with the help of react. As they are encapsulated components it makes the
code reuse, testing, and removal of errors pretty easy. Simple, declarative, and reusable.
These are the top 3 major qualities of React.

Dept, Of ISE EPCET 2023-2024 Page. 1

1.2 Problem Statement

The social media applications currently in use have a good retrieval time but the
functionalities can for sure be implemented in a better way and there are certainly more
optimal solution. We are trying to create a different approach to using social media
applications and their story feature, the idea is to implement a social media application and
then when a person sees the story and it shows how many users have viewed the story we have
a search bar present right there to helpwith the name search if we want to search for a specific
person in that list, which takes into account the already existing resources and their utilization
of user data. The technologies whichwill be the building base of our social media app will be
React Js and we try to implement a social media app with better story functionality while not
dropping out on the user experience. The end goal is to create a working prototype for the
project in order to show what and how exactly we are making this application work and how
it takes our data into account.

1.3 Objectives

1.3.1 Learning Objective

Learning objective of doing this project was first to get the understanding of how to build
applications, the various API’s in use and their functions, how to build a good UI and their
applications to certain areas. Identifying the correct method to get to the solution we are trying
to achieve while learning about how to use React js and HTML/CSS programming language
into our application to give it the functionality required for the proper working of an app.

1.3.2 Outcome Objective

The main outcome objective was to create a framework with similar functionalities to that of a
social media application which works on any device.The implementation and coding has been
done on windows 10.

Then using technologies like Google’s Firebase and React Js implement the things like User
authentication, Database Management to develop a dummy social media application. We can
create an account and post images with captions and comment on the image. The process is

Dept, Of ISE EPCET 2023-2024 Page. 2

made simpler by using API’s and their inbuilt function calls which predefine some important
features needed for the app.

1.4 Methodology

1.4.1 Functional Requirement

The functional requirement specification of the project are mainly categorized as user
requirements, security requirements, and device requirement each of which are explained in
detail below:

• User Requirement: User ought to have an account on framework and client must know
how to interact with the system so that he can further post , like or comment on the
framework.
• Device Requirement: User can use an android or ios operating system and the app will
run fine on both the platforms.

1.4.2 Non-functional Requirement

• Performance: The framework will have speedy, exact and dependable outcomes.
• Capacity and Scalability: The framework will have the capacity to store identity
registered by the framework into the database.
• Availability: The framework will be accessible to clients whenever at whatever point
there is an Internet association.
• Recovery: If a break down or a server is inaccessible, the application should have the
capacity to keep any information or data loss from happening in the optimal conditions.
• Flexibility and Portability: System will be available whenever from anywhere.

1.5 Organization

In Chapter 1, we have discussed what is social media app and it’s development features while
being in development mode. Also, we pointed out the schemes that we can use in our project
report.

In Chapter 2, we will be discussing the research papers we have referred to in order to get a
better understanding of our project. The papers mainly focus on techniques used in front end
development, android app development and other researches carried out in this field.

Dept, Of ISE EPCET 2023-2024 Page. 3

In Chapter 3, we will be citing the possible requirements that are the hardware and software
system, what language we will be using and where we are going to implement it along with the
libraries required along with details about the platform used.

In Chapter 4, we will be discussing in detail the algorithms and approaches used to predict the
outcome and effectiveness of our result. Implementations and the results of the outputs have
been discussed.

In Chapter 5,we will be giving the conclusions that have been derived from this study and the
future scope of this project.

Dept, Of ISE EPCET 2023-2024 Page. 4

 CHAPTER 2
LITERATURE SURVEY

2.1 Literature Review

Junli Xu, [1] The author has classified android as an open source operating system unlike
previous closed source operating systems and says that with an open source OS it certainly
gives us the opportunity to work on whatever we want for ourselves. After this the author goes
precise and starts to talk about the music player. The author says that as much of pretty UI is
favoured by people it surely leads the mobile device towards more resource utilization. Author
says that he is making a media player for android which has certainly less resource utilization
while being simple, convenient and user-friendly as well. He uses JAVA as their main language
and eclipse as the IDE for implementing this approach. The author in this manner develops an
android application with playlists, main interface, menus and play settings.

Ravi Kumar, Numer Mulla, Dishank Gangar, [2] The authors have given us an idea of how
current recommendation systems are inefficient and most of the recommendations are just
based on the user's behaviour on similarity between songs. So the authors have decided to
create a smart music application named Illusion which takes into account clearly a different
approach for listening to music. The authors have developed a method to work with the heart
rate data, the ongoing activity that is currently in action and providing the user then with the
recommended music in accordance to the heart rate of that of the user. It was certainly an
unimaginable way for music recommendation which requires heart beat monitoring via smart
band and mobile accelerometer which works in accordance with the android application. In
this way leading your application towards sentiment analysis and with enough data providing
the user with the best type of music in accordance to the model while trying to boost the mood
of the user who is an integral part of the user base.

Yajie Hu, Mitsunori Ogihara, [3] The authors have created a recommendation system for audio
tracks and the research paper revolves around the implementation of that application. The
authors point out that it would not be practical to store thousands of unrelated songs together
without some set of predefined albums or playlists. They take something called a forgetting
curve into account which measures the freshness of the song and check for favouritism from
the user’s data while analysing what the user’s listening patterns are. The authors also point
out that a good recommendation system minimizes the user's effort required to provide the

Dept, Of ISE EPCET 2023-2024 Page. 5

owners with necessary feedback and maximize the user’s satisfaction. The recommendation
system is built on 5 fundamentals like genre, year, favour, freshness and time pattern. Thus
leading towards a successful implementation of Next One players.

Anuja Arora, Aastha Kaul, Vatsala Mittal, [4] The authors of the following research paper talk
about how mood is influenced by music and provides the listener with an emotional response
to it. They further talk about how it can detect emotions as well as lead towards elevation of
mood or in other words feeling better. They have classified the songs into four major mood
categories and studied the effects while trying to suggest songs based on the amount of data
they collected. They also take the user's facial expression into account and try to make a playlist
for the emotion that the algorithm in itself detected. They have used models like KNN, SVM
and Haar cascades and also provided us with the accuracy for these models. The respective
accuracies were 70%, 81.6% and 92% and gave us an application which plays music according
to mood.

Xudong WU, [5] The author of this paper has developed a music player for the android
operating system. He signifies the importance of android intelligent applications and it’s fair
share in the market concluding that it is rather natural to build a music player which server the
higher userbase market for personal gains. The paper provides us with the architecture theory
for android OS and developing a system structure for the media player. The author provides a
full detailed structure of how the app creation takes place and what are the features he will be
adding are an integral part of. The author has divided the system into three major parts which
are.

1. Main playback Interface

2. Music Library Interface

3. Download management interface.

All three of these parts have their own features and functionalities that work hand in hand. In
this manner the author gives a brief overview of app development in context of media players
working on android operating systems.

Dept, Of ISE EPCET 2023-2024 Page. 6

D. Muriyatmoko,N A S Asy’ari, M S Arif [6] The authors of this research paper have developed
an android application which is used for streaming radio from Songgolangit FM Ponorogo.
They stated that the broadcast signal was certainly limited in Ponorogo. The method used in
the android application development was the waterfall model and they have performed black
box testing on this model. The idea was to improve the listener base coverage for Songgolangit
FM. They have also provided us with data about their system development approach and how
they used it in order for their app to work. They have created a basic app with necessary
functionalities for the radio like description of the radio, play and pause buttons and the
Songgolangit radio website divert button.

Dept, Of ISE EPCET 2023-2024 Page. 7

 CHAPTER 3

SYSTEM DEVELOPMENT

Tools and technologies used

Software Used :- Visual studio, Npm

Language Used :-

Java Script, HTML, CSS Main Library:- React.js,Node.js

3.1 About Visual studio

The Visual Studio Code is a free open source code editor which is made by the tech giant
Microsoft for operating system platforms like Windows10, MacOs and Linux.It has features
that will support the application in debugging of the code , highlighting the syntax and auto
completion of the code by giving hints as to what we might be writing, code-snippets,
refactoring of code, and by using git VCS managing version . Visual Studio has a code editor
which supports a feature called as IntelliSense (the component which completes the code) and
it also does code refactoring as a process. The debugger which has been installed works like a
source-level debugger as well as a machine-level debugger. Other tools which are built in
include class designer and database schema designer. It can install or uninstall plug-ins that
improve the technical functionality at all levels which include inputting support for control
systems of source and installing editors for other stages of the software development life cycle.
Microsoft Visual Studio comes with support for development in 36 different programming
languages and it grants the code editor and debugger support to nearly any programming
language. The Community edition, is available for free.

3.2 About Node Packet Manager

npm stands for node packet manager. It functions as a package manager for programming
language mainly speaking -Javascript.npm is a product of GitHub or we can say it’s github
subsidiary, which gives a host like service

i.e server for development of software and control of Version by using Git as a version control
system. node packet manager is the default package manage of the programming language
which is JavaScript. Interestingly enough, node packet manager is the world's largest software
registry. The developers which contribute to open source from every place in this world use

Dept, Of ISE EPCET 2023-2024 Page. 8

node packet manager to give and take data in form of packets, however many organizations
use it for private uses also which are not available to the general population.

npm has 3 major parts

• website
• registry
• Command Line Interface (CLI)

Node packet manager is used for package discovery,setting up a profile, and managing
various other things of npm usage. Let’s clear it with an example, you can identify
organizations to manage the grant to public or private packages. The CLI functions from the
terminal generally cmd or git, and ishow most developers interact with npm. The npm registry
acts as large open-source database of JavaScript and it’s meta information.

3.3 About React

React is a framework which makes creating interactive UI’s a lot less time consuming and
makes it painless to create interactive UIs. React lets us design easy to create views for every
stage in our application development, React has a great efficient update and it works on the
components that need the change not on the whole application. The views which are declarative
in nature makes the code easy to analyse and even easier to optimize and debug it. Building
components which are encapsulated and manage their own state, we combine then to make
better UI’s. The logic of the components is written in JavaScript language and not as templates,
we can pass data with ease through our app. No assumptions are made about what technologies
a person might be using, we can develop new features in React without having to again rewrite
the existing code. React Js can also make changes on the server with the help of Node and can
make powerful apps via React Native. To understand react in more depth, let us discuss the
functioning of React in the background i.e background processes. The best and most important
benefit of React Js is performance. The speed of React is a thing of beauty, and it works on low
memory principles that are achieved by abstraction of the DOM (Document Object Model)
with a virtual DOM in action. To implement data binding most of the front-end technologies
use one of the two i.e Key-Value Observation like (Meteor, Ember) or the Dirty Checking like
(AngularJS). React acts in a different manner and acts on a JavaScript approach. Let's see how
React works on this implementation:

Dept, Of ISE EPCET 2023-2024 Page. 9

First happens the DOM Abstraction and a virtual representation of the DOM that is stored in
the memory.

NOw when this happens, the data model shifts/changes, React then goes through the process
of re-rendering and only the components that use the data that has changed "Diffs" the previous
verion of virtual DOM with the new version of virtual DOM updates to the actual DOM, and
leads to only modifying those components which require this change and will be directly
beneficial to them.

3.4 About Node.js

Node.js has a somewhat similar design,and is generally in influence of, systems which are for
example like the event machine of Ruby and Twisted- python. Node.js functionality picks up
the event model and takes it to a different level. Node.js gives event loop like a runtime
construct and not like a library. In many other systems, a blocking call to start the event-loop
will always be there. The behaviour is generally defined via callbacks which are done at the
beginning of any script, and a server is started via a blocking call at the end. There is no start-
the-event-loop call in Node.js. In Node.js the event loop is entered after executing the script
that has been input. Node.js exits this loop when finally no callbacks are there to be performed.
It shows similar behaviour like that of a browser JavaScript where the event loop can’t be seen
by the user. HTTP is a the main handler of Node.js, which helps with low latency and streaming
. It makes Node.js well suited for a web library framework foundation.

Node.js programs being designed without threads doesn't necessarily mean you can't take
advantage of the multiple cores in your environment. Child processes are brought into action
by using child_process.fork() API, these are designed to be easy to communicate with and built
upon same interface is a cluster module, that allows sharing of sockets between the processes
to edo load balancing over multiple cores.

Dept, Of ISE EPCET 2023-2024 Page. 10

3.4 Flowchart

Fig 3.4. Flow diagram depicting procedures to be followed in app

Dept, Of ISE EPCET 2023-2024 Page. 11

 Fig 3.5. Implementation Of Phases/Stages (Diagram)

Dept, Of ISE EPCET 2023-2024 Page. 12

 CHAPTER 4
PERFORMANCE ANALYSIS
In this chapter we will be discussing the efficiency of the social media app that we are trying
to build, that we researched while getting to know about the project.With the definitions that
are quite basic and the initial implementation ideas about the processes to be followed , the app
has been brought to life. Furthermore, we will be discussing the pros and cons that lead each
of the approaches to make it suitable for achieving the desired best results. Here is a chart that
we found online depicting analysis of clone detection techniques where it classifies various
social media applications on the basis of approach used, parameters for detection etc and it
surely helped us achieve a better understanding of different social media applications and their
functioning.

Table 4.1:- Analysis of clone detection techniques

Dept, Of ISE EPCET 2023-2024 Page. 13

Auth System With base of operations and React Native base of operations Authentication
provides backend services & easy-to-use SDKs to certify users to your app. It supports
authentication victimization passwords, phone numbers, fashionable federate identity suppliers
like Google, Facebook and Twitter, and more. In most situations victimization Authentication,
you'll need to understand whether or not your users square measure presently signed-in or
signed-out of your application. The module provides a way referred to as onAuthStateChanged
that permits you to purchase the users current authentication state, and receive an incident
whenever that state changes it.It is vital to recollect the onAuthStateChanged beholder is
asynchronous and can trigger associate initial state once a reference to base of operations has
been established. thus it's vital to setup associate "initializing" state that blocks render of our
main application while the affiliation is established it.

Save Data using firebase

Storing and retrieving user-generated knowledge is pretty common in mobile and internet apps
today, and intrinsically, there square measure totally different services that provide mobile and
internet developers the flexibility to store knowledge. Among these services is Google’s base
of operations. base of operations could be a BaaS backend-as-a-service which suggests it
permits each internet and mobile developers to perform common backend tasks like user
authentication and making databases with no want for maintenance or repairs.

React Native, on the opposite hand, could be a platform that enables developers to use their
data of React.

Framework, to make native apps that employment across each automaton and iOS devices.
React Native improves productivity as developers don't ought to manage 2 totally different
codebases for each the iOS and automaton versions of a selected app.

In this article, you'll learn the way to store, retrieve, and update user- generated knowledge
with base of operations. At the top of this text, we'll have designed a disorder automaton app
that saves and retrieves the various disorder things in a very info, victimization info service
provided by base of operations.

Dept, Of ISE EPCET 2023-2024 Page. 14

Handling Navigation on React Native

Mobile apps square measure seldom created of one screen. Managing the presentation of, and
transition between, multiple screens is usually handled by what's called a navigator.This guide
covers the assorted navigation elements obtainable in React Native. If you're obtaining started
with navigation you will likely need to use React Navigation. React Navigation provides a
simple navigation answer, with the flexibility to gift common stack navigation and tabbed
navigation .

If you would like to attain a native look and feel on each automaton and iOS, or you are
desegregation React Native into associate app that already manages navigation natively, the
subsequent library provides native navigation on each platforms: react-native.The base of
operations SDKs for Cloud Storage add Google security to file uploads and downloads for your
base of operations apps, in spite of network quality.You can use our SDKs to store pictures,
audio, video, or alternative user-generated content. On the server you'll be able to use Google
Cloud Storage genus Apis to access a similar files.Displaying User Profile With base of
operations Firestore ,You can customise the email templet that's utilized in Authentication
section of the base of operations console, on the email Templates page.

It is conjointly doable to pass state via a continue address to send back to the app once causing
a countersign reset email. in addition you'll be able to localize the countersign reset email by
changing the language code on the Auth instance before causing the e-mail.

Why to use React

1. quick Learning Curve

React is extremely an easy and light-weight library that solely deals with the read layer. it's not
a beast like alternative MV* frameworks like Angular or fragment. Any Javascript developer
will perceive the fundamentals and begin developing associate awful internet application when
solely a few of days reading tutorial.

As the React guide says ‘Thinking in React’ is also a bit totally different than you wont to since
it brings a brand new approach to the table, however it'll become a lot of easier and natural as
you gain it.

Dept, Of ISE EPCET 2023-2024 Page. 15

2. Reusable Components:- React provides a part based mostly structure. elements square
measure your Lego items. you begin with small elements like button, checkbox, dropdown etc.
and also the you produce wrapper elements composed of these smaller elements. so you write
higher level wrapper elements. And, it goes on like that till you've got this one root part which
part is your app.Each part decides however it ought to be rendered. every part has its own
internal logic. This approach has some superb results. you'll be able to re-use elements anyplace
want it.

3. quick render with Virtual DOM

When you square measure on the point of develop an online application that involves high user
interaction and examine updates, just like the new type builder on JotForm four.0, you've got
to contemplate the doable performance problems. though today’s javascript engines square
measure quick enough to handle such complicated applications, DOM manipulations square
measure still not that quick.

4. Clean Abstraction

One of the powerful sides of React is that it provides an honest abstraction which suggests that
it doesn't expose any complicated internals to the user.React doesn't dictate any patterns or
design like MVC/MVVM, finally its solely concerning the read layer and you're absolve to
style your app’s design in any manner you see match this

5. Flux and revived

Flux design is introduced and maintained by Facebook and that they use it for his or her internet
applications. It enhances React elements by unifacial knowledge flow. the most plan is to form
actions that square measure musical organization. Any change on the store (data) will trigger a
render for related components and the view is always kept in sync with data of it.

6. Great Developer Tools

Developer toolset is another important factor when you are choosing a development platform.
There are two great tools you should be aware of: React Developer Tools and Redux Developer
Tools. Both can be installed as Chrome extensions. React Developer Tools is great for
inspecting react components within their hierarchy and also great for observing their current
props and states. If you are using the Redux library you should definitely take a look at Redux
Developer Tools for Chrome. You can observe dispatched actions, current store states and

Dept, Of ISE EPCET 2023-2024 Page. 16

watch changes on stores. You can also dispatch actions or modify stores and see changes
reflected to your view instantly. Since all the updates are kept within the extension, time travel
is even possible of it.

7. React Native

Learning React comes with a bonus: React Native. React is not a ‘write once run anywhere
library’, as the creators says, it’s a ‘learn once write anywhere’ library. Yes, you can write
native apps for Android and iOS using React Native. Although you will not be able to use the
exact same code you wrote for web, you will be able to use the same methodology and the
same architecture.

CODE :

1. APP.JS
import React, {useState,useEffect} from 'react'; import
'./App.css';
import Post from './Post';
import { db, auth }from './firebase';
import { makeStyles } from '@material-ui/core/styles'; import Modal from
'@material-ui/core/Modal';
import { Button, Input } from '@material-ui/core'; import
ImageUpload from './ImageUpload';
import InstagramEmbed from 'react-instagram-embed';

function getModalStyle() { const top = 50;

const left = 50;

return {
top: `${top}%`, left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}

const useStyles = makeStyles((theme) => ({ paper: {

Dept, Of ISE EPCET 2023-2024 Page. 17

 useEffect(()=>{
//this is where the code runs
db.collection('posts').orderBy('timestamp','desc').onSnapshot(sn
apshot =>{

//everytime a new post is added, this code

firessetPosts(snapshot.docs.map( doc =>({

id:doc.id,
post:
doc.data()

})));
})
}, []);
const signUp= (event)
=>{event.preventDefault();

auth.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
return
authUser.user.updateProfile({
displayName: username

})
})

.catch((error) => alert(error.message));

}
const signIn =(event)
=> {event.preventDefault();

auth
.signInWithEmailAndPassword(email, password)
.catch((error) => alert(error.message))

setOpenSignIn(false);

}
return (
<div className="app">
<Modal
open={open}onClose={() => setOpen(false)}

Dept, Of ISE EPCET 2023-2024 Page. 18

 useEffect(()=>{
//this is where the code runs
db.collection('posts').orderBy('timestamp','desc').onSnapshot(snapsh
ot =>{

//everytime a new post is added, this code

firessetPosts(snapshot.docs.map( doc =>({

id:doc.id,
post:
doc.data()

})));
})
}, []);
const signUp= (event)
=>{event.preventDefault();

auth.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
return
authUser.user.updateProfile({
displayName: username

})
})
.catch((error) => alert(error.message));
}
const signIn =(event)

=> {event.preventDefault();

auth
.signInWithEmailAndPassword(email, password)
.catch((error) => alert(error.message))
setOpenSignIn(false);

}
return (

<div className="app">
<Modal
open={open}onClose={() => setOpen(false)}

Dept, Of ISE EPCET 2023-2024 Page. 19

 >
<div style={modalStyle} className={classes.paper}>
<form className="app signup">
<center>
<img
className="app headerImage"

src="https://www.instagram.com/static/images/web/mobile_nav_type_log
o.png/735145cfe0a4.png"
alt=""
/>
</center>

<Input
placeholder="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type = "submit" onClick={signUp}>Sign
up</Button>

Dept, Of ISE EPCET 2023-2024 Page. 20

 onClose={() => setOpenSignIn(false)}

>
<div style={modalStyle} className={classes.paper}>
<form className="app signup">
<center>
<img
className="app headerImage"

src="https://www.instagram.com/static/images/web
o.png/735145cfe0a4.png"
alt=""
/>
</center>

<Input
placeholder="ema
type="text"
value={emai
onChange
/>
<Inpu
p

Dept, Of ISE EPCET 2023-2024 Page. 21

 alt=""
/>
{user ? (
<Button onClick={()=> auth.signOut()}>Logout</Button>
) :(
<div className="app loginContainer">
<Button onClick={()=>setOpenSignIn(true)}>Sign In</Button>
<Button onClick={()=>setOpen(true)}>Sign Up</Button>
</div>
)}
</div>
<div className="app posts">
<div className="app postsLeft">
{
posts.map(({id, post}) =>(
<Post key={id} postId={id} username={post.username}
caption={post.caption} imageUrl={post.imageUrl}/>
))
}
</div>

<div className="app postsRight">

<InstagramEmbed
url='https://instagr.am/p/Zw9o4/'
//clientAccessToken='123|456'
maxWidth={320} hideCaption={false}
containerTagName='div' protocol=''
injectScript onLoading={()
=> {}}
onSuccess={() => {}}
onAfterRender={() => {}}
onFailure={() => {}}
/>
</div>
</div>

{user?.displayName ? (
<ImageUpload username={user.displayName} />

Dept, Of ISE EPCET 2023-2024 Page. 22

 ):(
<h3>Sorry !! You must Login to Upload</h3>
)}
</div>

);
}
):(
<h3>Sorry !! You must Login to Upload</h3>
)}
</div>

Majority of code is not present here due to obvious copying reasons and this is the redacted
part of code.

CSS Code
*{
margin: 0;
}
.app {
background-colour: #fafafa; height: 100vh;
}
.app_ header Image { background-colour: white; padding: 20px;
border-bottom: 1px solid light Gray; object-fit: contain;
}
post {
background-colour: white; max-width: 500px;
border: 1px solid light Gray; margin-bottom: 45px;
}
.post_ image { width: 100%;
object-fit: contain;
border-top: 1px solid lightgray; border-bottom: 1px solid lightgray;
}
.post_ text {
font-weight: normal; padding: 20px;

Dept, Of ISE EPCET 2023-2024 Page. 23

.post _header { display: flex;
align-items: center; padding: 20px;
}
.post_avatar {
margin-right: 10px;
}

Firebase
import firebase from "firebase";
const firebaseApp = firebase.initializeApp({
apiKey: "*********************************************",
authDomain: "********.firebaseapp.com",
databaseURL: "https://Socialmedia-clone-react-a3857-default- rtdb.firebaseio.com",
projectId: "*************",
storageBucket: "socialmedia-clone-react-a3857.appspot.com",
messagingSenderId: "9041****",
appId: "1:90417****:web:38d10081****************",
measurementId: "G-PZ********"
});
const db = firebaseApp.firestore(); const auth = firebaseApp.auth(); const storage =
firebaseApp.storage();
export { db, auth, storage };

Dept, Of ISE EPCET 2023-2024 Page. 24

Outputs

Figure:- 4.1 UI of Social Media app

The web application has started taking the form of a similar look to an authentic Social media
app.

Alot of functionalities are implemented. We have successfully created a login/signup option

and you can surf on the feed page.

Figure 4.2:- Image Uploader

Post can be uploaded by the user who is registered with the image, caption and username
inserted from the firebase. We have also created a upload feature which choose an image you
want to upload from your local device and upload it on the application.

Dept, Of ISE EPCET 2023-2024 Page. 25

 Figure 4.3:- UI

The users can post the caption of their choice and later on they will be able to comment on each
other’s post. The UI has been designed with the help of react js and it has been our main
objective to make the User Interface and experience feel like they can easily navigate through
the application.

Dept, Of ISE EPCET 2023-2024 Page. 26

Figure 4.4: finalized look of app.
 CONCLUSION
Brief highlight of building social media app using reactjs is determined . Generally react.js
allow us to design reusable user interface components. It also allows developers to create large
web applications which help in changing the data without reloading the page. The main reason
for using React is to be very fast, scalable and simple. We developed the social media app using
reacts having the features like fast, accurate ,scalable and simple. In reacts we have used npm
and Node.js. React is basically an excellent tool with which we can create some interactive
applications for mobiles, web and any other platform. Some other advantages of using Reacts
are:

● Having better efficiency and overall developer productivity

● You can share your code and can reuse
● High performance with some advance features
● It provides large number of free of tools
React introduced us to the JavaScript which is used for web development. JavaScript is a test-
based programming language that used on both client and server side which help us to make
our application more interactive with its advanced features whereas HTML and CSS are
language that generally use for give the structure and style to application JavaScript gives
interactive element. We conclude our project by telling you that social media app using Reacts
has been implemented.

User Authentication: Sign-up, login, password recovery.

Profile Management: User profiles, privacy settings.

Content Creation and Sharing: Posts, images, videos, and multimedia.

News Feed: Algorithm for showing content based on user interests and interactions.

Messaging: Direct messaging, notifications, and chat functionality.

Search Functionality: Ability to find users, posts, or groups.

Notifications: Alerts for interactions like likes, comments, and messages.

 REFERENCES

[1] Junli Xu :” Design and implementation of the music player” :Conference: 2015
International Conference on Management, Education, Information and Control (2015)

[2] Ravi Kumar, Numer Mulla, Dishank Gangar :”Illusion: A smart music player”:
International Journal of Engineering Research and Technology (2020)

[3] Yajie Hu, Mitsunori Ogihara :”Nextone player: A music recommendation system based on
user behaviour”:(2011)

[4] Anuja Arora, Aastha Kaul, Vatsala Mittal :”Mood based music player”:2019 International
Conference on Signal Processing and Communication (ICSC)”:(2019)

[5] Xudong Wu :”Design of Music Player Software Based on Android

”:6th International Conference on Machinery, Materials and Computing Technology: ( 2018)

[6] D. Muriyatmoko,N A S Asy’ari, M S Arif: “Android Radio Streaming Apps for

Songgolangit FM Ponorogo”:The 1st International Conference on Engineering and Applied
Science 21 August 2019, Madiun, Indonesia: (2019)

[7 Analysis of social networking sites: A study on effective communication strategy in the

developing of brand communication P. Sri Jothi*, M. Neelamalar and R. Shakthi Prasad.