DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Fun way to sort users in talks/meetings
dippas
dippas

Posted on

Fun way to sort users in talks/meetings

Hi there,

You know those daily meetings that almost everyone have nowadays mostly virtually due to Covid-19? It can be hard to start them, specially in large teams, because no one knows if its their turn to talk or not, maybe want to respect hierarchy or something else.

With that in mind (and a few other reasons) in the beginning of the pandemic I created just for fun and as dare from my co-workers a way to randomly sort the order in how everyone in each team would speak everyday.

As this was just for fun and in house project I created a few extra features such as:

  • daily quotes to boost the day
  • the shuffler user (the user who would shuffle the order in every day)
  • number of rounds the shuffle would sort, completely random also.
  • sound of deck cards shuffling
  • confetti effect when shuffle had finished sorting (with an extra audio - 20th Century Fox Intro Flute - which is an inside joke in my team)

This project was well received in the team and others also inside the company that more than a year passed it is still used everyday.

But the project was basic, being built with Vue 2 without components (file extension was .js) nor ES6 modules

Today I show you the improved version of this project, it is built with:

  • Vue 3
  • SCSS
  • Pug
  • Vite
  • JSON Server

It has a few new features/improvements:

  • CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
  • Daily Random Background from Picsum API
  • New quotes API and it's author with picture from Quoteable API
  • Layout improvement - the shuffle sorting works in mobile

GitHub logo dippas / shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Shuffler

shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Show your support

bc

Give a ⭐️ if you enjoyed this project!

Status

stars forks watchers

release (latest by date) issues maintenance release date

Built With

Getting Started

Installation

npm i
Enter fullscreen mode Exit fullscreen mode

Development

Run json-server and let it running

npm run db
Enter fullscreen mode Exit fullscreen mode

Run project in another terminal at the same time

npm run dev
Enter fullscreen mode Exit fullscreen mode

Build for Production

npm run build
Enter fullscreen mode Exit fullscreen mode

Locally preview production build

npm run preview
Enter fullscreen mode Exit fullscreen mode

Features

  • Shuffle Randomly Users (with random rounds between 5 and 10)
  • CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
  • Randomly select daily who will shuffle
  • Daily Random Backgrounds from Picsum API
  • Daily Random Quotes and it's author with picture from Quoteable API
  • Sound of deck cards shuffling
  • Confetti effect when shuffle finished sorting (with an extra…

Give a ⭐️ if in github you enjoyed this project or buy me a coffee!

Top comments (3)

Collapse
 
nilsonmart profile image
Nilson Martins

Very useful tool. Thanks for sharing with us. :)

Collapse
 
joao_pacheco_e32e56236ffc profile image
Joao Pacheco • Edited on

Great tool, a nice visual way to organise the meetings!

Collapse
 
dippas profile image
dippas

Thanks my friend ;)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!