Home-Page

This GitHub repository contains code that powers both the frontend & backend of the almighty home-page of Megagram. This is the page that the user lands on when they login, and includes a feed of stories, posts, and suggested-accounts for users to view and interact with, as well as a bunch of links to all that Megagram has to offer. Megagram is a blend of some of the features of Instagram and Amazon, combined into a single website. It was created by me, Rishav Ray, as a personal project to acquire and then showcase my skills. To allocate my time efficiently, I focused on three of the nine key repositories of Megagram —Login-Register, Reset-Password, and Home-Page— which when combined fulfills my purpose of the entire endeavor. I also focused on the WorksPresentation Github repository of mine(which has a wiki with important info), containing a complex frontend that acts as a website about me for job-recruiters and employers to view!

Welcome aboard!

Table of Contents

0. Important Disclaimer
1. Key Points on Frontend
2. Key Points on Backend
3. Key Points on WebSocket
4. Finale(My Contact Info is Here)

Important Disclaimer because Honesty is the Best Policy

During the first iteration of Project Megagram, I worked on all nine repositories. In the second iteration, I narrowed my focus to three of them, including this Home-Page repository. In the third and final iteration, I continued concentrating on these three repositories. However, I chose not to fully revise and polish all the frontend and backend files across them, as the work(which I was not paid at all for) felt repetitive and offered limited new learning and 'showing-skills-to-future-employer' opportunities. Furthermore, all the cloud-services that my project so heavily relies on were out of my budget.

To combat the issues above, I used the final iteration to create detailed wiki pages in my WorksPresentation Github repository. These documents outline how I would approach various aspects of frontend, backend, cloud architecture, and more, if I were tasked with building them under real-world conditions.

As a result, the current state of the content in this repository(including the rest of the README below) may not fully reflect industry-grade optimization or deployment readiness. Rather, it represents earlier work, with my more refined thought process and technical strategies documented in the associated wiki pages.

Key Points on Frontend

• There are three frontend directories for the Home-Page, one powered by ReactJS(reactjs-frontend2), one by VueJS(vuejs-frontend1), and one by Angular-TypeScript(angularFrontend1). Each of them essentially render the same website with the same logic and only differ by their syntax.

• There are 2 endpoints: / and /stories/{authorUsernameOrIdOfStory}. Both endpoints start with either https://project-megagram.com/, https://project-megagram.com/vuejs-frontend1/, or https://project-megagram.com/angularFrontend1/.

• When the user visits the / page, they get access to a Left-Sidebar with links to all the links of Megagram, as well as the feed of stories, suggested-accounts, and posts for the user. The feeds are based on a variety of factors, including number of followers followers, amount-of-engagement from the user, the accounts the user follows, etc. The user can even be logged out and browse the feed as an Anonymous guest.

• When the user visits the /stories/ page, they are taken to a page that shows them the stories(vids/images that cannot be viewed after 2 weeks) of a user, as well as story-previews of other users in their home-page feed if applicable. In this page, users can reply to story-authors, and click through each of the chronologically-ordered stories of people they follow, as well as stories that were sponsored and recommended to them via the backend. Each author can post a maximum of 11 unexpired stories at a time, and each story expires after 2 weeks.

• Each frontend fetches, creates and modifies data for its users with the help of requests made to the 4 backends of this repository. Additionally, each frontend renders notifications of various updates(i.e likes/comments to one's own posts/comments, new replies to one's own comments, new followings/follow-requests, and new messages) with the help of connections to the 4 WebSockets of this repository.

• Each frontend has the following components:

  1. AboutAccountPopup
  2. CommentsPopup
  3. ErrorPopup
  4. LeftSidebarPopup
  5. LikersPopup
  6. SendPostPopup
  7. ThreeDotsPopup
  8. AccountPreview
  9. CommentOfPost
  10. FollowUser
  11. LeftSidebar
  12. MediaPost
  13. PostDots
  14. SelectUserOrGroupChat
  15. StoryViewer
  16. UserBar
  17. UserIcon
  18. UserNotification

  And the following views:

  1. HomePage
  2. NotFoundPage
  3. StoryViewerPage

• Each of the frontend pages work for both dark-mode and light-mode of the system, and have been successfully tested across the top 5 most popular browsers and across the numerous different screen-sizes provided by Google-Chrome Dev-Tools.

• Whenever the user tries to access an endpoint in the frontend that does not exist, they will come across a 'Page-Not-Found' page that is very well styled. It was created by an experienced Graphics designer and the styling is very exquisite and complex, but I was able to alter the HTML/JS/CSS just a bit so that it fits the 'Megagram-brand'.

Key Points on Backend

• There are five backend directories for the Home-Page, one powered by C# Asp NET Core(aspNetCoreBackend1), one by Python Django(djangoBackend2), one by NodeJS Express (expressJSBackend1), one by PHP Laravel (laravelBackend1), and one by Java Spring-Boot(springBootBackend2). Each of them serve different purposes and work with data of different kinds. They all connect with databases/cloud in one way or another, and some of them connect to WebSockets for the sake of quick and seamless data-update tracking.

• The C# Asp NET Core Backend has the following Postgres-SQL (via AWS Aurora) models:

  1. EncryptedPostOrCommentLike
  2. UnencryptedPostOrCommentLike
  3. CaptionCommentAndLikeEncryptionInfo (captions, comments, and likes are all encrypted/decrypted with data-encryption-keys, which themselves are encrypted with Microsoft Azure Cloud Key-Management-Service)

  The following Microsoft Azure Cloud SQL Server models:

  1. EncryptedCaptionOfPost
  2. UnencryptedCaptionOfPost
  3. EncryptedCommentOfPost
  4. UnencryptedCommentOfPost

  The following Rest-API endpoints:

  1. getBatchOfLikersOfPostOrComment/{authUserId}/{overallPostId?}/{commentId?}
  2. addLikeToPostOrComment/{authUserId}/{overallPostId?}/{commentId?}
  3. addEncryptionInfoForCaptionCommentsAndLikesOfNewlyUploadedEncryptedPost/{overallPostId}
  4. toggleLikeToPostOrComment/{authUserId}/{overallPostId?}/{commentId?}
  5. toggleEncryptionStatusOfCaptionCommentsAndLikesOfPost/{overallPostId}/{originallyIsEncrypted}
  6. removeLikeFromPostOrComment/{authUserId}/{overallPostId?}/{commentId?}
  7. removeCaptionCommentsAndLikesOfPostAfterItsDeletion/{overallPostId}/{wasEncrypted}
  8. getCaptionsOfMultiplePosts
  9. getNumLikesNumCommentsAndAtMost3LikersFollowedByAuthUserForMultiplePosts/{authUserId}
  10. forHomePageFeedGetTheTopUsersBasedOnNumLikesNumCommentsNumPostViewsAndNumAdLinkClicks/{authUserId}

  And the following GraphQL mutations and queries.

  1. AddCaptionToPost(int authUserId, string overallPostId, string captionContent)
  2. EditCaptionOfPost(int authUserId, string overallPostId, string newCaptionContent)
  3. DeleteCaptionOfPost(int authUserId, string overallPostId)
  4. AddCommentToPost(int authUserId, string overallPostId, string commentContent)
  5. AddReplyToComment(int authUserId, int commentId, string replyContent)
  6. EditComment(int authUserId, int commentId, string newCommentContent)
  7. DeleteComment(int authUserId, int commentId)
  8. GetCaptionOfPost(int? authUserId, string overallPostId)
  9. GetBatchOfCommentsOfPost(int authUserId, string overallPostId, int?[] commentIdsToExclude, int? maxBatchSize)
  10. GetBatchOfRepliesOfComment(int authUserId, int commentId, int?[] replyIdsToExclude, int? maxBatchSize)

  Last but not least, this backend utilizes Redis for caching info on the captions of posts, as well as the encrypted data-encryption-keys used for encrypting captions/comments/likes of private posts(posts whose authors are account-visibility-statuses are all set to 'private').

• The Python Django Backend has the following My-SQL (via AWS Relational Database Service) models:

  1. FollowRequest
  2. PostSave

  The following Postgres-SQL (via Microsoft Azure Cloud Flexible-Server) models:

  1. UserBlocking
  2. UserFollowing

  The following Rest-API endpoints:

  1. getBatchOfSaversOfOwnPost/{auth_user_id}/{overall_post_id}
  2. savePost/{auth_user_id}/{overall_post_id}
  3. toggleSavePost/{auth_user_id}/{overall_post_id}
  4. unsavePost/{auth_user_id}/{overall_post_id}
  5. getBatchOfThoseBlockedByMe/{auth_user_id}
  6. blockUser/{auth_user_id}/{id_of_user_to_block}
  7. toggleBlockUser/{auth_user_id}/{id_of_user_to_block}
  8. unblockUser/{auth_user_id}/{id_of_user_to_block}
  9. getBlockingsOfUser/{user_id}
  10. isEachUserInListInTheBlockingsOfAuthUser/{auth_user_id}
  11. getFollowingsAndBlockingsOfUser/{auth_user_id}
  12. checkIfUserIsInBlockingsOfAuthUser/{auth_user_id}/{user_id}
  13. checkIfUsersInListAreInBlockingsOfAuthUser/{auth_user_id}
  14. getOrderedListOfUserSuggestionsBasedOnNumFollowersAndOtherMetrics/{auth_user_id}/{username_starts_with_this}/{limit}
  15. getNumFollowersFollowingsAndPostsOfMyTop5UserSuggestions/{auth_user_id}

  And the Following GraphQL mutations and queries:

  1. FollowUser(int authUserId, int idOfUserToFollow)
  2. ToggleFollowUser(int authUserId, int idOfUserToToggleFollow)
  3. UnfollowUser(int authUserId, int idOfUserToUnfollow)
  4. RequestToFollowUser(int authUserId, int idOfUserToRequestToFollow)
  5. CancelFollowRequestToOrFromUser(int authUserId, int idOfUserToCancelRequest, boolean authUserIsRecipientOfRequest)
  6. ToggleFollowRequestToUser(int authUserId, int idOfUserToToggleRequest)
  7. AcceptFollowRequestFromUser(int authUserId, int idOfUserToAccept)
  8. AcceptAllFollowRequestsAfterGoingPublic(int authUserId)
  9. GetBatchOfFollowersOfUser(int authUserId, int userId, int[]? followerIdsToExclude)
  10. GetBatchOfFollowersOfUser(int authUserId, int userId, int[]? followerIdsToExclude)

• There are 3 more big ones that aren't covered in this README

Key Points on WebSocket

• There are four WebSocket directories in this repository: cSharpSignalRWebSocket(C# SignalR), nodeJSWebSocketDotIO(NodeJS Socket.IO), phpRatchetWebSocket(PHP Ratchet), & pythonWebSocket(Python WebSocket).

• The cSharpSignalRWebSocket WebSocket is responsible for providing updates on comment-likes and comment-replies to comments of connected clients who have authenticated themselves. The updates are given to the WebSocket by the aspNetCoreBackend1 backend-server.

• The nodeJSWebSocketDotIO WebSocket is responsible for providing updates on comments and likes to posts of connected clients who have authenticated themselves. The updates are given to the WebSocket by the aspNetCoreBackend1 backend-server.

• The phpRatchetWebSocket WebSocket is responsible for providing updates on follow-requests or followings received by connected clients who have authenticated themselves. The updates are given to the WebSocket by the djangoBackend2 backend-server.

• The pythonWebSocket WebSocket is responsible for providing updates on messages in conversations of connected clients who have authenticated themselves. The updates are given to the WebSocket by the springBootBackend2 backend-server.

Finale

Thank you for sticking around till the end! Hope you found what you were looking for. Whether you did or not, feel free to reach out to me using any of the following methods:

• Email: rishavray422@gmail.com

• Number(texting only)-> 608-443-7805

• Linkedin: https://www.fakelink.com