DEV Community

Emil Merle

Posted on May 11, 2022

Pixlr: Social Network based on Pixelart using Appwrite

#appwritehack

Overview of My Submission

Pixlr is a social network developed by two developers that focuses on simple pixel art. It was created in the course of the "Appwrite Hackathon on DEV" under the category "Web2 Wizards". The user interface was created using the web framework "Svelte" and the CSS framework "Bulma". The backend uses the self-hosted open-source backend server "Appwrite", which provides databases, user management and many other features.

Creating posts in Pixlr is done with the help of a simply designed editor that provides a 32 by 32 pixel canvas for painting artistic masterpieces.

An Appwrite server is used as the backend. The Account API is used for independent registration via the frontend, as well as for linking posts, likes and comments with the respective creators. The posts, likes, comments and news (for display on the news page) are each stored in a separate collection. The structure of the documents can be seen in the following screenshots. To store the individual images of the posts, the Storage API is used and the IDs of the created files are stored as an attribute within a posts document.

Attributes of the "Posts" collection:

Attributes of the "Likes" collection:

Attributes of the "Comments" collection:

Attributes of the "News" collection:

We are using Appwrite functions for various things, for example to create a post or to delete a comment. With the execute access for functions, we can make sure only registered users can create and like posts or write comments. Also, we can automatically get the user that triggers the function and link him to the post or comment he creates.

Submission Category:

Web2 Wizards

Link to Code

FinnKr / pixlr

A Pixelart based social network

Pixlr

A Pixelart based social network.

Description

Pixlr was developed during the Appwrite Hackathon in April and May 2022 and is published on pixlr.social.

Pixlr lets users create 32x32 pixelarts and share them directly with other users. People who are logged in can comment and like post from other users to give feedback on created art.

Pixlr is using Appwrite as backend and Svelte and Bulma as frontend.

A small article about this project can be found at DEV.to here.

Getting Started

Dependencies

NodeJS (for Frontend)

Installing and executing program

run npm install in the Frontend/pixlr-frontend folder.
run npm run dev to start a local webserver.
The Backend uses a configured appwrite installation. If you want to host your own Backend have a look at the DEV.to article about this project.