https://github.com/katherinakulinich/socialnetworkapp

This app is like a mini social network where you can make a profile and share photos and your thoughts with others. You can also find and connect with people who have similar interests or live nearby. You can easy to chat with friends in real-time. And much more. It's like having a small version of popular social media apps all in one place. 📲💭💌
https://github.com/katherinakulinich/socialnetworkapp

antd crud-application firebase front-end-development material-ui reactapp reactjs redux-toolkit social-network styled-components

Last synced: about 4 hours ago
JSON representation

This app is like a mini social network where you can make a profile and share photos and your thoughts with others. You can also find and connect with people who have similar interests or live nearby. You can easy to chat with friends in real-time. And much more. It's like having a small version of popular social media apps all in one place. 📲💭💌

• Host: GitHub
• URL: https://github.com/katherinakulinich/socialnetworkapp
• Owner: KatherinaKulinich
• Created: 2024-03-14T07:53:13.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-27T18:32:00.000Z (7 months ago)
• Last Synced: 2024-04-27T19:32:54.395Z (7 months ago)
• Topics: antd, crud-application, firebase, front-end-development, material-ui, reactapp, reactjs, redux-toolkit, social-network, styled-components
• Language: TypeScript
• Homepage: https://katherinakulinich.github.io/SocialNetworkApp/
• Size: 353 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

Social Network App 📲




  



Welcome to the Social Network App! 🎉 




  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.





  






Crafted from Scratch: 



  I'm proud to say that I built this app from the ground up. Every aspect, from design to architecture, is my own creation.



Join the Community: 



  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.



Connect with Me: 



 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)!





  



⚙️ Tools and technologies



  





  





  





  





  





  





  





  





👀 Demo

https://katherinakulinich.github.io/SocialNetworkApp/



📲 About app


 🌐 Authentication (Google account / Email+Password) 

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



 



🔹 Profile Creation: 



 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.



🔹 Google Integration: 



 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.



🔹 Customization Options: 



 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, 





 





👩🏽‍💻 User profile 



  

  



🔸 Avatar Preview 



 The user profile prominently displays the user's avatar, allowing for a closer look with a zoom feature for a more detailed preview.



🔸 User Information



 Users can view the main information, including full name, age, gender, location, family status, and a personal description that includes hobbies and interests



🔸 Photos Previewn



 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



 🔸Friends Preview



 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.



🔸 Posts



  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.





🕵🏼‍♀️ User Search 



 



🔎 Search Field 



 The user search feature offers advanced functionality, allowing users to find other users based on various criteria such as name, location, interests, and more. 





 





🔎 Location-Based and Interest-Based Suggestions 



 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.





👋🏼 Interaction with users 


🩵 Adding Friends 



 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.





 



🩵 Friend Request Status 



 📎 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: 

  


   

    

  



🩵Accepting Friend Requests 



  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.





 



🩵 Declining Friend Requests 



  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.





 



🩵 Removing Friends 



  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





 





📸 Content Creation and Interaction 



   

    






💬 User-Generated Content 



 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: 

  


     

  



💬 Content Management 



 Users have full control over their content, with the ability to edit or delete posts and photos as needed. 





   

  



💬 Comments and Reactions 



 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.





   



💬 Like and Reactions Animation 



 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:

  


    

    

    

    

    

  



💬 Image Zoom and Carousel 



  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.





  

  





📰 Feed



  



💭 Personalized Updates 



 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. 





  

  

  



💭 Customizable Filtering 



 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. 





  



💭 Load More Feature 



 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.



💭 Notifications 



 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.





🤗 Interesting




 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. 





💬 Real-Time Chat



  



📝 Instant Messaging



 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.



📝 Typing Indicators



 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.





  

  



📝 Emoji Picker



 For added expressiveness, users have access to an Emoji Picker within the typing input, enabling them to easily add emojis to their messages. 





  



📝 Image Sending



 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.





  


  


  









  

  



📝 Chat Initialization



 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 "). 





  



📝 Notification Alerts



  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. 





  








  

  



📝 Customizable Chat Backgrounds



  Users have the option to personalize their chat experience by choosing from a set of background images for their chat interface.





  








  

  

  



📝 Chat Menu



  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.





  








  

  





🎁 Birthdays


🎈 Nearest Birthdays



  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.





  

  



🎈 Today's Birthday Alert



  If one of the user's friends has a birthday today, the app displays an alert on the Friends page. 





  



🎈 User's Birthday Celebration  (Your Birthday)



 If today is your birthday, the app celebrates this special occasion by displaying a congratulatory message on the user's profile page.





  





🛠️ Settings


🔩 Personal Profile Editing



  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.





  



🔩 Chat Background Customization



  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. 





🖥️📱 Adaptive Layout



  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.