Back to blog

A UI toolbox for customizable social network apps

post image visual identity UI UX liveview surface

Bonfire:UI:Social is an extension that includes the main User Interfaces (both assembled pages and single components) required to have a fully working federated social network app.

The UI:Social extension is meant to be used by extensions like Bonfire:Social and Bonfire:Me, which both provide logic for the UI to work with, and define the routes and top-level views which in turn embed UI:Social components.

UI:Social also provides components used by other extensions including: Bonfire:Common, Bonfire:Search, Bonfire:Tag, Bonfire:Boundaries.

Stack #

So far, Bonfire UI extensions are built with the PETALS stack (note that is not a requirement), which means:

We're currently in the middle of a refactor to convert all components and templates from LiveView to Surface, which is a server-side rendering component library (built on top of Phoenix and LiveView) that inherits a lot of design patterns from popular JS framework like Vue.js and React, while being almost JavaScript-free compared to common SPAs.

Scaffolding #

The relevant folders are:

  • Components: Surface stateless and stateful components.
  • Layout: Main app templates, they include guest, logged or specific view templates (eg. the setting layout)
  • Views: The main pages that are rendered when navigating to a specific route
  • Test: All the unit tests for the specific module.

Other resources #