Poster

Poster is a realtime web application made with the PETAL stack that allows users to share knowledge and chat through posts and comments, which can be published in an authenticated or anonymous way.

Table of Contents

• Features
  • Markdown rendering
  • Post covers
  • Clean URL slugs
  • Realtime capabilities
  • Observability
• Made with
  • Elixir + Phoenix
  • Tests
  • GitHub
  • Tailwind CSS
  • Alpine JS
  • Docker
• Development Setup
  • Installing development environment
    • With asdf
    • With Nix
  • Start dependencies with docker-compose
  • Enter the application directory
  • Setup the project
  • Run the project
• Running with Docker
• Running with docker-compose

Features

Markdown rendering

Users can share their ideas in posts using Markdown. This provides great flexibility for users creating their posts and a powerful opporunity for the application's code to parse this markdown and make sense of it to give it meaningful representations.

Post covers

By parsing the contents of a post, Poster can detect images and by default sets the first image of a post to be its cover when listing it.

Clean URL slugs

Posts are given an unique slug based on their titles when created. This slug will uniquely identify a post in the system and cannot be changed.

Example: A post titled "25 Reasons to Learn Elixir" might have an URL similar to https://poster.example/p/25-reasons-to-learn-elixir-aryi4

Realtime capabilities

Poster provides great realtime features for users, such as having new posts and comments being automatically shown to all users that are eligible to see them.

Example: If someone is browsing posts at Poster, and you publish a new post, this person will see your post pop up in her screen.

Observability

By using PromEx, the systems enable prometheus support in the /metrics endpoint and integrates with Grafana to provide observability to the system administrators:

Made with

Elixir + Phoenix

The Phoenix Framework allows one to easily mix server-side rendered layouts and realtime interactive pages with an enormous ease. The realtime features of this project are provided by Phoenix PubSub and Phoenix LiveView.

Tests

Since Phoenix makes it extremely easy to test complex interaction with pages, the app contains a big test suite that ensures the main features of the application are tested and the code coverage remains at around 90%.

GitHub

The project uses GitHub Actions as its continuous integration mechanism to ensure that code is properly formatted, tests are passing and type-checking points no errors.

Tailwind CSS

Tailwind CSS considerably boosts developer productivity when designing beautiful, modern, responsive applications.

Alpine JS

Alpine JS comes to the rescue by simplifying non-serverside client interactions, such as toggling the open state of the app's navbar.

Docker

Docker allows this project to be easily deployed in production environments and helps building a reliable and reproducible development environment.

Development Setup

Installing development environment

With asdf

asdf install

With Nix

nix develop

Start dependencies with docker-compose

docker-compose -f docker-compose.dev.yml up -d

Enter the application directory

cd poster

Setup the project

If you have not already run it, run:

mix setup

Run the project

iex -S mix phx.server

Running with Docker

docker run \
  --env DATABASE_URL=ecto://user:pass@host/database \
  --env PGDATABASE=poster \
  --env PGPORT=5432 \
  --env PGHOST=pg_host \
  --env PGUSER=postgres \
  --env PGPASSWORD=pg_pass \
  --env DATABASE_URL=ecto://user:pass@host/database \
  --env SECRET_KEY_BASE=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  poster

Running with docker-compose

docker-compose up