Ravello Project Report Amar

A Project Report
On
Ravello: a social connective platform for
Ravenshaw University
A Report submitted in partial fulfillment of the

requirements for the award of the Degree of
Master of Computer Application
RAVENS
HAW
Submitted By:
UNIVER
Amarjeet Parida
Roll
SITY
No.19MCA023
Department of MCA
Ravenshaw University,Cuttack
Odisha-753005
Submitted on-July,2022
1|Page
Project Approval
This project entitled Ravello: A Social Connective Platform for Ravenshaw
University done by Amarjeet Parida bearing ROLL NO-19MCA023 is approved for the
degree of Master of Computer Application.
Examiners:
Head of the department : Dr. Alok Ranjan Tripathy
Date:
Place:
2|Page
CERTIFICATE
This is to certify that the project entitled “Ravello : A social Connective

Platform for Ravenshaw University” is a record of Final Year Project work
done by “Amarjeet Parida” and carried out under the supervision and guidance
of “Dr. Alok Ranjan Tripathy” for practical fulfilment of the requirements for
the award of Master of Computer Application at “Ravenshaw University”.
The matter embodied in the project has not been submitted to any other
university or institute for the award of any degree or diploma to the best of my
knowledge.
3|Page
DECLARATION
I declare that this submission represents my ideas in my own words

and where other ideas or words have been included. I have adequately
cited and referenced the original sources. I also declare that I have
adhered to all principles of academic honestly and integrity and have
not miss represented or fabricated any data or idea or fact or source in
my submission. I declare that this submission is a representation of
ideas in my own words with no other ideas or words added. The
original sources have been properly credited and referenced. I further
declare that I have followed all academic honesty and integrity rules
and have not falsified or distorted any data, idea, fact or source in my
work.
Place- Cuttack
Name- Amarjeet Parida
Date- 25/07/2022
4|Page
ACKNOWLEDGMENT
It is my proud privilege and duty to acknowledge the kind of help and
guidance received from several people in preparation of this report. I
would like to express my deepest appreciation to all those who
provided me the possibility to complete this report. A special
gratitude to those whose contribution in stimulating suggestions and
encouragement that helped me to coordinate my project.
I express my earnest gratitude to our HOD Dr. Alok Ranjan
Tripathy for his endless enthusiasm and valued help through the
project work and for his valuable suggestions throughout the project
work. I am grateful to him for his inspiration and encouragement.
Before I finish i express my gratitude to all of my teachers for
abundant discussions in related context and for making available
library and laboratory facilities required to prepare this report.
Finally, I would like to thank my friends for their cooperation for
completing this project in a hassle free manner.
5|Page
ABSTRACT
For a social Site to be captivating and Interacting, it is a key to

provide the users with a proper platform and ease of use and
access to the site.
This project is a case study designed to enable the Users who
are commonly Students and Faculty members of Ravenshaw
University have an access to an app where the can connect to
each other socially.
The blast of social media trend is as amazing as that and the
speed at which it is improving is frustrating. International
companies have identified social media promotion as a
potential promotion system, used them with enhancements to
power their marketing with social media promotion. So this
project provides a platform to engage in this site without
getting any unwanted and inappropriate content and no
promotional or abusive contents as well as this app is
specifically created and featured as per the requirements and
needs of the University with proper authentication of the users
that are logging in there.
6|Page
Table of Contents
1. Introduction…………………………………………………............9
2. Project Analysis………………………………………………………..10
2.1 Purpose of Project…………………………………………………..10
2.2 Existing System………………………………………………………..10
2.2.1 Traditional Inbound Marketing Platforms………………10
2.2.2 Data, Security and Privacy-GONE!............................10
2.3 Deplatforming…………………………………………………………..11
2.4 Review of literature…………………………………………………..12
2.4 What is Ravello?………………………………………………………..13
2.4.1 Features in Ravello application……………………………….13
3. Requirement Analysis………………………………………………….14
4. Specific Requirements………………………………………………….15
4.1 Functional and Non-Functional Requirements…………...15
4.2 User Interface Requirements……………………………………15
5. System Architectures……………………………………………………16
6. System Requirements………………………………………………….17
7.System Design………………………………………………………….17-19
7.1 Data Flow Diagram…………………………………………………….19
7|Page
7.2 Behavioural diagram………………………………………………….20
7.2.1 Use Case Diagram………………………………………………21-24
7.2.2 Class Diagram………………………………………………………….25
7.2.3 Sequence Diagram………………………………………………….26
7.2.4 E-R Diagram……………………………………………………………27
7.3 System Specific Modules………………………………………28-32
7.4 Screens………………………………………………………………..33-44
7.5 Frontend Source Code…………………………………………..45-87
7.6 Reducer.js…………………………………………………………….88-91
7.7 Backend Source Code…………………………………………92-102
8.Conclusion…………………………………………………………………103
9. Bibliography………………………………………………………………103
10. List of websites Visited……………………………………………103
8|Page
1. Introduction
1.1 About Project:
This is a web based project which is useful for Students and Faculty Member. Since, Our lives have
been impacted by social media for many years. The social network is a collection of online channels
for communication that focus on community-based collaboration, information exchange, and
feedback (Rouse, 2016). Social networks were initially developed as a means of maintaining or
reestablishing connections with friends and family. These days, social media is utilised for much
more. The world is becoming more and more dependent on digitization, and thanks to social media,
the internet is now a source of influence as well as knowledge (Hanna, Rohm, & Crittenden, 2011). In
order to reach out to and engage with customers, firms should generally try to incorporate social
media into their strategy. In fact, according to Larson and Draper (2017), modern organizations must
comprehend all aspects of digital marketing. People must be able to use a multitude of social media
sites, including Facebook, YouTube, Twitter, Instagram, Snapchat, and other online platforms, due to
this reality. As social media has millions of users globally, so we decided to create a desktop app
known as RAVELLO, for those users who are students and faculty members of this university.
9|Page
2.Project Analysis
2.1Purpose of the Project:
It is portal used for all students and faculty members. Also Any general public can use this system for
having an access to this website from all parts of the world about events and activities that are
happening around through their social connectives.
Some training is requested by the students, faculties and general public. These trainings are
scheduled by the Developers documentation for the website usages. Information about the daily
events, activities and other stuffs can be published on a daily basis.
Users can also follow up with daily vital news information of the world which are regularly updated
by the admins to all the users having an access to this website.
2.2 Existing System:
Complexity in managing the data related to the persons using the website, data sharing and
retrieving, live events, reels, etc.
2.2.1Traditional Inbound Marketing platforms:
(Automated Marketing) is developed as a single or restricted partnership user dashboard and is a

centralised application. These conventional solutions are pricy, heavy, complex, and onerous to use.
A new member who joins a complicated, expensive system feels alienated, frustrated, and detached.
Platforms like Hubspot and Marketo are cutting-edge, powerful tools for gaining an advantage on
the internet. These instruments give affluent players significant advantages over typical
entrepreneurs trying to succeed in a setting that is becoming more and more unfavourable.
Platforms for inbound marketing range in price from $300 (entry levels with no data) to well over
$25,000 for sophisticated, well-built, and data-rich systems.
2.2.2Data, Security And Privacy – GONE!
Personal data, data security, and privacy are non-existent in today's markets across the board from
centralised systems, public corporations, social networks like Twitter and LinkedIn, media sharing
websites like Instagram and Youtube, discussion forums like Reddit and Digg, bookmarking services
like Pinterest and Flipboard, blogging networks like Tumblr and Medium, especially shopping
networks like Amazon and Shopify, and the list is long and laborious.
10 | P a g e
Whether you like Alex Jones or not, the deplatforming of InfoWars by Apple, Paypal, Facebook,
Youtube, Spotify, MailChimp, Sticher, Roku, Pinterest, and even Twitter did tremendous damage to
the first amendment. GoDaddy and other domain registries joined the onslaught. Your bank account
is likewise subject to this centralised management, with Stripe, Paypal, and Patreon leading the
charge in closing accounts that don't fit their objectives. Everyone should be alarmed by this
centralised concentration of power. There is a better and more effective way—rather than the
centralised hierarchy of the present platforms like Facebook, Google, Amazon, and Instagram—that
protects speech and also promotes or demotes members of communities as they see fit.
2.3 Deplatforming:
Deplatforming, often referred to as no-platforming, is a technique used by social media and
other technology corporations to restrict content on the Internet by suspending, banning, or
otherwise putting an end to problematic speakers or ideas. Financial deplatforming, a tactic
that involves denying services to controversial individuals or organisations, has also been
used by banking and financial service providers, among other businesses.
Deplatforming is a generic word for strategies used to silence unpopular speakers or ideas.
These strategies are frequently planned utilising social media. Deplatforming strategies have
included disrupting talks, attempting to ban speakers from a location or event, and engaging
in different forms of personal harassment, such as attempting to have someone fired or
blacklisted.
Deplatforming is a new attack on people's rights that undermines "freedom of speech".
11 | P a g e
Review of Literature
Through the numerous social media platforms that are widely utilised for communication and
information exchange, billions of people connect every day. Social media are "web-based apps and
interactive platforms that promote the creation, debate, modification, and exchange of user-generated
material," according to Aichner and Jacob (2015). Additionally, they include 13 other categories of
social media, including blogs, business networks, collaborative projects, enterprise social networks,
forums, microblogs, photo sharing, product/service reviews, social bookmarking, social gaming, video
sharing, and virtual worlds (p. 258). Currently, Facebook
Social media has transformed the internet into a source of influence as the world becomes more and
more dependent on digital technology (Hanna, Rohm, & Crittenden, 2011). As a result, companies
should aim to incorporate social media into their approach to draw in and communicate with
customers. According to a 2014 poll of 351 corporate leaders, social media marketing accounts for
9% of marketing budgets (Yang, Lin, Carlson, & Ross, 2016, p. 526). Social media strategies are
increasingly seen as a crucial component of integrated marketing communications (IMC) and support
businesses' marketing initiatives by fostering communication between them and their customers as
well as among the customers themselves. As a result, the majority of stakeholders anticipate that
organisations will be active on social media.
Recent research on the significance and impact of social media in the business world concur that
investing in social media marketing has many worthwhile advantages for a firm. Social networks are
first and foremost instruments for differentiating and popularising a brand. Murphy, Smith, and
Blazovich were taken. According to Smith, social media marketing helped 88 percent of marketers
increase their company's exposure, and search engine results improved for two-thirds of them (2015).
Customers trust social media more than corporate-sponsored communications when it comes to
product information, which helps to explain these figures. Second, businesses can cultivate client
loyalty by establishing online communities. Businesses may develop solid relationships with clients
through social media. They communicate their goals, principles, and offerings; in exchange, they get
criticism and new clients. Online customer communities provide value since its members are so
involved with the business that they end up becoming devoted clients and even brand ambassadors.
12 | P a g e
2.4.What is Ravello?
Do you have photos and videos that you want to share with your friends and families? Do you
want to keep track of your favourite celebrities, politicians and athletes? If this interests you, you
are in luck! Instagram is an application that allows you to do all these things and more.
Ravello is a desktop application that allows you to take, edit and share photos and videos. Your
friends and family can follow you on Ravello to see the pictures and videos posted by you.
You can also track your friends, faculty members and, others to keep up with their posts .You
can make your post public for anyone to see and users having an account in Ravello can like and
comment on anyone’s post and can keep there important and vital documents in this application
for there future uses.
This application contains details of the departments details, such as faculty details and their
designation specifically existing in Ravenshaw University of cuttack, Odisha.
2.4.1.Features in Ravello application

The Ravello app needs to have a few key characteristics in order to succeed. Users favour
feature-rich apps over those that use outdated platforms. So, among its characteristics are:
Activity Tracking: Users should be able to easily keep track of their activities, such as following
and unfollowing other users, leaving comments on their posts, reading other users' posts, etc.
Secure Log in: Users should be able to simply log in to the app using a variety of methods. A
large user base will be created by offering as many options as possible, including email,
Facebook, and phone numbers. Users will use the app more frequently the more convenient it is.
Searching for friends and family: By simply clicking the search tool and inputting the person's
name, username, or the email address used to create the account, the user should be able to
search for friends and family or any other account that he desires to follow.
User Information: Users should be able to quickly edit their first and last names, contact
information, address, and email ID in the app. Additionally, there should be a choice for them to
check the overall number of followers and the following, images posted, and photos in which they
are tagged.
Simple photo and video posting and deletion: The software should allow for simple user
photo and video uploads. Additionally, it should be simple for the user to delete it with just a few
taps.
Notifications: A user should be able to receive real-time notifications for any action involving
them, such as when someone likes a picture or video they've published online, when they get
messages, or if they've been mentioned in a post. Additionally, notifications must to be sent out
in the event of any questionable conduct.
13 | P a g e
3. Requirement Analysis
3.1Purpose and Scope:
 Purpose: It is an open portal used by Students and Faculty members for acess a social
platform where they can upload posts and visualize others posts and see the latest
notifications uploaded by others.
 Scope: Providing accessibility to all users who have a valid UserID and password. User
can post query. They can see answers only after they have logged in. Communication is
provided for the user through mails.
3.2 Users of the system:
 Students
 Faculty Members
 Admin
14 | P a g e
4. Specific Requirements
4.1 Functional and Non- Functional Requirements:
Functional Requirements:
 Individual profile management for all kind of users.
 Online query handlings for all users. Queries can be general or directed to a particular
the admins.
 Users can be trained from documentation provided by the admins or can watch tutorials
online.
 Facilitate communication between user, who are general public through information
provided by them.
 Information pages should be dynamic so that Users and Admins can change or make
any updates on their posts from their interface easily as per their requirements.
Non-functional Requirements:
 Secure access of confidential data (user’s details).
 24 X 7 availability
 Better component design to get better performance at peak time
 Flexible service based architecture will be highly desirable for future extension.
4.2 User Interface Requirements:
 Professional look and feel
 Browser testing and support for IE
 Documents can be uploaded and Downloaded.
15 | P a g e
5.System Architecture
Figure 1:System Architecture
16 | P a g e
6. System Requirements
6.1. Technologies Used:
FRONT END:
 JavaScript
 Material UI
 REACT JS
 HTML
 CSS
 BOOTSTRAP
BACKEND:
 NODEJS
 EXPRESSJS
DATABASE:
 MongoDB
FrontEnd:
Java script:
JavaScript is a script-based programming language that was developed by Netscape

Communication Corporation. JavaScript was originally called Live Script and renamed as
JavaScript to indicate its relationship with Java.
Material UI(MUI):
For quicker and easier web development, Material-UI is a user interface framework that
offers pre-defined and customisable React components. These Material-UI components
are built on top of Material Design by Google. Let's talk about the Material-UI library's
Typography component in this article.
HTML:
HTML, an initialism of Hypertext Markup Language, is the predominant markup language

for web pages. It provides a means to describe the structure of text-based information in
a document.
17 | P a g e
CSS:
CSS is a programming design language that contains all pertinent data pertaining to the
presentation of a webpage. A website or page's layout, colours, fonts, padding (the
space around each element), and other formatting elements are all defined by CSS.
A webpage's style is defined by CSS documents, which are then connected to the HTML
document (or another document in a different markup language) that provides the page's
content and structure. It is possible to set the style directly in the HTML document,
however this is not advised.
REACT.JS:
An open-source, free JavaScript library is called React. The ideal way to create user
interfaces is by assembling little pieces of code (components) into complete websites. It
was initially created by Facebook, and is now maintained by the open-source community.
One benefit of React is that you may use it however much or whatever little you wish!
You might, for instance, utilise only one React component on a single page or design
your complete website with React.
JSX, a JavaScript and XML mix, is used to create React.js. JSX is used to construct the
elements, and JavaScript is used to render them on your website. Although React
requires a lot of learning for a beginner developer, it is swiftly becoming one of the most
well-liked and sought-after JavaScript libraries.
BOOTSTRAP:
The programme that initialises the operating system (OS) during startup is known as a
bootstrap. In the early 1950s, the phrase "bootstrap" or "bootstrapping" first appeared. It
refers to a button that was used to start a hardwired bootstrap programme, a smaller
programme that ran the OS, or another larger application. Starting small and loading
programmes one at a time while each programme is "laced" or connected to the next
programme to be executed in sequence is claimed to be where the term "pulling yourself
up by your bootstraps" came from.
Backened:
NODE.JS:
JavaScript code can run server-side using the open source development platform
Node.js (Node). Node is helpful for creating real-time apps like chat, news feeds, and
web push alerts that need a permanent connection from the browser to the server.
Node.js is designed to use a single thread with one process at a time and run on a
dedicated HTTP server. Applications built using Node.js execute asynchronously and on
events. The Node platform does not use the conventional model of receive, process,
transmit, wait, and receive for its code. Instead, Node sends small queries one after the
other without stopping to wait for answers, processing incoming requests in a continual
event stack.
EXPRESSJS:
18 | P a g e
The open source development environment Node.js allows JavaScript code to execute
server-side (Node). Real-time apps that require a constant connection from the browser
to the server, such as chat, news feeds, and web push alerts, benefit from the use of
Node.
Node.js is made to run on a specific HTTP server using a single thread and one process
at a time. Applications created using Node.js run asynchronously and in response to
events. The traditional model of receive, process, transmit, wait, and receive is not used
by the Node platform for its programming.
Instead, Node processes incoming requests in a continuous event stack by sending tiny
queries one after the other without pausing to wait for responses.
DATABASE:
MongoDB:
Since MongoDB is fundamentally a distributed database, features like built-in high

availability, easy horizontal scaling, and geographic distribution are all included.
Use of MongoDB is cost-free. Versions that were made available before October 16,
2018, are licenced under the AGPL.
MongoDB stores data as adaptable documents that resemble JSON, which allow fields to
alter from document to document and allow data structures to change over time.
Data is simple to work with since the document model corresponds to the objects in your
application code.
Powerful methods for accessing and analysing your data include ad hoc queries,
indexing, and real-time aggregation.
5.2 Tools used:
 HEROKU
 POSTMAN
 UML DIAGRAM MAKER
HEROKU:
Heroku is a cloud Platform as a Service that uses containers (PaaS). Modern apps are
deployed, managed, and scaled by developers using Heroku. Our platform provides
developers with the quickest route to releasing their apps onto the market since it is
stylish, adaptable, and simple to use.
Heroku is completely managed, allowing developers to concentrate on their core

products without being distracted with servers, hardware, or infrastructure upkeep.
Services, tools, workflows, and polyglot support are all available through the Heroku
experience and are all intended to increase developer productivity.
POSTMAN:
19 | P a g e
Application programming interface (API) development tools like Postman make it easier
to create, test, and alter APIs. This tool contains almost all of the features that a
developer could possibly need. More than 5 million developers use it each month to
make developing APIs quick and straightforward. It can create several HTTP requests
(GET, POST, PUT, and PATCH), save environments for later use, and translate the API
into code for different languages (like JavaScript, Python).
20 | P a g e
UML Diagram Maker:
The components of the principles of object-oriented programming are represented by the

language known as the Unified Modeling Language (UML), which is utilised in the
industry of software engineering. It serves as the standard definition of the entire
software architecture or structure.
Complex algorithms are solved and interacted with in Object-Oriented Programming by

treating them as objects or entities. Anything can be one of these things. It could either
be a bank manager or the bank itself. The thing can be a machine, an animal, a vehicle,
etc. The issue is how we connect with and control them, even though they are capable of
and ought to execute duties.
The tasks can be interacting with other objects, transferring data from one object to another,
manipulating other objects, etc. The single software could have hundreds or even thousands
of objects. So, UML provides us a way to represent and track those objects in a diagram to
become a blueprint of our software architecture.
7.System Design
7.1 Data Flow Diagram:
21 | P a g e
7.2. Behavioral Diagrams:
7.2.1. Use Case Diagram:
Use case Diagrams represent the functionality of the system from a user’s point of view.
Use cases are used during requirements elicitation and analysis to represent the
functionality of the system. Use cases focus on the behavior of the system from external
point of view.
Actors are external entities that interact with the system. Examples of actors include
users like administrator, farmers, agriculture students etc., or another system like central
database.
Description:
Name of the Use Case: login
Description:
Every user should login to access the services provided by farmers buddy system.
Pre Condition: Each user must have a valid user id and password.
Post Condition: Home Page will be displayed.
Flow of events:
 Invoke the Login page.
 Enter the valid User ID and Password.
 Click on Login button to access Home page.
Name of the Use Case: Registration
Description:
Every new user can register by clicking on “Sign Up“ button.
Post condition: Registration page is displayed.
Flow of events:
 Invoke the Login page.
 Click on register now, link to access Sign up page.
Name of the Use Case: Logout
Description:
Every new user can log out by clicking on “log out” button.
22 | P a g e
Post Condition: Required Page will be displayed.
Flow of events: Logout
Name of the Use Case: Create or Delete Account
Description:
Every new user can create a new account by click on sign up page and can delete
. an account by using delete account from the menu.
Name of the Use Case: Follow or Unfollow any user
Description:
Every new user can Follow any other user by clicking on “Follow “button
On the user’s id and similarly can unfollow any user by clicking the “following” button
Again to Unfollow.
Name of the Use Case: Like Photo/video
Description:
Every new user can Like any Photo or Video .using the “Like” icon on any
Any photo or video.
Name of the Use Case: Logout
Description:
Every new user can log out by clicking on “log out” button.
23 | P a g e
Name of the Use Case: Add or Delete media
Description:
Every new user can add or delete media depending on their choice.
Name of the Use Case: Search
Description:
Every new user can search anyone’s post or id using searching by name or
By his unique Id.
Name of the Use Case: Send notification
Description:
System can send any important notification so that all the users can view
View important news and notices.
Name of the Use Case: Create TimeLine
Description:
Every new user can see the timestamp of when an user id was created.
24 | P a g e
USE CASE DIAGRAM
25 | P a g e
Figure 3:Use Case diagram
26 | P a g e
7.2.2 Class Diagram:
A class diagram is an illustration of the relationships and source code dependencies

among classes in the unified modeling language. In this context, a class defines the
methods and variables in an object, which is a specific entity in a program or the unit of
code representing that entity.
Figure 4:Class Diagram
27 | P a g e
7.2.3 Sequence Diagrams:
Sequence diagram is a diagram that shows object interactions arranged in time sequence. In
particular it shows objects participating in the interaction and the sequence of messages exchanged.
Figure 5:Sequence Diagram
28 | P a g e
7.2.4 E-R Diagram:
An Entity Relationship (ER) Diagram is a form of flowchart that shows the relationships between
"entities" like people, things, or concepts within a system. ER Diagrams are most frequently used in
the disciplines of software engineering, business information systems, education, and research to
build or troubleshoot relational databases. They are also known as ERDs or ER Models, and they use
a predetermined collection of symbols to represent the interconnectedness of entities, relationships,
and their qualities. These symbols include rectangles, diamonds, ovals, and connecting lines. They
have verbs for relationships and nouns for entities, mirroring the grammatical framework.
Figure 6:E-R diagram
29 | P a g e
7.3 System Specific Modules:
It has been modularized into following modules:
1. Home
2. Login
3. Signup
4. Profile
5. Create Post
6. Profile User Id
7. Reset Password
8. Reset Token
9. My Following Posts
10. My Documents
11. Create Documents
12. Departments
13. Not Found
14. Follow User
15. Update Photo
16.Like Post/Unlike Post
17. Comment Post
18. Uncomment Post
19. Delete Post
20. Following User Like Post
21. Following User UnLike Post
22. Alert Notifications
23. Use Reducer
24. Contact Us
30 | P a g e
1. Home:
This is the first page that is displayed when a the gets in to the URL and the First page i.e., “Ravello”
Homepage is displayed.
2. Login:
First, to use and enjoy the features of this application users has to login to this system. Basically
there are 2 types of users in this system.
 Admin users - are primary users who can access all features.
 Faculty members – are the users who can post important information regarding the events
and activities.
3. Sign Up:
First, to enter this system the users has to Sign Up to this system. Basically there are 2 types of users
in this system.
 First ever user to this site has to sign up in this site using sign up to get into this app.
4. Profile:
In order to add data files, links to articles, chapters, and entries in the Licensed Electronic Products
that they find interesting as well as search criteria that they may reuse, all Authorized Users have the
ability to build a My Profile Page.
 Only the registered users can create their profile after signing up and login in to this site.
5. Create Post:
 Go to your Page.
 Click Create post in the top right.
 Create your post.
 Click on view to view your post.
7. Reset Password:
Tap the password reset link. This takes you to a page where you can type in your Email id and if the
Email id is valid id of an existing user, then a reset password link is sent for the particular user Email
account and the user can click on the link and reset the password.
8. Reset Token: When a user clicks on Reset password, a Token is generated and is attached with the
reset password link , so that the link reaches to the intended and the verified user.
To achieve this, JWT token is used for securing REST APIs.
31 | P a g e
JWT(JSON Web Token):
JWT is the best way to communicate securely between client and server.
JWT follows a stateless authentication mechanism - we can implement JWT authentication entirely
stateless without storing session information on the server side.
JWT in the following helpful situations:

The most typical use case for JWT is
Authorization: Once logged in, the user can access routes, services, and resources that are authorised
with that token by including the JWT in any subsequent requests. Due to JWT's low overhead and ease
of use across several domains, single sign-on is a feature that is frequently employed today.
Information Transfer: Sending information securely between parties is made possible by JSON Web
Tokens. JWTs can be signed, hence.
Essentially, JSON Web Tokens are made up of three pieces, each separated by a dot (.):
1. Header
2. Payload
3. Signature
1. Header
Typically, the header is divided into two sections:
 JWT is the type of token used.
 The chosen signature algorithm, such as RSA or HMAC SHA256.
2. Payload
The payload, which includes the claims, makes up the token's second component. Claims are
assertions about a subject (usually the user) and supplementary information.
The payload is then Base64Url encoded to form the second part of the JSON Web Token.
3. Signature
You must sign the encoded header, encoded payload, secret, and algorithm indicated in the
header to construct the signature portion.
The signature is used to verify the message wasn't changed along the way, and, in the case of
tokens signed with a private key, it can also verify that the sender of the JWT is who it says it is.
9. My Following Posts:
The list of Ravello individuals you follow appears in your feed, and you may visit their profiles if
you'd like. This is referred to as following. You can directly see posts of these users, but they might
need to authorise the like first if you don't follow them back.
10. My Documents:
My Documents is the default personal folder for storing data. User’s Personal Pictures
and User’s personal Doc files that the user wants it to be stored safe and not be accessed
or viewed by others .
32 | P a g e
11. Create Documents:
Create Documents is the default personal folder for storing data. User’s Personal Pictures
and User’s personal Doc files that the user wants it to be stored safe.
 Only verified user of the current ID can use this feature to save the document.
12. Departments: Departments is the page where the users can see the number of departments and
the faculty members present in the department.
 Any user can see the Department details.
13. Not Found:
When an anonymous URL is clicked then there is a pop-up of “not found” to show that the user is
not an authorized one.
14. Follow User:
Using this website one can follow other existing users in the site who are previously logged in this
site and access there profile and photos that they are regularly posting.
15. Update Photo:
In this site, existing Users can update their profile photos and can add new photos in there profile.
16.Like Post/Unlike Post:
All the verified and authorized users can like or unlike others posts.
17. Comment Post:
All the verified users can comment on others posts.
18. Uncomment Post:
If there is any faulty or irrelevant comment users can delete their comment from their posts.
19. Delete Post:
The authorized user of any post can delete his or her post any time they want to.
20. Following User Like Post:
If any user wants to like the posts of their following User, they can like their posts by clicking on my
following posts icon and then proceed further.
33 | P a g e
21. Following User UnLike Post:
If any user wants to unlike the posts of their following User, they can unlike their posts by clicking on
my following posts icon and then proceed further.
22. Alert Notifications:
If User login is successful or unsuccessful then there is an alert notifification Pop-up.
23. Use Reducer:
It is a technique that is used to maintain the users state in the entire app and provides the
functionality to maintain users state.
24. Contact Us:
If there is any problem that the user faces while using the site then the user can directly contact to
the admin through the contact us page.
34 | P a g e
7.4 Screens
1. Login Page:
35 | P a g e
2. Sign Up Page:
36 | P a g e
3. HomePage:
37 | P a g e
4. Profile Page:
38 | P a g e
5. Create Post Page:
39 | P a g e
6. My Followings Post:
40 | P a g e
7. Contact Us:
41 | P a g e
8. Departments:
42 | P a g e
9.Add Documents:
43 | P a g e
10. My Documents:
44 | P a g e
11. Update Profile:
45 | P a g e
12. Reset Password:
46 | P a g e
7.5 Frontend Source code
1. Home.js
import React, { useState, useContext, useEffect } from "react";

import { makeStyles } from "@material-ui/core/styles";
// import clsx from 'clsx';
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
// import Collapse from '@material-ui/core/Collapse';
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
// import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
// import MoreVertIcon from '@material-ui/icons/MoreVert';
import ThumbUpIcon from "@material-ui/icons/ThumbUp";
import ThumbDownIcon from "@material-ui/icons/ThumbDown";
import { UserContext } from "../../App";
import Fab from "@material-ui/core/Fab";
import DeleteIcon from "@material-ui/icons/Delete";
import { Link } from "react-router-dom";
import CircularProgress from "@material-ui/core/CircularProgress";
const useStyles = makeStyles((theme) => ({

root: {
maxWidth: 345,
margin: "26px auto",
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
},
avatar: {
backgroundColor: red[500],
size: "small",
},
}));
47 | P a g e
export default function RecipeReviewCard() {
const [data, setData] = useState([]);
const classes = useStyles();
const [expanded, setExpanded] = React.useState(false);
const { state, dispatch } = useContext(UserContext);
useEffect(() => {
fetch("http://localhost:8000/allpost", {
headers: {
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
})
.then((res) => res.json())
.then((result) => {
setData(result.posts);
// console.log(result.posts)
});
}, []);
const handleExpandClick = () => {

setExpanded(!expanded);
};
const likePost = (id) => {
fetch("http://localhost:8000/like", {
method: "put",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
postid: id,
}),
})
.then((result) => {
console.log(result);
const newData = data.map((item) => {
if (item._id == result._id) {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
const unlikePost = (id) => {
fetch("http://localhost:8000/unlike", {
method: "put",
headers: {
},
48 | P a g e
postid: id,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
const makecomment = (text, postid) => {
fetch("http://localhost:8000/comment", {
method: "put",
headers: {
},
text,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
const deletepost = (postid) => {
fetch(`http://localhost:8000/deletepost/${postid}`, {
method: "delete",
headers: {
},
})
49 | P a g e
.then((result) => {
const newData = data.filter((item) => {
return item._id !== result._id;
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
const deletecomment = (commentId, postid) => {
fetch("http://localhost:8000/deletecomment", {
method: "put",
headers: {
},
commentId,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
return (
<>
{data ? (
data.map((item) => {
return (
<Card className={classes.root}>
<CardHeader
avatar={
<Avatar
src={item.postedby.pic}
aria-label="recipe"
className={classes.avatar}
/>
}
action={
50 | P a g e
item.postedby._id == state._id && (
<Fab color="secondary" aria-label="edit">
<DeleteIcon onClick={() => deletepost(item._id)} />
</Fab>
)
}
title={
<Link
className="link"
to={
item.postedby._id !== state._id
? "/profile/" + item.postedby._id
: "/profile"
}
>
{item.postedby.name}
</Link>
}
subheader={item.title}
/>
<CardMedia
className={classes.media}
image={item.photo}
title="Paella dish"
/>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
{item.likes.includes(state._id) ? (
<ThumbDownIcon onClick={() => unlikePost(item._id)} />
) : (
<ThumbUpIcon onClick={() => likePost(item._id)} />
)}
</IconButton>
</CardActions>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
{item.likes.length} likes
</Typography>
{item.body}
</Typography>
{item.comments.map((comment) => {
return (
<>
<p>
<span>{comment.postedby.name}:</span> {comment.text}{" "}
{comment.postedby._id === state._id ? (
<DeleteIcon
onClick={() => deletecomment(comment._id, item._id)}
/>
) : null}{" "}
</p>
</>
);
})}
51 | P a g e
<form
onSubmit={(event) => {
event.preventDefault();
makecomment(event.target[0].value, item._id);
}}
>
<input type="text" placeholder="Enter your comments" />
</form>
</CardContent>
</Card>
);
})
) : (
<CircularProgress />
)}
</>
);
}
2. Login.js
import React, { useContext, useState } from 'react';

import { Link, useHistory } from 'react-router-dom'
import Alerts from './Alerts'
import { UserContext } from '../../App'
const Login = () => {

const { state, dispatch } = useContext(UserContext)
const history = useHistory()
const [password, SetPassword] = useState("")
const [email, SetEmail] = useState("")
const [alert, SetAlert] = useState({ isopen: false, type: '', message: '' })
const PostData = () => {
if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]
{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
$/.test(email)) {
return SetAlert({ isopen: true, type: "error", message: "Invalid email" })
}
else {
fetch('http://localhost:8000/signin', {
method: "post",
headers: {
},
email,
password
})
}).then(res => res.json())
.then(data => {
console.log(data)
if (data.error) {
return SetAlert({ isopen: true, type: "error", message:
data.error })
}
52 | P a g e
else {
localStorage.setItem("jwt", data.token)
localStorage.setItem("user", JSON.stringify(data.user))
dispatch({ type: "USER", payload: data.user })
SetAlert({ isopen: true, type: "success", message: "Logged in
successfuly" })
setTimeout(() => {
history.push('/')
}, 4000);
}
}).catch(err => {
console.log(err)
})
}
}
return (
<>
<div className="mycard ">
<div className="card auth-card input-field">
<h2 className="brand-logo">Ravello</h2>
<input type="text" placeholder="Email" value={email}
onChange={(event) => SetEmail(event.target.value)} ></input>
<input type="password" placeholder="Password" value={password}
onChange={(event) => SetPassword(event.target.value)} ></input>
<button className="btn waves-effect waves-light #64b5f6 blue
lighten-2" type="submit" name="action" onClick={() => PostData()}>Login</button>
<Link to="/signup"> <h6>New User?click to signup</h6></Link>
<Link to="/reset"> <h6>Forgot password?</h6></Link>
</div>
</div>
<Alerts alert={alert} Setalert={SetAlert} />
</>
);
}
export default Login;
3. SignUp.js
import React, { useState, useEffect } from "react";

import { Link, useHistory } from "react-router-dom";
import Alerts from "./Alerts";
const Signup = () => {

const history = useHistory();
const [name, SetName] = useState("");
const [password, SetPassword] = useState("");
const [email, SetEmail] = useState("");
const [image, setImage] = useState();
const [url, setUrl] = useState(undefined);
const [alert, SetAlert] = useState({ isopen: false, type: "", message: "" });
useEffect(() => {
if (url) {
uploadFields();
}
53 | P a g e
}, [url]);
const uploadPic = () => {
const formData = new FormData();
formData.append("file", image);
formData.append("upload_preset", "insta-clone");
formData.append("cloud_name", "sitanshu");
console.log(image);
fetch("https://api.cloudinary.com/v1_1/sitanshu/image/upload", {
method: "post",
body: formData,
})
.then((data) => {
console.log(data.url);
setUrl(data.url);
})
.catch((err) => {
console.log(err);
});
};
const uploadFields = () => {
if (
!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.
[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
email
)
) {
return SetAlert({
isopen: true,
type: "error",
message: "Invalid email",
});
} else {
fetch("http://localhost:8000/signup", {
method: "post",
headers: {
},
name,
email,
password,
pic: url,
}),
})
.then((data) => {
console.log(data);
if (data.error) {
return SetAlert({
isopen: true,
type: "error",
message: data.error,
});
} else {
54 | P a g e
SetAlert({ isopen: true, type: "success", message: data.message });
setTimeout(() => {
history.push("/login");
}, 4000);
}
})
.catch((err) => {
console.log(err);
});
}
};
if (image) {
uploadPic();
} else {
uploadFields();
}
};
return (
<>
<input
type="text"
placeholder="Name"
value={name}
onChange={(event) => SetName(event.target.value)}
></input>
<input
type="text"
placeholder="Email"
value={email}
onChange={(event) => SetEmail(event.target.value)}
></input>
<input
type="password"
placeholder="Password"
value={password}
onChange={(event) => SetPassword(event.target.value)}
></input>
<div className="file-field input-field">
<div className="btn">
<span>Upload Pic</span>
<input
type="file"
accept=".jpg,.jpeg"
placeholder="* .jpg,.jpeg only
"
onChange={(event) => {
setImage(event.target.files[0]);
}}
/>
<div className="file-path-wrapper">
55 | P a g e
<input
placeholder="*.jpg,jpeg only"
className="file-path validate"
type="text"
/>
</div>
</div>
<input
className="file-path validate"
type="text"
value={image?.name}
/>
</div>
</div>
<button
className="btn waves-effect waves-light #64b5f6 blue lighten-2"
type="submit"
name="action"
onClick={() => PostData()}
>
Signup
</button>
<Link to="/login">
{" "}
<h6>Already have an account?click to sign in</h6>
</Link>
</div>
</div>
</>
);
};
export default Signup;
4. Userprofile.js
import { useEffect } from 'react';
import { UserContext } from '../../App'
import { useParams, useHistory } from 'react-router-dom'
import CircularProgress from '@material-ui/core/CircularProgress';
import NotFound from './NotFound'
const UserProfile = () => {

const [Profile, setProfile] = useState()
const { state, dispatch } = useContext(UserContext)
const [showFollow, setShowFollow] = useState(true)
const { userid } = useParams()
useEffect(() => {
fetch(`http://localhost:8000/user/${userid}`, {
headers: {
"Authorization": "Bearer " + localStorage.getItem("jwt")
},
56 | P a g e
.then(result => {
if (result.error) {
history.push('/NotFound')
} else {
setProfile(result)
}
})
}, [userid])
const followUser = () => {

fetch('http://localhost:8000/follow', {
method: "put",
headers: {
},
followId: userid
})
.then(result => {
console.log(result)
dispatch({ type: "UPDATE", payload: { following: result.following, followers:
result.followers } })
localStorage.setItem("user", JSON.stringify(result))
setProfile((prevState) => {
return {
...prevState,
user: {
...prevState.user,
followers: [...prevState.user.followers, result._id]
}
}
})
})
setShowFollow(false)
}
const unfollowUser = () => {
fetch('http://localhost:8000/unfollow', {
method: "put",
headers: {
},
unfollowId: userid
})
.then(result => {
console.log(result)
dispatch({ type: "UPDATE", payload: { following: result.following, followers:
result.followers } })
localStorage.setItem("User", JSON.stringify(result))
57 | P a g e
setProfile((prevState) => {
return {
...prevState,
user: {
...prevState.user,
followers: prevState.user.followers.filter(item => item != result._id)
}
}
})
console.log(UserProfile)
})
setShowFollow(true)
}
return (
<>
{Profile ? <><div className="main_profile">
<div className="profile">
<div className="profile-pic">
<img src={Profile?.user.pic} alt="profile_pic" />
</div>
<div>
<h4>{Profile?.user.name}</h4>
<h4>{Profile?.user.email}</h4>
<div className="profile-status">
<h5>{Profile?.posts.length} posts</h5>
<h5>{Profile?.user.followers.length} followers</h5>
<h5>{Profile?.user.following.length} followings</h5>
</div>
{showFollow ? <button className="btn waves-effect waves-light #64b5f6 blue
lighten-2" type="submit" name="action" onClick={() => followUser()}>Follow</button> :
<button className="btn waves-effect waves-light #64b5f6 blue lighten-2"
type="submit" name="action" onClick={() => unfollowUser()}>Unfollow</button>
}
</div>
</div>
</div>
<div className="gallery">
{
Profile?.posts.map(item =>
<img key={item._id} src={item.photo} alt={item.title} />
)
}
</div></> : <CircularProgress />
}
</>
)
}
export default UserProfile;
5. Createpost.js
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
58 | P a g e
import Backdrop from '@material-ui/core/Backdrop';
import { makeStyles } from '@material-ui/core/styles';

backdrop: {
zIndex: theme.zIndex.drawer + 1,
color: '#fff',
},
}));
const CreatPost = () => {
const [title, setTitle] = useState("")
const [body, setBody] = useState("")
const [image, setImage] = useState("")
const [url, setUrl] = useState("")
const [open, setOpen] = React.useState(false);
useEffect(() => {
if (url) {
fetch("http://localhost:8000/creatpost", {
method: "post",
headers: {
},
title,
body,
photo: url
})
.then(data => {
console.log(data)
if (data.error) {
return <Alerts type="error" message="Error" />
}
else {
SetAlert({ isopen: true, type: "success", message: "Post
created successfully" })
setTimeout(() => {
history.push('/')
}, 4000);
}
}).catch(err => {
console.log(err)
})
}
}, [url])
const postDetails = () => {
if (!title || !body || !image) {
59 | P a g e
return SetAlert({ isopen: true, type: "error", message:"Plz fillup all the
fields" })
} else {
setOpen(!open)
const formData = new FormData()
formData.append("file", image)
formData.append("upload_preset", "insta-clone")
formData.append("cloud_name", "sitanshu")
method: 'post',
body: formData
.then(data => {
if (data.error) {
data.error })
}
else {
console.log(data.url)
setUrl(data.url)
}
}).catch(err => {
console.log(err)
})
}
}
return (
<>
{
<input type="text" placeholder="Title" value={title}
onChange={(event) => setTitle(event.target.value)} ></input>
<input type="text" placeholder="Body" value={body}
onChange={(event) => setBody(event.target.value)} ></input>
<span>Upload Image</span>
<input type="file" accept=".jpg,.jpeg"
onChange={(event) => { setImage(event.target.files[0]) }} />
</div>
<input value={image?.name} placeholder="* .jpg,*jpeg
only" className="file-path validate" type="text" />
</div>
</div>
lighten-2" type="submit" name="action" onClick={() => postDetails()}>Submit</button>
</div>
</div>
}
<Backdrop className={classes.backdrop} open={open} >
<CircularProgress color="inherit" />
60 | P a g e
</Backdrop>
</>
)
}
export default CreatPost
6. Createpost.js

// import clsx from 'clsx';
// import Collapse from '@material-ui/core/Collapse';

root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
expand: {
marginLeft: "auto",
}),
},
expandOpen: {
},
avatar: {
size: "small",
},
}));
61 | P a g e
useEffect(() => {
fetch("http://localhost:8000/followingposts", {
headers: {
},
})
.then((result) => {
});
}, []);

};
method: "put",
headers: {
},
postid: id,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
},
62 | P a g e
postid: id,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
},
text,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "delete",
headers: {
},
})
63 | P a g e
.then((result) => {
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
},
commentId,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
return data.map((item) => {
return (
<CardHeader
avatar={
<Avatar
aria-label="recipe"
/>
}
action={
64 | P a g e
</Fab>
)
}
title={
<Link
className="link"
to={
: "/profile"
}
>
</Link>
}
/>
<CardMedia
image={item.photo}
title="Paella dish"
/>
) : (
)}
</IconButton>
</CardActions>
<CardContent>
</Typography>
{item.body}
</Typography>
return (
<>
<p>
<DeleteIcon
/>
) : null}
</p>
</>
);
})}
<form
65 | P a g e
}}
>
</form>
</CardContent>
</Card>
);
});
}
7. FollowingUsersposts.js


root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
expand: {
marginLeft: "auto",
}),
},
expandOpen: {
},
avatar: {
size: "small",
66 | P a g e
},
}));

useEffect(() => {
fetch("http://localhost:8000/followingposts", {
headers: {
},
})
.then((result) => {
});
}, []);

};
method: "put",
headers: {
},
postid: id,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
67 | P a g e
},
postid: id,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
},
text,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "delete",
headers: {
68 | P a g e
},
})
.then((result) => {
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
method: "put",
headers: {
},
commentId,
postid,
}),
})
.then((result) => {
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
};
return data.map((item) => {
return (
<CardHeader
avatar={
<Avatar
aria-label="recipe"
/>
}
action={
69 | P a g e
</Fab>
)
}
title={
<Link
className="link"
to={
: "/profile"
}
>
</Link>
}
/>
<CardMedia
image={item.photo}
title="Paella dish"
/>
) : (
)}
</IconButton>
</CardActions>
<CardContent>
</Typography>
{item.body}
</Typography>
return (
<>
<p>
<DeleteIcon
/>
) : null}
</p>
</>
);
})}
<form
70 | P a g e
}}
>
</form>
</CardContent>
</Card>
);
});
}
8. FollowingUsersposts.js
import React from 'react'
const Department1 = () => {

return (
<div>
<div class="elementor-element elementor-element-45c7c0d elementor-widget
elementor-widget-shortcode" data-id="45c7c0d" data-element_type="widget" data-
widget_type="shortcode.default">
<div class="elementor-widget-container">
<div class="elementor-shortcode">
<table id="tablepress-3" class="tablepress tablepress-id-3">
<thead>
<tr class="row-1 odd">
<th class="column-1">Department</th><th class="column-2">Faculty Name</th><th
class="column-3">Designation</th><th class="column-4">Email-ID</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Pritirekha
Daspattanaik</td><td class="column-3">Professor</td><td class="column-
4">pritirekha1962@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Ranjana
Bajpai</td><td class="column-3">Associate Professor</td><td class="column-
4">ranjudel@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Siba Sankar
Sahu</td><td class="column-3">Asst. Professor</td><td class="column-
4">sibasankarjnu@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Kapil Kumar
Gavsker (On-lien)</td><td class="column-3">Asst. Professor</td><td class="column-
4"></td>
</tr>
71 | P a g e
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Sibabrata
Das</td><td class="column-3">Asst. Professor</td><td class="column-4"></td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Ms. Binodini
Majhi</td><td class="column-3">Asst. Professor</td><td class="column-
4">binodini2007@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Jajnaseni
Rout</td><td class="column-3">Teaching Faculty</td><td class="column-
4">jajnasenirout@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. L. Prasanna
Kumar</td><td class="column-3">Teaching Faculty</td><td class="column-
4">a3prasanna@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Dr. Sarmistha
Singh</td><td class="column-3">Teaching Faculty</td><td class="column-
4">singh.sarmistha3@gmail.com</td>
</tr>
<td class="column-1">Applied Geography</td><td class="column-2">Mr. Bijay Ketan
Swain</td><td class="column-3">Teaching Faculty</td><td class="column-
4">bijayketanswain4@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Prof. Pradipta K.
Mohapatra</td><td class="column-3">Professor</td><td class="column-
4">pradiptamoha@yahoo.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Soumendra Kumar
Naik</td><td class="column-3">Associate Professor</td><td class="column-
4">sknuu@yahoo.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Sanhita Padhi</td><td
class="column-3">Associate Professor</td><td class="column-
4">san_puri9828@rediffmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Durga Prasad
Barik</td><td class="column-3">Asst. Professor</td><td class="column-
4">barikdp@yahoo.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Nihar Ranjan
Singh</td><td class="column-3">Asst. Professor</td><td class="column-
4">nihar.singh@gmail.com</td>
</tr>
72 | P a g e
<td class="column-1">Botany</td><td class="column-2">Dr. Khirod Kumar
Sahoo</td><td class="column-3">Asst. Professor</td><td class="column-
4">khirod555@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Umesh Chandra
Naik</td><td class="column-3">Asst. Professor</td><td class="column-
4">umeshbiology@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Padan Kumar Jena</td><td
class="column-3">Teaching Faculty</td><td class="column-
4">padan_jena@rediffmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Debasish
Mohapatra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">debasish2050@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Shasmita</td><td
class="column-3">Teaching Faculty</td><td class="column-4">shasmitahota@ymail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr.
SubhashreePriyadarshini</td><td class="column-3">Teaching Faculty</td><td
class="column-4">subhashree.priya22@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Dr. Madhabi Madhusmita
Bhanjadeo</td><td class="column-3">Teaching Faculty</td><td class="column-
4">mmbd.0123@gmail.com</td>
</tr>
<td class="column-1">Botany</td><td class="column-2">Ms. Debaswapna Ray</td><td
4">debaswapnaray.13@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr Biswaroop
Singh</td><td class="column-3">Teaching Faculty</td><td class="column-
4">biswaroops@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr Swayambhu
Kalyan Mishra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">mishra.swayambhu@yahoo.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr
Shradhanjali Panda</td><td class="column-3">Teaching Faculty</td><td class="column-
4">shradha313@yahoo.co.in</td>
</tr>
73 | P a g e
<td class="column-1">Business Administartion</td><td class="column-2">Ms. Anuradha
Dash</td><td class="column-3">Teaching Faculty</td><td class="column-
4">ad.anu88@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Mr.
Punyasloka Rath</td><td class="column-3">Teaching Faculty</td><td class="column-
4">punyasloka.mba@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Mr. Susanta
Kumar Mishra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">mastersusanta@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr. Leena
Priyadarshini Singh</td><td class="column-3">Teaching Faculty</td><td class="column-
4">leenapsingh@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr. Ashok
Kumar Dash</td><td class="column-3">Teaching Faculty</td><td class="column-
4">akdash2020@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Ms. Arunita
Padhi</td><td class="column-3">Teaching Faculty</td><td class="column-
4">arunnita@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr.
Soumendra Kumar Patra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">soumendra.patra@gmail.com</td>
</tr>
<td class="column-1">Business Administartion</td><td class="column-2">Dr Biswa
Ranjan Mishra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">drbiswaranjanmishra@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Smruti Prava
Das</td><td class="column-3">Professor</td><td class="column-
4">smrutipravadas@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. KSK Varadwaj</td><td
class="column-3">Associate Professor</td><td class="column-4">svaradwaj@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Jaya Prakash
Das</td><td class="column-3">Associate Professor</td><td class="column-
4">jaypdas@gmail.com</td>
</tr>
74 | P a g e
<td class="column-1">Chemistry</td><td class="column-2">Dr. Bairagi Charan
Mallick</td><td class="column-3">Asst. Professor</td><td class="column-
4">bairagimallick@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Sabita Nayak</td><td
class="column-3">Asst. Professor</td><td class="column-4">sabitanayak@yahoo.co.in</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Purnendu Parhi</td><td
class="column-3">Asst. Professor</td><td class="column-4">pparhi@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Rashmi Rekha
Satapathy</td><td class="column-3">Asst. Professor</td><td class="column-
4">rashmi.satapathy@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Seetaram
Mohapatra</td><td class="column-3">Asst. Professor</td><td class="column-
4">seetaram.mohapatra@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Prof. Ajaya Ku.
Pattanaik</td><td class="column-3">Teaching Faculty</td><td class="column-
4">ajaypattanaik_kumar@yahoo.co.in</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Prof. Prakash
Mohanty</td><td class="column-3">Teaching Faculty</td><td class="column-
4">pmohantyuu@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Prof. Sreelekha
Bhattamisra</td><td class="column-3">Teaching Faculty</td><td class="column-
4">sreelekha.bbsr@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Baidhar Sahu</td><td
4">baidharsahu1953@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Subhraseema
Das</td><td class="column-3">Teaching Faculty</td><td class="column-
4">subhraseema@gmial.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Anima Bose</td><td
class="column-3">Teaching Faculty</td><td class="column-4">boseanima.11@gmail.com</td>
</tr>
<td class="column-1">Chemistry</td><td class="column-2">Dr. Siba Soren</td><td
class="column-3">Teaching Faculty</td><td class="column-4">siba.ssoren@gmail.com</td>
</tr>
75 | P a g e
</tbody>
</table>
</div>
</div>
</div>
</div>

)
}
export default Department1
8.Mydocuments.js
import React from 'react';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles({

table: {
minWidth: 650,
},
});
export default function MyDocuments1() {

const [mydocuments, setMyDocuments] = React.useState([]);
React.useEffect(() => {
fetch("http://localhost:8000/mydocuments", {
headers: {
},
})
.then((result) => {
setMyDocuments(result.documents);
});
}, []);
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table" >
<TableHead>
<TableRow>
<TableCell align="center">Document Name</TableCell>
<TableCell align="center">Download Link </TableCell>
</TableRow>
76 | P a g e
</TableHead>
<TableBody>
{mydocuments.map((document) => (
<TableRow key={document.title}>
<TableCell component="th" scope="row" align="center">
{document.title}
</TableCell>
<TableCell align="center">{<a href={document.my_document}>
{'View/Download'}
</a>}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
9.CreateDocument.js
import React, { useEffect, useState } from 'react'

import TextField from '@material-ui/core/TextField';
import { useHistory } from 'react-router-dom'
import Backdrop from '@material-ui/core/Backdrop';

backdrop: {
zIndex: theme.zIndex.drawer + 1,
color: '#fff',
},
}));
const CreatDocument = () => {
const [title, setTitle] = useState("")
const [description, setDescription] = useState("")
const [image, setImage] = useState("")
const [url, setUrl] = useState("")
const [open, setOpen] = React.useState(false);
useEffect(() => {
if (url) {
fetch("http://localhost:8000/creatdocument", {
method: "post",
headers: {
},
title,
77 | P a g e
description,
my_document: url
})
.then(data => {
console.log(data)
if (data.error) {
return <Alerts type="error" message="Error" />
}
else {
SetAlert({ isopen: true, type: "success", message: "Post
created successfully" })
setTimeout(() => {
history.push('/')
}, 4000);
}
}).catch(err => {
console.log(err)
})
}
}, [url])
const postDetails = () => {
if (!title || !description || !image) {
return SetAlert({ isopen: true, type: "error", message:"Plz fillup all the
fields" })
} else {
setOpen(!open)
const formData = new FormData()
formData.append("file", image)
formData.append("upload_preset", "insta-clone")
formData.append("cloud_name", "sitanshu")
method: 'post',
body: formData
.then(data => {
if (data.error) {
data.error })
}
else {
console.log(data)
setUrl(data.url)
}
}).catch(err => {
console.log(err)
})
}
}
return (
<>
{
78 | P a g e
<input type="text" placeholder="Title" value={title}
onChange={(event) => setTitle(event.target.value)} ></input>
<input type="text" placeholder="Description"
value={description} onChange={(event) => setDescription(event.target.value)} ></input>
<span>Upload Document</span>
<input type="file" accept="application/pdf"
onChange={(event) => { setImage(event.target.files[0]) }} />
</div>
<input value={image?.name} placeholder='* Pdf files
only' className="file-path validate" type="text" />
</div>
</div>
lighten-2" type="submit" name="action" onClick={() => postDetails()}>Submit</button>
</div>
</div>
}
<Backdrop className={classes.backdrop} open={open} >
<CircularProgress color="inherit" />
</Backdrop>
</>
)
}
export default CreatDocument
10.ContactUs.js

import '../../css/demo.css'
import '../../css/style.css'
const ContactUs = () => {

return (
<>
<header className="ScriptHeader">
<div className="rt-container">
<div className="col-rt-12">
<div className="rt-heading">
<h1>Feel free to reach us</h1>

</div>
</div>
</div>
</header>
<section>
<div className="rt-container">
<div className="col-rt-12">
<div className="Scriptcontent">
<div>
<div className="container">
<div className="contact-parent">
79 | P a g e
<div className="contact-child child1">
<p>
<i className="fas fa-map-marker-
alt"></i> Address <br />
<span> Ravenshaw University
<br />
Cuttack,Odisha,753003
</span>
</p>
<p>
<i className="fas fa-phone-alt"></i>
Let's Talk <br />
<span> 0680-22907854</span>
</p>
<p>
<i className=" far fa-envelope"></i>
General Support <br />
<span>RavenshawUniversity.ac.in</span>
</p>
</div>
<div className="contact-child child2">

<div className="inside-contact">
<h2>Contact Us</h2>
<h3>
<span id="confirm" />
</h3>
<p>Name *</p>
<input id="txt_name" type="text"
Required="required" />
<p>Email *</p>
<input id="txt_email" type="text"
<p>Phone *</p>
<input id="txt_phone" type="text"
<p>Subject *</p>
<input id="txt_subject" type="text"
<p>Message *</p>
<textarea id="txt_message" rows="4"
cols="20" Required="required" ></textarea>
<input type="submit" id="btn_send"

value="SEND" />
</div>
</div>
</div>
80 | P a g e
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default ContactUs;
11.NewPassword.js

import { Link, useHistory, useParams } from 'react-router-dom'
const NewPassword = () => {

const [password, SetPassword] = useState("")
const { token } = useParams()

fetch("http://localhost:8000/new-password", {
method: "post",
headers: {
},
newPassword: password,
token
})
.then(data => {
console.log(data)
if (data.error) {
return SetAlert({ isopen: true, type: "error", message: data.error
})
}
else {
SetAlert({ isopen: true, type: "success", message: "password reset
successfull" })
setTimeout(() => {
history.push('/login')
}, 4000);
}
}).catch(err => {
console.log(err)
})
}
81 | P a g e
return (
<>
<input type="password" placeholder="Enter a new Password"
value={password} onChange={(event) => SetPassword(event.target.value)} ></input>
lighten-2" type="submit" name="action" onClick={() => PostData()}>confirm</button>
</div>
</div>
</>
);
}
export default NewPassword;
12.Reset.js
import React, { useState } from 'react';

import { useHistory, Link } from 'react-router-dom'
const Reset = () => {

const [email, SetEmail] = useState("")

if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]
{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
$/.test(email)) {
return SetAlert({ isopen: true, type: "error", message: "Invalid email" })
}
else {
fetch("http://localhost:8000/reset-password", {
method: "post",
headers: {
},
email
})
.then(data => {
console.log(data)
if (data.error) {
data.error })
}
else {
82 | P a g e
SetAlert({ isopen: true, type: "success", message:
data.message })
}
}).catch(err => {
console.log(err)
})
}
}
return (
<>
<input type="text" placeholder="Email" value={email}
onChange={(event) => SetEmail(event.target.value)} ></input>
lighten-2" type="submit" name="action" onClick={() => PostData()}>Reset
password</button>
</div>
</div>
</>
);
}
export default Reset;
13. Alert.js

import Snackbar from '@material-ui/core/Snackbar';
import Alert from '@material-ui/lab/Alert';

root: {
width: '100%',
'& > * + *': {
marginTop: theme.spacing(2),
},
},
}));
export default function Alerts(props) {

const { alert, SetAlert } = props
const handleClose = (event, reason) => {

if (reason === 'clickaway') {
return;
}
alert.isopen=false;
};
83 | P a g e
return (
<div className={classes.root}>
<Snackbar open={alert.isopen} autoHideDuration={6000} onClose={handleClose}>
<Alert variant="filled" severity={alert.type} onClose={handleClose} >
{alert.message}
</Alert>
</Snackbar>
</div>
);
}
14.NotFound.js
import { Container } from '@material-ui/core'

import React from 'react'
import { Link } from 'react-router-dom'
const NotFound = () => {

return (
<>
<div className="container">
<div className="row">
<div className="col-5">
<h5>404 ! Page not found</h5>
<Link to="/"> <h6>click here to go home page....</h6></Link>
</div>
</div>
</div>
</>
)
}
export default NotFound
15. Navbar.js
import React, { useContext, useEffect, useRef } from "react";

import { Link, useHistory } from "react-router-dom";
import { UserContext } from "../App";
import InputBase from "@material-ui/core/InputBase";
import { fade, makeStyles } from "@material-ui/core/styles";
import SearchIcon from "@material-ui/icons/Search";
import Popover from "@material-ui/core/Popover";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
const useStyles2 = makeStyles((theme) => ({

root: {
84 | P a g e
width: "100%",
maxWidth: 860,
backgroundColor: theme.palette.background.paper,
position: "relative",
overflow: "auto",
maxHeight: 300,
},
listSection: {
backgroundColor: "inherit",
},
ul: {
backgroundColor: "inherit",
padding: 0,
},
}));
const Navbar = () => {

const history = useHistory();
const [anchorEl, setAnchorEl] = React.useState(null);
const [search, setSearch] = React.useState();
const [findUser, setFindUser] = React.useState([]);
const searchRef = useRef();

root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "100%",
marginLeft: theme.spacing(1),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
85 | P a g e
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "start",
justifyContent: "start",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
const handleClick = (event) => {
setAnchorEl(event.current);
};
const handleClose = () => {
setAnchorEl(null);
};
const [anchorEl1, setAnchorEl1] = React.useState(null);
const open = Boolean(anchorEl);

const id = open ? "simple-popover" : undefined;
const classes2 = useStyles2();
const renderlist = () => {
if (state) {
return [
<li>
<div className={classes.root}>
<div className={classes.search}>
{/* <div className={classes.searchIcon}>
<SearchIcon />
</div> */}
<InputBase
ref={searchRef}
onChange={(e) => {
searchUser(e.target.value);
}}
placeholder="Search User…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
86 | P a g e
/>
</div>
</div>
</li>,
<li>
<Link key="2" to="/profile">
Profile
</Link>
</li>,
<li>
<Link key="3" to="/creatpost">
Create Post
</Link>
</li>,
<li>
<Link key="3" to="/myfollowingpost">
My Following Post
</Link>
</li>,
<li>
<Link key="3" to="/contactus">
Contact Us
</Link>
</li>,
<li>
<Link key="4" to="/departments">
Departments
</Link>
</li>,
<li>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={(event) => {
setAnchorEl1(event.currentTarget);
}}
>
My Documents
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl1}
keepMounted
open={Boolean(anchorEl1)}
onClose={() => {
setAnchorEl1(null);
}}
>
<MenuItem
onClick={() => {
setAnchorEl1(null);
}}
>
<Link key="4" to="/creatdocuments">
Add Documents
87 | P a g e
</Link>
</MenuItem>
<MenuItem
onClick={() => {
setAnchorEl1(null);
}}
>
<Link key="5" to="/mydocuments">
My Documents
</Link>
</MenuItem>
</Menu>
</li>,
<li>
<button
className="btn waves-effect waves-light #f44336 red"
type="submit"
name="action"
onClick={() => {
localStorage.clear();
dispatch({ type: null });
history.push("/login");
}}
>
LogOut
</button>
</li>,
];
} else {
return [
<li>
<Link key="4" to="/login">
Login
</Link>
</li>,
<li>
<Link key="5" to="/signup">
Signup
</Link>
</li>,
];
}
};
const searchUser = (name) => {
setSearch(name);
fetch(`http://localhost:8000/search-user`, {
method: "post",
headers: {
},
name,
}),
})
88 | P a g e
.then((result) => {
setFindUser(result);
if (!findUser.length == 0) handleClick(searchRef);
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<nav>
<div className="nav-wrapper">
<Link key="6" to={state ? "/" : "/login"} className="brand-logo">
Ravello
</Link>
<ul id="nav-mobile" className="right ">
{renderlist()}
</ul>
</div>
</nav>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<List className={classes2.root}>
{
<ul className={classes2.ul}>
{findUser.map((item) => (
<ListItem>
<Link
to={
item._id !== state._id
? "/profile/" + item._id
: "/profile"
}
>
{" "}
<ListItemText primary={` ${item.name}`} />
</Link>
</ListItem>
))}
</ul>
}
</List>
89 | P a g e
</Popover>
</>
);
};
export default Navbar;
7.6 Reducers.js
export const intialstate = null
export const reducer = (state, action) => {
if (action.type === "USER") {
return action.payload
}
if (action.type === "UPDATE") {
return {
...state,
followers: action.payload.followers,
following: action.payload.following
}
}
if (action.type === "UPDATEPIC") {
return {
...state,
pic: action.payload
}
}
return null
}
HTML Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/
materialize.min.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
90 | P a g e
<style>
body {
background-image: url("https://www.amcorpindia.com/wp-content/uploads/light-
website-backgrounds-light-color-background-images-light-color-background-images-for-
website-1024x640.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<div id="root"></div>

</body>
</html>
Dependencies in Package.json(Client)
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.9.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@mui/material": "^5.9.1",
"@svgr/webpack": "4.3.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
91 | P a g e
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mini-css-extract-plugin": "0.9.0",
"nodemon": "^2.0.6",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.8",
"ts-pnp": "1.1.6",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
92 | P a g e
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
93 | P a g e
"presets": [
"react-app"
]
}
}
7.7 Backened Source Code
Configure
1. dev.js
module.exports={
MONGOURI:"mongodb+srv://sid:vKUIfD3AVCKBWXi9@cluster0.kx9pm.mongodb.net/
insta_clone?retryWrites=true&w=majority",
JWT_SECRET:"jwgwqndwqdhjdjogdhqnddjgfwen2vfifuwofyofjw",

SENDGRID_API:"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",
EMAIL:"https://insta-clone-sid.herokuapp.com"
}
MiddleWare
1. requirelogin.js
const jwt = require('jsonwebtoken')

const { JWT_SECRET } = require('../config/keys')
const mongoose=require('mongoose')
const User=mongoose.model('users')
module.exports = (req, res, next) => {
const { authorization } = req.headers
// authorization=Bearer token
if (!authorization) {
return res.status(401).json({ error: "You must be logged in " })
}
const token = authorization.replace("Bearer ", "")
jwt.verify(token, JWT_SECRET,(err,payload) => {
if(err){
return res.status(401).json({ error: "You must be logged in " })
}
const {_id}=payload
User.findById(_id).then(userdata=>{
req.user=userdata
next()
})
})
}
Models
94 | P a g e
1. document.js
const mongoose = require('mongoose')

const { ObjectId } = mongoose.Schema.Types
const documentsSchema = new mongoose.Schema({

title: {
type: String,
required: true
},
description: {
type: String,
required: true
},
my_document: {
type: String,
required: true
},
postedby: {
type: ObjectId,
ref: "users"
}
},
{
timestamps: true
})
mongoose.model("Documents", documentsSchema)
2. post.js

const postSchema = new mongoose.Schema({

title: {
type: String,
required: true
},
body: {
type: String,
required: true
},
photo: {
type: String,
required: true
},
likes: [{ type: ObjectId, ref: "users" }],
comments: [{
text: String,
postedby: { type: ObjectId, ref: "users" }
}],
postedby: {
type: ObjectId,
ref: "users"
}
95 | P a g e
},
{
timestamps: true
})
mongoose.model("Post", postSchema)
3. user.js
const mongoose=require('mongoose')
const userSchema=new mongoose.Schema({

name:{
type:String,
required:true
},
email:{
type:String,
required:true
},
password:{
type:String,
required:true
},
pic:{
type:String,
default:"https://res.cloudinary.com/sitanshu/image/upload/v1605712607/
download_zdiaol.png"
},
followers:[{type:ObjectId,ref:"users"}],
following:[{type:ObjectId,ref:"users"}],
resetToken:String,
expireToken:Date
})
mongoose.model('users',userSchema)
Routes
1.auth.js
const express = require('express')

const router = express.Router()
const User = mongoose.model('users')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')
const { JWT_SECRET } = require('../config/keys')
const requirelogin = require('../middleware/requirelogin')
const crypto = require('crypto')
const sgMail = require('@sendgrid/mail')
const { SENDGRID_API, EMAIL } = require('../config/keys')
sgMail.setApiKey(SENDGRID_API);
96 | P a g e
// Post Register
router.post('/signup', (req, res) => {
const { name, email, password, pic } = req.body
if (!name || !email || !password) {
return res.status(422).json({ error: "Please add all the fields" })
}
User.findOne({ email: email }).then((savedUser) => {
if (savedUser) {
return res.status(422).json({ error: "email already exists" })
}
bcrypt.hash(password, 12).then(hashedPassword => {
const user = new User({
name,
email,
password: hashedPassword,
pic
})
user.save().then(user => {
sgMail
.send({
to: user.email,
from: 'sitanshu4933@gmail.com', // Use the email address or
domain you verified above
subject: 'No-reply',
text: 'Signup successfull',
html: '<strong>Welcome to Ravello</strong>',
})
.then(() => { }, error => {
console.log(error);
});
res.json({ message: "saved successfully" })
}).catch(err => {
console.log(err)
})
})
}).catch(err => {
console.log(err)
})
})
// Post Signin
router.post('/signin', (req, res) => {
const { email, password } = req.body
if (!email || !password) {
return res.status(422).json({ error: "Add email or password" })
}
User.findOne({ email: email }).then(savedUser => {
if (!savedUser) {
return res.status(422).json({ error: "Invalid emailid or password" })
}
bcrypt.compare(password, savedUser.password).then(domatch => {
if (domatch) {
97 | P a g e
// res.json({ message: "successfully signedin" })
const token = jwt.sign({ _id: savedUser._id }, JWT_SECRET)
const { _id, name, email, pic, following, followers } = savedUser
res.json({ token, user: { _id, name, email, pic, following,
followers } })
}
else {
return res.status(422).json({ error: "Invalid email-id or password" })
}
}).catch(err => {
console.log(err)
})
}).catch(err => {
console.log(err)
})
})
// Post Reset Password
router.post('/reset-password', (req, res) => {
crypto.randomBytes(32, (err, buffer) => {
if (err) {
console.log(err)
}
const token = buffer.toString("hex")
User.findOne({ email: req.body.email })
.then(user => {
if (!user) {
return res.status(422).json({ error: "User not found" })
}
user.resetToken = token
user.expireToken = Date.now() + 3600000
user.save().then(result => {
sgMail
.send({
to: req.body.email,
from: 'sitanshu4933@gmail.com', // Use the email address
or domain you verified above
subject: 'No-reply',
text: 'Reset Pasword',
html: `<p>You requested for Password reset</p>
// <h5>click this <a href="${EMAIL}/reset/${token}">link
</a> to reset password</h5>`,
})
.then(() => { }, error => {
console.log(error);
});
res.json({ message: "Check your email" })
})
})
})
})
// Post confirm reset Password
router.post('/new-password', (req, res) => {
const { newPassword, token } = req.body
98 | P a g e
User.findOne({ resetToken: token, expireToken: { $gt: Date.now() } })
.then(user => {
if (!user) {
return res.status(422).json({ error: "session expired,try again" })
}
bcrypt.hash(newPassword, 12).then(hashedPassword => {
user.password = hashedPassword
user.resetToken = undefined
user.expireToken = undefined
user.save().then(saveduser => {
res.json({ message: "password reset successfully" })
})
})
}).catch(err => {
console.log(err)
})
})
module.exports = router
2.document.js

const requirelogin=require('../middleware/requirelogin')
const Documents=mongoose.model("Documents")
// post Documents
router.post('/creatdocument',requirelogin,(req,res)=>{
const {title,description,my_document}=req.body
if(!title || !description || !my_document){
return res.status(422).json({error:"Please fill all the fields"})
}
req.user.password="undefined"
const post=new Documents({
title,
description,
my_document,
postedby:req.user
})
post.save().then(result=>{
res.json({documents:result})
}).catch(err=>{
console.log(err)
})
})
// Get all documents

router.get('/mydocuments',requirelogin,(req,res)=>{
Documents.find({postedby:req.user._id})
.populate('postedby',"name _id pic")
.sort('-createdAt')
.then(documents=>{
res.json({documents})
}).catch(err=>{
99 | P a g e
console.log(err)
})
})
3.post.js

const requirelogin=require('../middleware/requirelogin')
const Post=mongoose.model("Post")
// const Document=mongoose.model("Documents")
// Get all Posts

router.get('/allpost',requirelogin,(req,res)=>{
Post.find()
.populate("comments.postedby","name _id")
.sort('-createdAt')
.then(posts=>{
res.json({posts})
}).catch(err=>{
console.log(err)
})
})
// Get all posts of Followings
router.get('/followingposts',requirelogin,(req,res)=>{
Post.find({postedby:{$in:req.user.following}})
.then(posts=>{
res.json({posts})
}).catch(err=>{
console.log(err)
})
})
// Post CreatPost
router.post('/creatpost',requirelogin,(req,res)=>{
const {title,body,photo}=req.body
if(!title || !body || !photo){
return res.status(422).json({error:"Please fill all the fields"})
}
req.user.password="undefined"
const post=new Post({
title,
body,
photo,
postedby:req.user
})
post.save().then(result=>{
res.json({post:result})
}).catch(err=>{
100 | P a g e
console.log(err)
})
})
// Get all Posts by me
router.get('/mypost',requirelogin,(req,res)=>{
Post.find({postedby:req.user._id}).populate('postedby',"name _id").then(posts=>{
res.json({myposts:posts})
}).catch(err=>{
console.log(err)
})
})
// Put likes
router.put('/like',requirelogin,(req,res)=>{
Post.findByIdAndUpdate(req.body.postid,{
$push:{likes:req.user._id}
},{
new:true
}).populate("postedby",'name _id pic')
.exec((err,result)=>{
if(err){
return res.status(422).json({error:err})
}else{
res.json(result)
}
})
})
// Put Unlikes
router.put('/unlike',requirelogin,(req,res)=>{
$pull:{likes:req.user._id}
},{
new:true
}).populate("postedby",'name _id pic')
if(err){
}else{
res.json(result)
}
})
})
// Put Comments
router.put('/comment',requirelogin,(req,res)=>{
const comment={
text:req.body.text,
postedby:req.user._id
}
$push:{comments:comment}
},{
new:true
}).populate('postedby',"name _id pic")
if(err){
101 | P a g e
}else{
res.json(result)
}
})
})
// Delete Comments
router.put('/deletecomment',requirelogin,(req,res)=>{
const commentid={
_id:req.body.commentId
}
$pull:{comments:commentid}
},{
new:true
}).populate('postedby',"name _id pic")
if(err){
}else{
res.json(result)
}
})
})
// DELETE post
router.delete("/deletepost/:postid",requirelogin,(req,res)=>{
Post.findOne({_id:req.params.postid})
.populate("postedby","_id")
.exec((err,post)=>{
if(err || !post){
}
if(post.postedby._id.toString() === req.user._id.toString()){
post.remove()
.then(result=>{
res.json(result)
}).catch(err=>{
console.log(err)
})
}
})
})
module.exports=router
4.user.js

const requirelogin = require('../middleware/requirelogin')
const Post = mongoose.model("Post")
const User = mongoose.model("users")
102 | P a g e
router.get('/user/:userid', requirelogin, (req, res) => {
User.findOne({ _id: req.params.userid })
.select("-password")
.then(user => {
Post.find({ postedby: req.params.userid })
.populate("postedby", "_id name")
.exec((err, posts) => {
if (err) {
return res.status(422).json({ error: err })
}
res.json({ user, posts })
})
}).catch(err => {
return res.status(404).json({ error: "user not found" })
})
})
router.put('/follow', requirelogin, (req, res) => {

User.findByIdAndUpdate(req.body.followId, {
$push: { followers: req.user._id }
}, {
new: true
}, (err, result) => {
if (err) {
}
User.findByIdAndUpdate(req.user._id, {
$push: { following: req.body.followId }
}, {
new: true
}).select("-password")
.then(result => res.json(result)
.catch(err => {
return res.status(422).json({ error: errr })
}))
})
})
router.put('/unfollow', requirelogin, (req, res) => {
User.findByIdAndUpdate(req.body.unfollowId, {
$pull: { followers: req.user._id }
}, {
new: true
}, (err, result) => {
if (err) {
}
$pull: { following: req.body.unfollowId }
}, {
new: true
}).select("-password")
.then(result => res.json(result)
.catch(err => {
return res.status(422).json({ error: errr })
103 | P a g e
}))
})
})
router.put("/updatepic", requirelogin, (req, res) => {

$set: { pic: req.body.pic }
}, {
new: true
}).select('-password')
.exec((err, result) => {
if (err) {
}
res.json(result)
})
})
router.post('/search-user',requirelogin,(req,res)=>{
let usePattern=new RegExp('^'+req.body.name)
User.find({name:{$regex:usePattern,$options:'i'}})
.select("_id name")
.then(user=>{
res.json(user)
})
})
Dependencies in Package.json(Server)
Package.json
{
"name": "insta-clone",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js",
"dev": "nodemon server/app.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client &&
npm run build --prefix client"
},
"author": "",
"license": "ISC",
"dependencies": {
"@sendgrid/mail": "^7.4.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.10.2",
104 | P a g e
"nodemon": "^2.0.19"
}
}
8.Conclusion:
By this project, we provide an interface to the users who are students and faculty members
of our University to know the daily and formal updates of the college events that are being
held and can add posts and documents on this site.It also provides the feature of liking any
posts irrespective of they being their followers or not as well as comment on those posts.
It is easy to use as this platform is user friendly is easy to use and access all the features.
This site provides its users, to add there important documents in their profile and view them
whenever required.
The usage of this software increases the efficieny , and decreases the effort.
It has been thoroughly tested and implemented.
Any endeavour is incomplete without the spirit of teamwork and proper guidance of our
beloved guide. With there help I was successfully able to host and foster this project.
9.Bibliography:
Apart from the immense effort and support from my teammate and my guide , there was a
need of referring some websites and youtube videos were also visited to get some ideas
about designing the proposed application successfully.
10.List of websites visited:

 www.stackoverflow.com
 www.materialUI.com
 www.geeksforgeeks.com
 www.reddit.com
 www.W3Schools.com
 www.Mongoose.com
 www.youtube.com
 www.tutorialspoint.com
105 | P a g e
Thank you
106 | P a g e

Ravello Project Report Amar

Uploaded by

Copyright:

Available Formats

You might also like

Ravello Project Report Amar

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ravello Project Report Amar

Uploaded by

Copyright:

Available Formats

A Project Report

A Report submitted in partial fulfillment of the

Master of Computer Application

Head of the department : Dr. Alok Ranjan Tripathy

This is to certify that the project entitled “Ravello : A social Connective

I declare that this submission represents my ideas in my own words

Name- Amarjeet Parida

For a social Site to be captivating and Interacting, it is a key to

2.2 Existing System:

2.2.1Traditional Inbound Marketing platforms:

(Automated Marketing) is developed as a single or restricted partnership user dashboard and is a

2.2.2Data, Security And Privacy – GONE!

Deplatforming, often referred to as no-platforming, is a technique used by social media and

other technology corporations to restrict content on the Internet by suspending, banning, or

otherwise putting an end to problematic speakers or ideas. Financial deplatforming, a tactic

used by banking and financial service providers, among other businesses.

in different forms of personal harassment, such as attempting to have someone fired or

Deplatforming is a new attack on people's rights that undermines "freedom of speech".

2.4.1.Features in Ravello application

3.1Purpose and Scope:

4.1 Functional and Non- Functional Requirements:

 Individual profile management for all kind of users.

4.2 User Interface Requirements:

 Professional look and feel

 Browser testing and support for IE

 Documents can be uploaded and Downloaded.

Figure 1:System Architecture

JavaScript is a script-based programming language that was developed by Netscape

HTML, an initialism of Hypertext Markup Language, is the predominant markup language

Since MongoDB is fundamentally a distributed database, features like built-in high

5.2 Tools used:

 UML DIAGRAM MAKER

Heroku is completely managed, allowing developers to concentrate on their core

The components of the principles of object-oriented programming are represented by the

Complex algorithms are solved and interacted with in Object-Oriented Programming by

7.2.1. Use Case Diagram:

Name of the Use Case: login

Post Condition: Home Page will be displayed.

 Invoke the Login page.

 Enter the valid User ID and Password.

 Click on Login button to access Home page.

Name of the Use Case: Registration

Every new user can register by clicking on “Sign Up“ button.

Post condition: Registration page is displayed.

 Invoke the Login page.

 Click on register now, link to access Sign up page.

Name of the Use Case: Logout

Post Condition: Required Page will be displayed.

Flow of events: Logout

Name of the Use Case: Create or Delete Account

. an account by using delete account from the menu.

Post Condition: Required Page will be displayed.

Name of the Use Case: Follow or Unfollow any user

Post Condition: Required Page will be displayed.

Name of the Use Case: Like Photo/video

Any photo or video.

Post Condition: Required Page will be displayed.

Name of the Use Case: Logout