Stanley College of Engineering & Technology for Women

(Autonomous)
Department of Computer Science and Engineering
TEAM DETAILS:
S.NO ROLL NUMBER NAME

1 160620733041 P.Krithi

2 160620733042 P.Ridhi
3 160620733051 Shreeya Nitturkar

PROJECT GUIDE: Mrs. B. Prasuna, Assistant Professor, Dept of C.S.E

A Social Media Replication Project
List of Contents
• Abstract
• Introduction
• About the Project
• Domain and Applications
• Literature Survey
• Challenges and Gaps Identified
• Objectives and Scope
• Architecture
• Development Process
• Outputs
• Conclusion
• Future Scope
• References
Abstract
StanUConnect stands as a pinnacle of technological fusion, harmonizing React JS, Firebase, and Chakra UI to
create an engaging social media platform. React JS drives seamless user interactions with its responsive interface,
while Firebase ensures real-time updates and secure authentication, forming the backbone of StanUConnect's
infrastructure. Chakra UI adds aesthetic finesse, offering customizable design elements that enhance visual appeal.
Emotion detection and sentiment analysis, powered by NLP and machine learning models like TextBlob, elevate
user engagement by highlighting comments and providing insights into sentiment.

Voice-to-text functionality, facilitated by the Web Speech API, enriches accessibility, allowing users to effortlessly
convert spoken words into text. Content moderation, utilizing rule-based filtering and real-time processing, fosters
a constructive environment by swiftly addressing negative content. With its dynamic blend of cutting-edge tools,
StanUConnect promises users an unparalleled experience, setting a new standard in the realm of social media
platforms.
Introduction
• StanUConnect is an innovative social media platform tailored for college students, featuring advanced
functionalities including sentiment analysis, emotion-based text highlighting, and voice-to-text
functionality.

• Leveraging technologies like React.js, Firestore, Chakra UI, and Zustand, the platform ensures a
seamless user experience with real-time database management and secure authentication.

• Key functionalities include NLP-based emotion detection, sentiment analysis using TextBlob, and
automatic content moderation through rule-based filtering, providing users with instant analysis and
moderation capabilities.
About the project
• The social-media project seamlessly integrates React and Firebase to manage user logins, data
storage, and other tasks, following best practices and employing tools like Chakra UI for efficient
development.

• With a focus on user engagement and safety, the app introduces innovative features like emotion
highlighting in text and real-time content moderation, enhancing chatting experiences and
fostering a secure environment.

• By prioritizing user connectivity and safety, the project aims to revolutionize social media for
students, offering an engaging and secure platform for meaningful interactions.
DOMAIN: Media and Communication Technology
Sub-Domain: Social Media and Interactive Communication Technologies

Applications: Full stack development is applied in:

• E-commerce Platforms: Amazon, eBay, Alibaba
• Streaming Services: Netflix, YouTube, Spotify
• Social Media Platforms: Facebook, Twitter, LinkedIn
• Online Travel and Hospitality: MakeMyTrip, Airbnb, Booking.com, TripAdvisor
• News and Content Aggregation: Google News, Way2News, Flipboard, Feedly
• Job Portals: LinkedIn Jobs, Indeed, Monster
• Education Platforms: Coursera, edX, Vedantu
• Health and Fitness Apps: MyFitnessPal, Fitbit
S.NO PAPER TITLE METHOD PERFORMANCE ANALYSIS

03. Application for 01. Push notifications The report discusses the development of an
Campus 02. Analytics and crash Android application for campus
Management reporting management, focusing on enhancing
03. Networking communication, improving accessibility of
04. Database academic resources, fostering
Management collaboration, and enhancing data
management.
LITERATURE SURVEY:
S.NO PAPER TITLE METHOD PERFORMANCE
ANALYSIS

01. Chat Application using 01. Web Socket The paper explores creating a real-
React.js and Firebase Protocol time chat app with React.js and
02. Firebase real Firebase, emphasizing benefits like
time Database instant communication and global
03. React Js connectivity. It addresses challenges,
04. Authentication prioritizing privacy, and shares
and Authorization insights from performance
assessments and user testing.
S.NO PAPER TITLE METHOD PERFORMANCE
ANALYSIS

02. Exploring 01. Create Firebase The article analysis guides beginners in setting
Firebase Project up Firebase Realtime Database for Android,
Realtime 02. Android Studio explaining its real-time features. It emphasizes
Databases in setup simplicity, offline persistence, and showcases
Android App 03. Create Database instant updates, fostering a seamless user
Development in Firebase Console experience.
04. Main Layout
Changes
S.NO PAPER METHOD PERFORMANCE ANALYSIS
TITLE

04. In a World of 01. Observational Analysis of The performance analysis covered key
Social Media: Social Media Usage aspects of Instagram's impact and
Instagram Use 02. Exploration of Social Media's development. It included a focus on the
In Social Role in Connectivity platform's popularity and user
Networking 03. Investigation into Social engagement, evidenced by the daily
Marketing and Media as Advertising Platforms posting of 90 to 95 million pictures.
It's Effect on 04. Examination of Social Evaluation of social media's
Well-Being Media's Impact on Blogging effectiveness as advertising channels
05. Analysis of Instagram's and their impact on increasing blog
Features and Success Factors traffic were conducted. The analysis
06. Exploration of Educational explored the relationship between
Use of Instagram Instagram's user-friendly interface,
features, and overall success.
S.N PAPER METHOD PERFORMANCE
O TITLE ANALYSIS

05. Sentiment 1. Sentiment Analysis Performance analysis involved accuracy

Analysis on 2. Data Mapping, assessment, precision, recall, F1 score
Social Media 3. Audience calculation, confusion matrix analysis,
Measurement. cross-validation, and comparative analysis
to evaluate sentiment analysis effectiveness
and reliability.
CHALLENGES AND GAPS IDENTIFIED:
1. Complex UI Components: Creating intricate UI components, like Instagram's layout, requires
meticulous attention to detail, particularly in achieving responsive design and user interactions.

2. Real-time Updates: Ensuring real-time updates for features such as notifications and live feed
requires efficient synchronization between the frontend and Firebase Realtime Database or Firestore.

3. User Authentication and Security: Implementing secure user authentication and authorization
mechanisms is critical to safeguard user data and prevent security vulnerabilities.

4. Media Storage and Retrieval: Efficiently managing media storage and retrieval, especially with
Firebase Storage, poses challenges in optimizing uploads, controlling storage costs, and ensuring
quick retrieval.

5. Performance Optimization: Optimizing application performance, particularly with a growing user

base and media files, involves strategies like caching and efficient data fetching.
OBJECTIVES AND SCOPE:
OBJECTIVES:
1. Functional Replication: Replicate core functionalities
of Instagram, including user authentication, photo uploading, commenting, and real-time updates
using ReactJS, Firebase, and Chakra UI.

2. Learning and Skill Development: Facilitate the learning

and skill development of developers by providing hands-on
experience with modern technologies, emphasizing proficiency in ReactJS, Firebase, and Chakra UI.
SCOPE:
1. User-Centric Features: Implement a subset of user-centric features such as profiles, feeds, and
notifications to capture the essence of Instagram's user experience within the scope of the project.
2. Responsive Design and Customization: Focus on creating a responsive design and allow basic
customization options to showcase the adaptability of Chakra UI, ensuring the project's manageable scope.
ARCHITECTURE:
Development Process:
Frontend Development:

Frontend development utilizes React with Firebase backend, Chakra UI for styling, and Zustand for state
management, emphasizing clean code and efficiency. Advanced features like sentiment analysis and
voice-to-text are seamlessly integrated, with additional enhancements including emotion detection,
sentiment highlighting, and real-time moderation feedback for an intuitive and secure user experience.

Backend Integration:

Backend integration centers on Firebase for authentication, Firestore for database storage, and Firebase
Storage for image management, complemented by Chakra UI for styling and Zustand for state
management. This setup facilitates seamless communication with the frontend and accommodates
comment enhancements, ensuring a robust and secure platform through Firebase rules configuration and
security error management.
Full Stack Integration:

Full Stack Integration merges frontend and backend components for a cohesive user experience,
resolving routing issues, updating environment variables, and managing security errors. It
seamlessly incorporates comment enhancements, enabling real-time moderation feedback and
efficient use of sentiment analysis and voice-to-text features. By prioritizing security and optimizing
performance, this integration ensures a seamless and secure user experience throughout the platform.
OUTPUTS
CONCLUSION:
The development of a Social-Media Application using ReactJS, Firebase, and Chakra UI represents a
challenging yet rewarding endeavor, offering valuable learning opportunities for developers. Through
replication of Instagram functionalities, the project showcases proficiency in contemporary web
development technologies, enhancing user experience while honing skills in responsive design
principles.
FUTURE SCOPE
• The future of StanUConnect, built on React.js, Chakra UI, and Firebase, looks promising
with plans to integrate AR and VR for immersive experiences, machine learning for
enhanced content recommendations, and AI-driven personalization.

• Community-driven open-source development will encourage innovation and feature

contributions, while internationalization will expand the user base with support for multiple
languages.

• The project will address challenges such as content sensitivity by implementing measures to
detect and prevent deepfake posts, ensuring a safe and authentic environment for users.
REFERENCES:
REFERENCE - 01

273Chat Application using React neww paper.pdf (amity.edu)

REFERENCE - 02

#Firebase, Part 3. An Introduction to Firebase Realtime… | by Kudzai Chasinda | Medium

REFERENCE - 03

Android Application for Campus Management.pdf (juit.ac.in)

REFERENCE - 04

https://ijcrt.org/papers/IJCRT2105128.pdf

REFERENCE - 05

https://www.researchgate.net/publication/349117428_Research_in_the_Instagram_Context_Approaches_and_Methods
THANK YOU