OurFace

December 2018 to January 2019

OurFace TimeLine, inspired by Twitter

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.

Hashtag link

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.

Preview of link

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…

NyahBot, mirrored from Twitter's bot

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 post from a verified account

Example of a flagged post

A content filtering feature by type (eg: replies, reposts, images, posts) was added, which allowed the different image bot accounts to highlight their content.

Content filtering, with the notification of new posts

Notable UX Features

Image thumbnails with lazy load and multi-resolutions (generated server-side by PHP)

Image thumbnail

On the social chat, the most active online users will be displayed for better interaction

Most active online users

Ability to reply to message have been later implemented

Reply to message

Friends suggestion

Friends suggestion

Posts with markdown for code embed got embeds :

Embed preview of code

Notification of new content (on the top bar) and new message (in the favicon)

Icon for new content and unread message

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.

    • PhaserJS
    • Web IDE
    • Svelte
    • TypeScript
  • Status Page

    Server status page

    I build my own simple status page to display service status and monitor downtimes

    • Status Page
    • Python
    • Monitoring
    • Flask
  • Reviving with Deno

    GDocs Refactoring

    Modernizing the GDocs documentation generator using Deno and Svelte for better performance and development workflow.

    • Deno
    • Svelte
    • Legacy
    • Refactoring

Want more ?

I've got a lot of other awesome projects

See them all !