This app brings the essence of popular social networking platforms into one cohesive space. With features inspired by famous social apps, I've decided to create a new experience for users to connect, share, and engage.
I'm proud to say that I built this app from the ground up. Every aspect, from design to architecture, is my own creation.
I'm thrilled to invite you to join the app's growing community! Whether you're looking to connect with friends, share your thoughts, or explore new connections, this app offers a platform for it all.
I'd love to hear your feedback and suggestions for improving the app. Feel free to connect with me here β¬οΈ β¬οΈ β¬οΈ (link "My Profile" in the footer)!
https://katherinakulinich.github.io/SocialNetworkApp/
The authentication process of the app is designed to be intuitive and user-friendly. Users have the option to sign up using their Google account or by registering with their email and creating a password. The first time a user logs in, regardless of the method chosen, they are redirected to the Profile Creation Page.
Desktop form layout
Mobile/Tablet form layout
The Profile Creation Page is where users provide essential information about themselves. Some fields are required, ensuring a comprehensive profile setup. If any issues arise during this process, such as incomplete information or errors, the user will be prompted to revisit the page until all required details are provided.
For users signing up with their Google account, the app automatically populates the profile with the user's name and avatar from Google. If the user doesn't have a profile picture, they are provided with a random cute cat avatar.
Users have the option to customize their profile information at any time through the "Settings" page. This includes updating their name, avatar, and other details as needed,
The user profile prominently displays the user's avatar, allowing for a closer look with a zoom feature for a more detailed preview.
Users can view the main information, including full name, age, gender, location, family status, and a personal description that includes hobbies and interests
The profile includes a preview section for photos uploaded by the user. Tapping on this section navigates the user to a dedicated photos page, where they can view and manage their photo albums
A preview of the user's friends is also available on the profile page. Tapping on this section allows users to navigate to the full friends list.
Users can view their own posts directly from their profile page. Visitors to the profile can engage with the user's content without having to navigate elsewhere in the app.
The user search feature offers advanced functionality, allowing users to find other users based on various criteria such as name, location, interests, and more.
When users are on the search page, they are presented with a random set of users based on their location and interests. This curated selection, akin to "You Might Know Them" suggestions, helps users discover potential connections that are relevant to their interests and geographic proximity.
When viewing another user's profile, users have the option to initiate a connection by clicking the "Add to Friends" button. This action sends a friend request to the user, adding them to the sender's following list.
π After sending a friend request, the button text changes to indicate that "You have sent a request" and the button is disabled. You are able to see this user on the page "Following and Requests" on the tab '"Following list".
π The user who received the request will see a notification indicating that the sender has sent them a friend request when they visit the page "Following and Requests" on the tab '"Friend requests" and if he visits the sender's page at this time he sees the disabled button with the text "The user has sent a request".
The sender sees:
The user who received the request will see:
If the recipient accepts the friend request, the users become friends. They are now connected, and both users can see each other's updates and activities in their feeds.
If the recipient declines the friend request, the sender remains in the recipient's following list, and the sender becomes a follower of the recipient. Although they are not friends, the sender can still see the recipient's updates and activities in their feed, and the recipient can see the sender in their list of followers.
Once users become friends, they have the option to remove each other from their friends list by tapping the "Delete User from Friends" button. This action removes the user from their friends list and severs the formal friendship connection
Users can create and share their own content, including photos and posts, to express themselves and share their experiences with others.
Adding new photos:
Creating new posts:
Users have full control over their content, with the ability to edit or delete posts and photos as needed.
Users can engage with both their own and others' content by leaving comments and reactions. Comments provide a platform for meaningful discussions, while reactions allow users to express their emotions and reactions to posts and photos.
Exciting animations accompany reactions. The app features dynamic animations for likes and reactions, inspired by popular social media platform - Instagram. When users tap on the reaction button, a playful animation ensues, with smiles moving in various directions and speeds to convey emotions. This captivating animation adds a delightful touch to user interactions and enhances the overall user experience.
Set of the post reactions:
Post Reactions Animation:
Photos Likes Animation:
Users can explore photos in detail by zooming in on images and navigating through them using a carousel-like interface. This feature provides users with a closer look at photos and enhances the viewing experience, whether browsing their own photo collection or exploring photos shared by others.
The Feed page offers users a familiar browsing experience similar to popular social networking apps. Here, users can stay up-to-date with the latest updates from their friends and followed users. Updates include new photos, posts, and notifications about new friendships.
Users have the option to filter their feed based on the type of updates they want to see. Whether it's photos, posts, or notifications about new friendships, users can tailor their feed to their preferences or view all updates together.
To explore past updates, users can tap the "Load More News" button. This feature allows users to navigate through previous days' updates, with each tap revealing news from the previous day. The app automatically adjusts to show updates from earlier dates if no news is available for a particular day.
Users receive notifications if they have no friends or followed users, ensuring they are aware of their current social connections. Additionally, notifications alert users if their friends and followed users have not posted anything in the past seven days, prompting them to check back later for updates.
The Interesting page is similar to the Explore feature on Instagram, where users can discover new content from random users. The Interesting page shares similar features with the Feed.
The real-time chat feature enables users to engage in instant messaging, allowing them to send and receive messages in real-time. Users can send text messages or images.
Users are notified when another user in the chat is typing, providing real-time feedback on the conversation. This feature enhances the interactive nature of the chat and allows users to anticipate incoming messages.
For added expressiveness, users have access to an Emoji Picker within the typing input, enabling them to easily add emojis to their messages.
Users can share images within the chat by accessing the image sending feature. A special icon located next to the typing input allows users to select and send images to their chat partners. Upon selecting an image, the icon changes to indicate that an image is chosen. While the image is being sent, users see a loading indicator instead of the send button, providing visual feedback on the sending process.
When opening a chat with another user for the first time, users are greeted with an empty chat interface and the option to send a greeting message ("Say hello ").
Users receive notifications for new messages when they are not actively in the chat. These notifications inform users of new messages, ensuring they stay updated on incoming messages.
Users have the option to personalize their chat experience by choosing from a set of background images for their chat interface.
A dedicated chat menu button in the top-right corner provides users with access to additional chat features. From this menu, users can view all media files (photos) exchanged in the chat, delete the chat, or quickly navigate to the settings to choose a chat background.
The Birthdays page displays two tabs, showcasing the nearest birthdays among the user's friends. Users can view upcoming birthdays for the current month and the following month, providing a convenient way to stay informed about upcoming celebrations.
If one of the user's friends has a birthday today, the app displays an alert on the Friends page.
If today is your birthday, the app celebrates this special occasion by displaying a congratulatory message on the user's profile page.
Users can access the Settings page to edit their personal profile information. This includes updating details such as their full name, age, gender, location, family status, and a personalized description.
In addition to profile editing, users can customize their chat experience by changing the chat background. The Settings page offers users a selection of background images to choose from, allowing them to personalize their chat interface to suit their preferences.
The app features an adaptive and responsive layout, ensuring a seamless experience across various devices including mobile phones, tablets, and laptops. Whether users access the app on a small smartphone screen or a larger tablet or laptop display, the layout adjusts dynamically to provide an optimized viewing and interaction experience.
