Do you have too many stickers? Is choosing which stickers you are going to stick on your machine too difficult? Let your friends decide!
In an attempt to get out of my comfort zone, I decided to create a silly little project using Vue, a well known web framework that is not made by Google or Facebook 👀.
Apart from the amazing tools vue comes with, vue-ui stepped the framework game up!
With Vue-UI you get an interactive dashboard that displays everything from speed stats to dependency size pie charts. You also get to install plugins, run tasks, check for vulnerabilities and much more!
The frontend consists of material components from vue material and is responsible for communicating with the backend using axios, authenticating through Discord and displaying the stickers and their data.
Stickers need some data that get auto-generated using a small Crystal-lang script based on the provided images.
In an attempt to have the backend handle only the sticker requests, Discord oauth2 is handled here using auth0.
On vote, cards get re-arranged and sorted by most votes.
One of the reasons it's so simple is to allow the use of any framework and database with ease, like amber.
There is an installation guide and additional info on the git repo:
A simple vue app for those who have too many stickers...
- A material design frontend (https://vuematerial.io/)
- A basic backend written in js using express and a basic json database
- Auto sort of sticker-cards on vote by most voted
- A small Crystal script to generate the basic json
- Simple Discord oauth to authenticate users using auth0
- Ability to allowlist/denylist user IDs
[WARN]: This is just a small fun project, it's not meant to be secure, safe or user-friendly. Don't PR <3.
How to host it yourself
- Place all your images named whatever you want in
- Run the Crystal script using
$ crystal run generate_data.cr. Your images will be renamed.
- Edit the generated json located at
./src/assets/data.jsonwith additional info about your stickers.
- Create an account, go to https://manage.auth0.com/dashboard and create a new application.
- Go to your application's settings and set