search

cheeaun / phanpy

A minimalistic opinionated Mastodon web client
https://phanpy.social
MIT License
935 stars 85 forks source link
mastodon mastodon-client pwa web

readme

Phanpy === **Minimalistic opinionated Mastodon web client.**

Fancy screenshot

🗣️ Pronunciation: /fænpi/ (FAN-pee) 🔊 Listen

This is an alternative web client for Mastodon.

🐘 Follow @phanpy on Mastodon for updates ✨

Everything is designed and engineered following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.

Features

Design decisions

Subtle UI implementations

User name display

User name display

Boosts Carousel

Boosts Carousel

Thread number badge (e.g. Thread 1/X)

Thread number badge

Hashtag stuffing collapsing

Hashtag stuffing collapsing

Filtered posts

Development

Prerequisites: Node.js 18+

Tech stack

Some of these may change in the future. The front-end world is ever-changing.

Self-hosting

This is a pure static web app. You can host it anywhere you want.

Two ways (choose one):

Easy way

Go to Releases and download the latest phanpy-dist.zip or phanpy-dist.tar.gz. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.

Custom-build way

Requires Node.js.

Download or git clone this repository. Use production branch for stable releases, main for latest. Build it by running npm run build (after npm install). Serve the dist folder.

Customization can be done by passing environment variables to the build command. Examples:

PHANPY_CLIENT_NAME="Phanpy Dev" \
    PHANPY_WEBSITE="https://dev.phanpy.social" \
    npm run build
PHANPY_DEFAULT_INSTANCE=hachyderm.io \
    PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up \
    PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy \
    npm run build

It's also possible to set them in the .env file.

Available variables:

Static site hosting

Try online search for "how to self-host static sites" as there are many ways to do it.

Lingva-translate or lingva-api hosting

See documentation for lingva-translate or lingva-api.

Community deployments

These are self-hosted by other wonderful folks.

Note: Add yours by creating a pull request.

Costs

Costs involved in running and developing this web app:

Mascot

Phanpy is a Ground-type Pokémon.

Maintainers + contributors

Contributors

Backstory

I am one of the earliest users of Twitter. Twitter was launched on 15 July 2006. I joined on December 2006 and my first tweet was posted on 18 December 2006.

I know how early Twitter looks like. It was fun.

Back then, I made a Twitter clone called "Twig" written in Python and Google App Engine. I almost made my own Twitter desktop client written in Appcelerator Titanium. I gave one of my best talks about the Twitter client in a mini-conference. I built this thing called "Twitter Columns", a web app that shows your list of followings, your followings' followings, your followers, your followers' followers and so on. In 2009, I wrote a blog post titled "How I got started with Twitter". I created two themes for DestroyTwitter (a desktop client made with Adobe Air by Jonnie Hallman) and one of them is called "Vimeo". In 2013, I wrote my own tweets backup site with a front-end to view my tweets and a CouchDB backend to store them.

It's been more than 15 years.

And here I am. Building a Mastodon web client.

Alternative web clients

💁‍♂️ Notice to all other social media client developers

Please, please copy the UI ideas and experiments from this app. I think some of them are pretty good and it would be great if more apps have them.

If you're not a developer, please tell your favourite social media client developers about this app and ask them to copy the UI ideas and experiments.

License

MIT.