Do you want to share your hobby with other people, but you are also shy and do not want to reveal too much? Then Circles is exactly meant for you! By entering Circles, you will be able to share your interests, knowing and interacting people with similar interests while remaining totally anonymous!
Posts at the homepage will be customized based on your tags. You can change your tags and view all of your own posts in your profile page.
Main building pillar of our project. HTML is used together with React to define the structure of webpage. CSS is used in the format of independent files as well as Material-UI styles. Both frontend and backend are written in Javascript.
React is the library we use exclusively for frontend development. It allows structures to be represented using components to achieve high reusability and better readability. It also makes building interactive components easier by allowing components to have state, data, and functions. As number of components and the amount of data increase, we store all the states in a centralized store to make state management easier by introducing Redux. For example, one reducer might hold the data of the current user, while another reducer might hold all posts currently displayed on the homepage.
MongoDB is the place where all data such as user information, posts, comments, messages, and chat sessions are persisted. We use it with Mongoose to provide a direct map from document to JavaScript object, which can be really convenient.
Express is a web framework for Node.js. We used it to serve frontend requests and access database.
We deployed our App to Microsoft Azure using Docker. We want to practice using Docker, and Azure is more convenient to use for deploying docker files. Also, Azure seems to be a more popular choice in industry.
Our recommendation and searching system is built upon Elasticsearch. It has three main usages. The first is that we recommend posts to users based on content of the post and tags of the user. The second is that we recommend similiar users to each other based on their tags. The third is the search bar on top right corner, where users can search posts based on the search term.
We used Google Maps API to acquire users' geolocation after their consents. And afterwards calculated geo-distance for users nearby and allowing them to be viewed on google map.
The text chat system is based on WebSocket. Specifically, we implemented user status detection (online/offline) using polling and automatic reconnecting on close and errors events, making the chat system more robust. We also used WebSocket as signaling server to implement video chat function based on WebRTC. WebRTC is based on peer-to-peer connection of browsers and ideally will not require a server to handle mass data transmission. It is now supported by many browsers on different platforms and can be used for various purposes.
We used AWS S3 to store user avatars and post images, and in our MongoDB, we only need to keep an URL of the avatars/images. By doing this, we can save space in our MongoDB and avoid slowing down query.