OurFace
December 2018 to January 2019
Aiming
This project was realized during the License 3 course, in order to test the advanced functions of a PHP back-end without framework. Using a minimal MVC framework and a hand-coded REST API, this application wanted to clone Twitter by bringing real-time messaging features.
Despite many difficulties related to a shared server with a less than optimal default configuration, this project stood out as the best of the promotion.
Quality of code and structure
The code is not optimal, and certainly contains many errors due to my beginnings in PHP.
The application offers a REST API documentation, inspired by swagger, available at /api
User experience and Feedbacks
This project has been one of the most popular implementations of the “OurFace” social network, mainly because of its responsive interface and many features that make it suitable for mainstream use.
Real-time chat through Long Polling and its ability to federate Emoji from different implementations using a common discovery model has allowed different implementations to communicate with and integrate effectively..
Security
It is interesting to note that this implementation of the “OurFace” model has proven to be one of the most robust against various attacks, including SQL Injection and XSS. The shared database was often the victim of fraudulent insertions, but the code base was designed to not trust its data sources.
During a stress test of various XSS attacks, this implementation is one of the few to remain available without service degradation.
Social Features
The OurFace template did not offer a meta-link function between posts, or a link between chat messages and message thread topics. A “HashTag” implementation allowed to quickly discover content related to a topic. In addition, sorting by chronological order and popularity made it easier to discover enjoyable content.
A link preview and meta-scrapping functionality with embedding functions gave this implementation a real social dimension, where activities related to content consumption are centralized in one service.
API and Bots
The V1 API has been opened, allowing the creation of Bots, and the automation of posts. This led to the creation of many image bots, including the popular “Cat Picture”, and the more amusing “Raclette Posting” which offered a raclette image every day.
It is unfortunate, however, that the API could not be further developed due to priorities on very tight deadlines. Its code is still a bit shaky for this reason…
Content spamming and sensitive content posting
When this implementation started to become popular, many fraudulent accounts appeared. To solve this problem, “Verified Account” and “Sensitive Content” features were implemented. Many accounts became shadow banned from the various news feeds for non-followers.
A content filtering feature by type (eg: replies, reposts, images, posts) was added, which allowed the different image bot accounts to highlight their content.
Notable UX Features
Image thumbnails with lazy load and multi-resolutions (generated server-side by PHP)
On the social chat, the most active online users will be displayed for better interaction
Ability to reply to message have been later implemented
Friends suggestion
Posts with markdown for code embed
got embeds :
Notification of new content (on the top bar) and new message (in the favicon)
Also Read
-
Phaser web IDE
Phaser Studio
Building a PhaserJS IDE using reactive binding with Svelte and TypeScript object mapping from PhaserJS. The scenes are passed from CustomEvent and listed in Inspector view.
-
Status Page
Server status page
I build my own simple status page to display service status and monitor downtimes
-
Reviving with Deno
GDocs Refactoring
Modernizing the GDocs documentation generator using Deno and Svelte for better performance and development workflow.