Code Monkey home page Code Monkey logo

mastowall's Introduction

Mastowall 1.1

Mastowall is a social wall application that displays posts from the Mastodon social network based on specified hashtags. It was written entirely by ChatGPT4, guided only by text prompts.

image

Try it live: Mastowall for the WWDC conference)

Use your own hashtags and server:

image

JSON config file:

image

Features

  • Display Posts: The app fetches and displays posts from Mastodon based on the hashtags provided in the URL. If no hashtags are provided, it presents a form to enter up to three hashtags.

  • Custom Mastodon Server: Allows users to specify a Mastodon server URL from which to fetch posts.

  • Real-Time Updates: Mastowall updates the posts every 10 seconds, ensuring that the content displayed is always current.

  • Relative Timestamps: The timestamps of the posts are displayed relative to the current time, and are updated every minute to reflect the passing time.

  • Masonry Grid Layout: The posts are displayed in a masonry grid layout for a visually pleasing experience.

  • Responsive Design: The layout adjusts according to the screen size for better readability on different devices.

  • Navbar Hashtag Navigation: Clicking on the hashtags in the navbar takes you to the form screen, allowing you to change the existing hashtags easily.

  • Navbar Color Customization: The color of the navigation bar can now be customized via the config.json file.

  • Including Replies: By default, replies are excluded from the wall. However, this behavior can be changed by setting includeReplies to true in the config.json file.

Technology Stack

Mastowall is built using the following technologies:

  • HTML, CSS, and JavaScript: For structuring, styling, and functionality.

  • jQuery: A fast, small, and feature-rich JavaScript library.

  • Masonry: A JavaScript grid layout library.

  • Bootstrap: A popular CSS framework for responsive, mobile-first front-end web development.

  • DOMPurify: Library for sanitizing HTML input, which should prevent the vast majority of malicious input from being rendered

Usage

  1. Load the application in a web browser. If no hashtags are specified in the URL, you will be presented with a form to enter up to three hashtags and a server URL.

  2. After entering your hashtags and clicking 'Reload', the application will fetch and display posts from the specified Mastodon server that include those hashtags.

  3. The displayed posts will update every 10 seconds. The relative timestamps will also update every minute.

  4. To change the hashtags, click on them in the navbar to go back to the form screen.

Sharing via URL

Mastowall supports URL parameters to easily share specific hashtag configurations and the Mastodon server. Simply append the desired hashtags and the server URL to the URL following this format: ?hashtags=hashtag1,hashtag2,hashtag3&server=serverUrl

Enjoy using Mastowall!

AI-Guided Development: A Proof of Concept

Mastowall may serve as an example of how artificial intelligence can aid and accelerate the software development process. The development of this version of the app was guided by OpenAI's GPT-4, a large language model.

In this process, the human developer posed problems, asked questions, and described the desired features and functionalities of the application. GPT-4 then provided solutions, answered queries, generated code snippets, and suggested optimal ways to implement these features.

Every single line of code was written by ChatGPT4. Including this README.

mastowall's People

Contributors

rstockm avatar simondueckert avatar suboptimal avatar dergali avatar optikfluffel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.