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
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 installin the Frontend/pixlr-frontend folder. - run
npm run devto 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.
Authors
License
This project is licensed under the MIT License
Acknowledgments
Link to Website:
Screenshots of our Website
The Home Page
The News Site
The Image Editor
Additional Resources / Info
All Collaborators:
Resources:
Top comments (2)
A very cool and fun project! BTW, your link to the demo is broken.
Thank you a lot!
The link should work now, thanks for pointing it out.