Pixlr: Social Network based on Pixelart using Appwrite
Tags: appwritehack
Published: 2022-05-11 17:11:12

### Overview of My Submission

[Pixlr](https://pixlr.social/) 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"](https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0) under the category "Web2 Wizards". The user interface was created using the web framework "[Svelte](https://svelte.dev/)" and the CSS framework "[Bulma](https://bulma.io/)". The backend uses the self-hosted open-source backend server "[Appwrite](https://appwrite.io/)", 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](https://appwrite.io/docs/client/account) 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](https://pixlr.social/news)) 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](https://appwrite.io/docs/client/storage) 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 posts collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra6dv888lcxspytvq1sd.png)

Attributes of the "Likes" collection:
![Attributes of the likes collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eua4kuv257offbgqnaht.png)

Attributes of the "Comments" collection:
![Attributes of the comments collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb09drgud475lygfynuh.png)

Attributes of the "News" collection:
![Attributes of the news collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydle9s01h2coxdizvmk5.png)

We are using [Appwrite functions](https://appwrite.io/docs/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

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% embed link_to_your_repo %}` to share a GitHub repository)

{% embed https://github.com/FinnKr/pixlr/ %}



### Link to Website:
[Pixlr.social](https://pixlr.social)



### Screenshots of our Website

#### The Home Page
![The Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjule75oggplqa7bvuw3.png)

#### The News Site
![The News Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzisq32w2n07ub176uub.png)

#### The Image Editor
![The Image Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coad38bkvjlw5dsqvgmy.png)



### Additional Resources / Info

All Collaborators:
* [Finn Kranzosch](https://dev.to/finnkr): @finnkr 
* [Emil Merle](https://dev.to/emilmerle): @emilmerle 

Resources:
* [Appwrite Github Repository](https://github.com/appwrite/appwrite)
* [Appwrite Discord Server](https://discord.gg/GSeTUeA)