mastowall

KO | EN

gitlite — search

#javascript #python #ai #typescript #llm #android #linux #macos #cli #kubernetes #vue #pytorch #mcp #openai

(★ 121)

Simple implementation of a Twitter-Wall like grid of postings from Mastodon

File Explorer

Download Latest Version (.zip)

- - 2025-08-26_14-28Z-analyse-den-aufbau-der-app.md
  - 2025-08-28_11-26Z-projektanalyse-von-aufbau-und-strukturen.md
  - 2025-10-01_12-46Z-moderne-bootstrap-buttons-mit-symbolen.md
  - 2025-10-01_23-30Z-avatare-fliegen-nicht-mehr.md
  - 2025-10-08_11-41Z-schau-gründlich-nach,-ob-die-informationen-aus-der-config-json-übverhaupt.md
- .gitignore
.cursorindexingignore
.github-pages-trigger
.gitignore
config.json
deploy-to-cloudron.sh
index.html
LICENSE
mastowall-favicon.png
README.md
script.js
styles.css

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Mastowall 2

Mastowall is a modern social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network. It was written entirely by AI ([Claude Sonnet 4.5](https://www.anthropic.com/), ChatGPT 4, and ChatGPT 5), guided only by text prompts.

The new People screen - who is writing on the wall?

🔗 **[Try it live](https://rstockm.github.io/mastowall/)**

Try it live: [[Mastowall for the Open Source Summit]](https://rstockm.github.io/mastowall/?hashtags=opensourcesummit,ossummit&server=https://mastodon.social)

Use your own hashtags and server via the settings:

## ✨ Features

### 🎨 **Modern UI Design**
- **Three View Modes:** Switch between Grid (Posts), People (Avatar Cards), and Settings
- **Sticky Header:** Always accessible navigation with smooth animations
- **Responsive Masonry Layout:** Beautiful grid that adapts to any screen size
- **Clean & Modern:** Professional white design with subtle gradients and shadows

### 📱 **Content Display**
- **Real-Time Updates:** Posts refresh every 10 seconds automatically
- **Rich Media Support:** Display images, videos, and multi-image carousals
- **Lightbox View:** Click any media to see it in full-screen overlay
- **Relative Timestamps:** Human-readable time display (e.g., "5 minutes ago")
- **Avatar Cards:** View contributors grouped by author with post counts
- **Smart Filtering:** Exclude replies or include them based on your needs

### 🔧 **Configuration**
- **URL Parameters:** Easy sharing with `?hashtags=tag1,tag2&server=mastodon.social`
- **Zero State Screen:** Intuitive setup for first-time visitors
- **Multi-Server Support:** Connect to any Mastodon instance
- **Follow Feature:** Authenticated users can follow contributors directly
- **Share Function:** Copy current configuration to clipboard

### 🔐 **Privacy & Security**
- **Client-Side First:** Most processing happens in your browser
- **Secure Authentication:** OAuth 2.0 for Mastodon connections
- **No Data Storage:** Your configuration stays in the URL, not on servers

## 🛠️ Technology Stack

- **[Bootstrap 5](https://getbootstrap.com/)** - Modern responsive framework
- **[jQuery](https://jquery.com/)** - DOM manipulation and AJAX
- **[Masonry](https://masonry.desandro.com/)** - Cascading grid layout
- **[DOMPurify](https://github.com/cure53/DOMPurify)** - XSS protection for user-generated content
- **[Bootstrap Icons](https://icons.getbootstrap.com/)** - Icon library
- **Vanilla JavaScript** - Modern ES6+ for application logic

## 🚀 Quick Start

### Basic Usage

1. **Visit** [https://rstockm.github.io/mastowall/](https://rstockm.github.io/mastowall/)
2. **Enter** up to 3 hashtags you want to follow
3. **Select** a Mastodon server (default: mastodon.social)
4. **Click** "Start" and watch the wall come alive!

### URL Parameters

Share specific configurations by using URL parameters:

```
https://rstockm.github.io/mastowall/?hashtags=wwdc,apple&server=mastodon.social
```

**Parameters:**
- `hashtags` - Comma-separated list of hashtags (no # symbol needed)
- `server` - Mastodon instance URL (e.g., `mastodon.social`)

### Connect to Mastodon (Optional)

To use the Follow feature:

1. Click the **Connect** button (🔗 icon) in the header
2. Enter your own Mastodon instance URL
3. Authorize the connection
4. Follow contributors directly from the People view

*Note: Authentication is handled securely via OAuth 2.0. Your credentials are never stored.*

## 🤝 Related Projects

- **[Mastotags](https://rstockm.github.io/mastotags/)** - Discover trending hashtag combinations

## 🤖 AI-Powered Development

Mastowall 2 demonstrates the potential of AI-assisted software development. The entire application—including all code, UI/UX design, and documentation—was created through conversations with multiple AI models: **Claude Sonnet 4.5** (Anthropic), **ChatGPT 4** (OpenAI), and **ChatGPT 5** (OpenAI).

The development process:
- Human developer described desired features and requirements
- AI models provided solutions, code implementations, and optimization suggestions
- Iterative refinement through natural language conversation
- **Every line of code** was written by AI

This project serves as a proof of concept for modern AI-assisted development workflows.

## 📝 License

This project is open source and available under the MIT License.

## 👤 Author

**Ralf Stockmann** ([@rstockm](https://github.com/rstockm))
- Prompting & Project Direction
- AI Collaboration & Workflow Design

---

**Powered by AI** 🤖 | **Built for Mastodon** 🐘 | **Made with ❤️**

mastowall

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

mastowall

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README