DEV Community

loading...

Sticker-debate: For those who have too many stickers

geopjr profile image GeopJr ・2 min read

Do you have too many stickers? Is choosing which stickers you are going to stick on your machine too difficult? Let your friends decide!

demo

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 👀.

Vue

Apart from the amazing tools vue comes with, vue-ui stepped the framework game up!

vue-ui screenshot

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!

Frontend

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.

Backend

The backend is written in JavaScript, using express and a simple json database. The backend is responsible for handling the post requests from the frontend.

One of the reasons it's so simple is to allow the use of any framework and database with ease, like amber.

Fin

There is an installation guide and additional info on the git repo:

GitHub logo GeopJr / sticker-debate

For those who have too many stickers

sticker-debate

A simple vue app for those who have too many stickers...

Demo

demo

Features

  • 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

Image Data

  • Place all your images named whatever you want in ./public/assets/img/
  • Run the Crystal script using $ crystal run generate_data.cr. Your images will be renamed.
  • Edit the generated json located at ./src/assets/data.json with additional info about your stickers.

Auth0

Discussion

pic
Editor guide