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

  • OVH Legacy analysis

    OVHManager

    Re-Implementing the OVH Manager control panel in order to understand why it's so slow. Spoiler alert, Legacy code is to blame there !

    • SvelteKit
    • REST
    • Legacy
    • PoC
  • Graph Viewer

    Animator Graph Viewer

    Visualize class relationships and animations with a d3.js-based interface using Vite and Svelte. Class parsing done with Node script.

    • D3
    • Svelte
    • Vite
    • UI
    • NodeJS
  • TailWind CSS practice

    Discord's Landing page clone

    Trying to make an almost-identical clone of the Discord landing page with TailwindCSS and SvelteJS

    • Tailwind CSS
    • Design Clone
    • Landing Page

Want more ?

I've got a lot of other awesome projects

See them all !