Synopsis Report
On
“SocialSphere App”
Submitted in Partial Fulfillment of requirements for the award of degree of Bachelor of
Technology in Computer Science and Engineering
Under the guidance of
Ms. Anju Yadav
Assistant Professor, CSE
Submitted by
Ram Singh Verma 201044
Ritik Kumar 201045
Department of Computer Science and Technology
Maharshi Dayanand University, Rohtak-2023-2024
SocialSphere App
Introduction
Welcome to SocialSphere Connect, the ultimate social media platform designed to bring
peopletogether in a seamless digital environment. Our app provides users with a variety
of features to connect, share, and engage with friends, family, and communities
worldwide.
Key Features:
Profile Creation: Easily set up your profile with customizable details to reflect your
personality and interests.
Friend Connections: Connect with friends and family members, and expand your
network by discovering and adding new connections.
Feed and Posts: Share your thoughts, photos, videos, and updates with your network
through posts on your feed.
Messaging: Stay in touch with friends through private messaging, group chats, and
multimedia sharing.
Explore: Discover new content, interests, and communities through personalized
recommendations and trending topics.
Events and Groups: Join events, communities, and groups based on your interests
and hobbies to connect with like-minded individuals.
Privacy Settings: Customize your privacy settings to control who can see your content
and interact with you on the platform.
Notifications: Stay informed about new interactions, friend requests, and updates
through real-time notifications.
Modules
1. User Authentication and Profile Management: Sign up, sign in and
authentication processes. User profile creation and editing. Profile picture and
cover photo management. Privacy settings management.
2. Social Networking Features: Friend connections and follower/following
system. News feed or timeline for viewing posts from connections. Post creation,
editing, and deletion. Like, comment, and share functionality. Tagging friends or
mentioning users in posts. Real-time updates and notifications.
3. Messaging and Communication: Private messaging between users. Group
messaging and chat functionality. Multimedia sharing within chats (photos,
videos, GIFs)Message encryption and security features.
4. Content Discovery and Exploration: Explore tab for discovering new
content, users, and communities. Trending topics or hashtags. Search functionality
for finding users, posts, and communities. Recommendations based on user
interests and behavior.
5. Community and Group Management: Creation of public or private
communities/groups. Group moderation tools for administrators. Group events,
discussions, or polls. Member management and permissions.
6. Multimedia Management: Image and video uploading and hosting. Support
for different file formats and sizes. Filters, effects, and editing tools for
multimedia content.
7. Notification System: Real-time notifications for likes, comments, messages,
etc. Notification settings customization. Push notifications for mobile devices.
User Interface Deatils
Designing the user interface (UI) for a social media app requires careful consideration of
user experience and visual aesthetics. Here are some key UI elements and details to
consider:
Navigation Bar: Include tabs for main sections such as Home/Feed, Explore,
Notifications, Messages, and Profile. Use clear icons and labels for easy navigation.
Home/Feed: Display a scrollable feed of posts from the user's connections. Include
options for creating a new post, sharing multimedia content, and updating status.
Incorporate like, comment, and share buttons for each post.
Explore: Provide a curated or personalized feed of trending topics, recommended users,
and popular content. Include search functionality for finding specific users, posts, or
hashtags.
Notifications: Show a list of recent notifications such as likes, comments, mentions,
and friend requests. Allow users to mark notifications as read or clear them.
Messages: Display a list of ongoing conversations with other users. Include options for
starting new conversations, sending multimedia messages, and managing message
threads.
Profile: Show the user's profile picture, cover photo, bio, and basic information.
Include tabs for viewing the user's posts, followers, following, and saved content. Allow
users to edit their profile details, privacy settings, and account preferences.
Post Details: Display individual posts with options for liking, commenting, and
sharing. Show the number of likes and comments, along with the names of users who
interacted with the post. Include features for tagging friends, adding location, and
attaching multimedia content.
Settings: Organize app settings into categories such as account, privacy, notifications,
and appearance. Allow users to customize their app experience, including theme colors,
font sizes, and notification preferences.
Visual Design: Use a clean and intuitive layout with ample white space for readability.
Choose a consistent color scheme, typography, and iconography throughout the app.
Incorporate visual feedback for user interactions such as button presses, loading
indicators, and animation effects.
Accessibility: Ensure that the UI is accessible to users with disabilities by following
accessibility guidelines for text size, contrast, and screen reader support. Provide options
for adjusting font sizes, color contrast, and other accessibility settings.
Responsive Design: Design the UI to adapt to different screen sizes and orientations,
providing a seamless experience across mobile devices, tablets, and desktop browsers.
Software Perspective
Frontend Development: Choose appropriate frontend technologies such as React
development for Android. Design and implement user interfaces (UI) for various app
screens and functionalities. Ensure responsiveness and compatibility across different
devices and screen sizes. Implement navigation and user interaction patterns for
seamless user experience.
Backend Development: Select a backend technology stack such as Node.js, Develop
server-side logic for handling user authentication, authorization, and session
management. Design and implement APIs for client-server communication, including
endpoints for user data, posts, messages, notifications, etc. Set up a database system
(e.g., MongoDB) for storing user data, posts, comments, etc., and ensure data integrity
and security. Implement caching mechanisms for improving performance and scalability.
Requirement
Hardware Requirement:
Mobile App : Development Machine: A computer with sufficient processing
power (e.g., multi-core CPU), RAM (at least 8GB recommended), and storage space
(SSD recommended for faster compilation and development).
Devices for Testing: Physical devices for testing the app on different screen sizes,
resolutions, and hardware configurations (e.g., smartphones and tablets).
Emulators/Simulators: Emulators or simulators for testing the app on virtual devices
during development (built-in tools like Android Emulator and Simulator or third-party
options like Genymotion).
Backend Server: Server Hardware: Depending on the expected traffic and scalability
requirements, you may need to provision dedicated servers or cloud instances with
sufficient CPU, RAM, and storage capacity.
Networking: Reliable internet connectivity with adequate bandwidth to handle
incoming requests, data transfer, and communication between the app clients and the
backend server.
Database Server: Separate hardware or cloud resources for hosting the database
server, with considerations for storage capacity, I/O performance, and data redundancy
( RAID configurations).
Software Requirement:
Development Tools: Integrated Development Environment (IDE) such as Visual
Studio Code, IntelliJ IDEA, for writing code and managing projects. Version Control
System (VCS) like Git for tracking changes and collaborating with team members.
Package managers like npm (Node.js) for managing dependencies. Design tools like
Sketch, for creating UI/UX designs and prototypes.
Frontend Technologies: Frameworks and libraries for building user interfaces, such
as React, Angular, Vue.js, or Flutter.HTML, CSS, and JavaScript for web-based
applications. Mobile development platforms and languages .UI component libraries or
frameworks for consistent design and development (Material UI, Bootstrap,).
Backend Technologies: Server-side programming languages like Node.js, Web
frameworks such as Express.js, Database (MongoDB), for storing user data, posts, and
other content. Object-Relational Mapping(ORM) libraries for interacting with
databases and managing data models.
Authentication and Security: Authentication libraries and services like Firebase
Authentication, Auth0, or OAuth/OpenID Connect for user authentication and
authorization. Encryption libraries and protocols (e.g., HTTPS, TLS/SSL) for securing
data transmission and storage. Security best practices for protecting against common
vulnerabilities such as MongoDB and data breaches.
Objective of Project:
Connectivity: Facilitate connections between individuals, allowing users to find and
connect with friends, family members, colleagues, and like-minded individuals.
Communication: Enable seamless communication through various channels such as
instant messaging, comments, replies, and private messaging, fostering meaningful
interactions and conversations.
Content Sharing: Provide users with the ability to share a wide range of content,
including text posts, photos, videos, links, and multimedia content, allowing them to
express themselves and share their experiences, interests, and opinions.
Discovery and Exploration: Offer features for users to discover new people,
communities, and interests based on their preferences, browsing history, and social
connections, encouraging exploration and serendipitous discovery.
Engagement and Interaction: Promote user engagement and interaction through
features such as likes, comments, shares, reactions, and mentions, fostering a sense of
community and belonging among users.
Tools Used:
Development Tools: Integrated Development Environments (IDEs) like Visual Studio
Code, IntelliJ IDEA, Version Control Systems (VCS) such as node Package managers
like npm Node.js.
Frontend Development: HTML, CSS, Tailwind CSS and JavaScript for web-based
applications web development platforms and languages Development:
Backend Development: Server-side programming languages frameworks such as
Express.js for Node.js and Database MongoDB.
Conclusion:
In conclusion, a social media app serves as a powerful platform for connecting people,
fostering communication, and facilitating content sharing in a digital environment.
Through the use of intuitive interfaces, robust features, and personalized experiences,
social media apps have transformed the way individuals interact, share information, and
build communities online
References:
1. www.google.com
2. https://www.w3schools.com/
3. https://stackoverflow.com/
4. https://www.youtube.com/
5. https://webdesigner.withgoogle.com/
6. https://www.mongodb.com/
Guide Name: Prepared By:
Ms. Anju Yadav Ram Singh 201044
Assistant Professor, CSE Ritik Kumar 201045
Global Institute of Technology and Management
