Cool#Pool

Cool#Pool is social polls UI and layout. Created on Vue.js and Typescript using Vuetify as design framework. Docs were created on VuePress.

Table of contents

• About
• Demo
• Technologies
• View diagram
• Page Reference
• Notes

Demo

• Check it now on https://valerachuk.github.io/cool-pool/
• Docs: https://valerachuk.github.io/cool-pool/docs/

Technologies

• Vue.js 2
• Vuetify
• Typescript
• vue-apexcharts
• VuePress

View diagram

https://www.figma.com/file/rJkQNmhDPp93aLiVHPsELk/cool-pool-view-diagram

Page Reference

Header

1. Title, if you logged in, it redirects you to the pool list page. I if not - to home page
2. Sign in / Sign out button, allows you to sign in / sign out

Home

Shows basic info about the project.

Pool list

Here you can view all your pools.

1. Search field, allows you to find a required pool.
2. NEW POOL button, creates a new pool.
3. 👁️ button, allows to view statistics.
4. 🔗 button, copies public link of a pool to clipboard.
5. 🗑️ button, deletes a pool.

Pool creation

Here you can create a pool.

1. From name field, required. ❗
2. Form description field.
3. SAVE button, submits your pool.
4. Question block name field, required. ❗
5. Single choice / Multiple choice select, allows you to choose between exactly one / at least one answer for a question block.
6. Small ➕ button, adds an answer option to a question block.
7. 🗑️ button, deletes a question block.
8. 📋 button, duplicates a question block.
9. Question block answer option field ⚪, _requires exactly one answer from an interviewee*, required. ❗
10. Question block answer option field ⬜, _requires at least answer from an interviewee*, required. ❗
11. 🗑️ button, deletes an answer option from a question block.
12. Big ➕ button, adds a question block to pool.

Question block - question that allows an interviewee to choose answer option(s). There are two types of question blocks, that require exactly one and at least one answer.

Required field - field, that required for submitting a form.

Pool statistics

Shows detailed pool statistics.

Answer

Collects an answer from interviewees

1. Question block, that requires at least one answer.
2. Question block, that requires exactly one answer.
3. SEND button, submits an answer.

Question block - question that allows an interviewee to choose answer option(s). There are two types of question blocks, that require exactly one and at least one answer.

Required answer - answer, that required for submitting a form.

Notes

• This is not web app, this is just UI layout
• Yes, "pool" is a typo...