Our project is a social media platform targeted towards students who want to connect with peers, share experiences, engage in discussions, and expand their networks. This platform offers essential socializing activities, including posting, editing, deleting, and viewing posts with images/videos, along with features like comments and likes. Users can access their uploaded posts, curated collections, follow others and engage in private chat. To enhance user engagement both within the platform and among users, we introduce innovative features such as interactive videos resembling Netflix's Black Mirror: Bandersnatch. Additionally, our video room feature allows multiple users to watch video together, furthen strengthening interactions within the community.
We utilize Okta's services for authentication and user identification in our app. When registering, Okta sends an email verification link. Upon clicking, you're directed to Okta's page and must manually return to our site to sign in. Ideally, we'd have Okta auto-redirect to our page, but due to Okta Auth being an enterprise solution, this feature is too expensive. Note: This doesn't impact the sign-in process.
- Users are able to register, sign in and sign out.
- Users are able to add connections and send private messages to their connections.
- Users are able to create, update, delete and view their own posts.
- Users are able to search for posts by keywords or tags.
- Users are able to edit their profile once their accounts are created.
- Users are able to create a collection of contents that they like.
- Users are able to attach videos to their posts.
- Share a user profile or some contents to other social media.
- Users can block contents based on tags.
- Users are able to upload interactive videos, watch them, and interact with videos by choosing customized options.
- Build a recommendation engine for post recommendation.
- Users can create a room and invite their friends to watch the same video and interact with each other.
HTML is used by leveraging the JSX. For the CSS, instead of creating separate CSS files for styling, we adopted MaterialUI, in this way, styling adjustments can be made directly through JSX tags, or using Tailwind CSS. For JS, JavaScript is used throughout our frontend and backend to fulfill our application needs.
Throughout our frontend, we heavily employed the React.js framework to develop highly modular UI components. These components are designed to capture and manage user inputs using React hooks, and we adhere to best practices like abstraction to minimize code redundancy and complexity. For managing our frontend data architecture, we integrated Redux. Also, we utilize useContext react hook, which allows us to access global data without using redux and actions, ensuring a centralized data source.
We leveraged the Express.js framework for our backend operations, channeling API requests to our backend services powered by Node.js, arranging API with different identifiers, achieving clear responsibility for each task. This setup processes data from the frontend, saving it to our MongoDB server when required. Also, we use S3 bucket to store user-uploaded images and videos.
We employed a NoSQL database via MongoDB to retain application data across sessions, executing NoSQL queries on our backend to fetch pertinent data. Our database houses five primary collections: 'Post', 'chats', 'comments', 'messages', and 'users'. Each document within these collections adheres to a schema defined in our backend using mongoose.
Our web app is hosted on Heroku. By linking the app to our GitHub repository, while setting up Continuous Deployment. This ensures that any commits made to the code-review branch on GitHub are automatically rolled out to our app on Heroku.
We leverage presigned URLs to securely upload images and videos directly to an AWS S3 bucket. To ensure fast and efficient access, we set up an AWS CloudFront distribution for low-latency content delivery of these media files to users.
With Socket.io, we implemented real-time chat and video synchronization functionalities. These features allow users to exchange private messages and join video rooms where they can simultaneously watch videos and engage in group chats.
Our online tree editor tool, powered by the react-d3-tree library, facilitates the upload and editing of interactive videos. As users watch, they can make choices and interact with the video content in real-time.
We've integrated OKTA SDK for robust frontend authentication and backend authorization. If not logged in, users are redirected to Okta's login page, regardless of their current page. All backend APIs are protected: only those with valid access tokens can interact with the API endpoints.
Through React's useMemo hook and memo components, we minimized unnecessary re-renders, enhancing performance. Our main page is optimized for user experience: rather than loading all posts at once, it uses infinite scrolling, loading more content as the user scrolls down.
To enhance the user experience throughout the day, our app automatically switches between light and dark modes based on the mode detected from the user's device, ensuring an optimal experience at all times.
We utilized tooltips and snackbars to guide users to play with our websites. We also provide a "copy to clipboard" button for users to share a video roomId more conveniently.
Develop a recommendation engine for our app to suggest tailored content for each user. The personalized content will be based on posts the user has interacted with, as well as those they have liked and commented on. To construct this recommendation engine, we will utilize an existing recommendation framework and customize it to better fit our app.
Currently, our search function retrieves text from the search bar and checks for exact keyword matches in posts. We've recognized that this approach may overlook related posts. Consequently, we intend to enhance our search algorithm from mere substring matching to a more sophisticated fuzzy search.
We're committed to enhancing KnowNet's accessibility, allowing a broader audience to engage with our knowledge-sharing platform. Soon, we'll implement semantic HTML for better screen reader guidance and offer descriptive alt-text for images. Multimedia will be accompanied by video captions and audio transcripts. Our focus will also be on clear form labeling, frequent screen reader testing, accommodating color-blind users, and optimizing touch target sizes for mobile. Our goal is to achieve WCAG 2.1 Level AA compliance and actively seek user feedback regarding accessibility.
Here are the list of features I led: OKTA SDK Integration(frontend authentication and backend authorization), Post creation/viewing, Video Room, Interactive Video. I also participated in optimizing, testing, debugging and helping my teammates.
I implemented all the functionalities in the comment board. A user could add comments, like comments and reply to comments under every post. Also, I enabled that a user could go to other users’ pages, follow or unfollow them, check their information, and send a direct message to them. Additionally, I helped my teammates to improve their UI by using Mui and fixed some bugs like updating all the posts data in MongoDb after the user updated their information.
I implemented and designed the following features: The layout of post preview cards. The "like" and "cancel like" function for posts with corresponding redux components. The mongoose schema of comments, users, and posts. All the features related to "tags" for our application, including adding tags, searching posts based on tags, blocking posts with tags. I also helped my teammates with debugging, optimizing, and improving user experience.
List of my implemented and designed features: The mainpage which utilizes the preview card of posts, search bar and also functionality bars. Other than that, I help my teammates deal with issues when integrating the frontend and the backend, such as deleting posts，synchronizing user information and post contents. At the end of the project, I help with my teammates to test the functionalities and debug.
Here is the list of features for which I took the leadership: Real-time socket chat center (including both frontend and backend implementation), user data schema, user APIs (including user creation, user fetching, and user information editing), and following and follower APIs with corresponding Redux. Other than that, I also participated in creating a UI prototype for the user profile page and continuously improving UI, debugging, testing, and helping my teammates fix issues.
- Sign-in Page:
- Post-viewing page
