brunetsimon/live-poll

Live voting app created using React and firebase

live-poll's Issues

Add a homepage

We need to add a homepage when the URL path is "/".

It could say something like welcome and then 2 possible buttons.
Check out this link to know how to create buttons.

The link can be done using the "to" attribute described here

• A button that says "start voting" with a link to "/client"

• A button that says "display a voting graph" with a link to "/server"

Test your implementation here:

Make the page that display the graph result

This task is to handle the page that will display the graph showing the total vote result.

It shall listen for changes in the database and update a graph every time a new vote is received.

It has thus two modules:

• A function that listen to the database update.
• A bar graph (or other) displaying the result.
• Display the poll ID in the title available in the variable this.props.match.params.pollId

To implement the function listening to the database changes, look at this part of the documentation on how to continuously listen to value and update a local variable with the result.
The snapshot value shall be stored locally in the state countArray.

The graph could be done using this library. Why not use the BarChart?

Before uploading your implementation you can test it here:

Add End to End testing

Router to select either VotingClientSelector or VotingClient

You need to update the component VotingClientPage.jsx

It is a router with a Switch and 2 routes.

You need the router to:

• Select the VotingClientSelector component if the URL exactly matches /client
• Select the VotingClient component if the URL matches /client/:pollId

Note: :pollId means any ID. For example /client/1 the pollId is 1 and /client/IFG the pollId is IFG

You can test your implementation here:

Don't forget to navigate to the correct URL!

When this is done, do the same but for the server to be able to choose which graph poll to display. Simple copy paste can be done! Replace all "client" with "server".

Display list of rating icons to vote

The user votes by clicking on an smiley.

This task is to create a list of all the icons so that the user can click on one of them to vote.

To do:

• Display all smiley icons used to vote. Hint, use IconButton and Icon.

• When the user click on the icon, the function this.props.callbackVote shall get the corresponding rating id.

Hints:

• The rating id, icon, name can be found in the file constant.js
• The callback function works as follow: this.props.callbackVote.bind(null, 3) for example to indicate that the user clicked on the icon with ID 3.
• Look at the onClick function to know how to detect a click from the user

Extra fun: Try to avoid to copy paste the same code for each icon. Have a look at the map function.

You can test your code before pushing your task here in the file Vote.js:

Possibility to close the poll

The polls shall be able to be closed to prevent further voting.
Manually from the dashboard and automatically after x days.

Component to select which page to display

You will be working in Main.jsx

This component is mainly a router with a Switch, meaning that it will choose which page to display based on the URL we are at.

It shall do following:

• Display "Homepage" when the url path is exactly "/"
• Display "VotingClientSelector" when the url path is exactly "/client"
• Display "VotingClient" when the url path is "/client/:pollId"
• Display "VotingServerSelector" when the url path is exactly "/server"
• Display "VotingServer" when the url path is "/server/:pollId"

Note: :pollId means any ID. For example /client/1 the pollId is 1 and /client/IFG the pollId is IFG. This is how we know which poll the user would like to display.

You can test your implementation here:

Don't forget to navigate to the correct URL!

Display the poll description on voting view

Make it possible to leave a message

A user could want to add a message to its rating.

Create Navigation.jsx

Create a navigation for our App!

Requirement: We need an AppBar with a Title and at least 3 buttons.

• 1. A Client button which links to /client
• 2. A Server button which links to /server
• 3. An Admin button which links to /admin

Suggestion: Have a look here https://material-ui.com/demos/app-bar/ to find out how to use components like AppBar, Toolbar, Button, etc...

The link can be done using the "to" attribute described here

You can test it here before pushing your changes (file Navigation.js) :

Add unit testing

Display the vote result

Modify the file Result.jsx to display to the user which rating they selected and to inform that everything went well.

A sort of "thank you for voting. Here is your rating: Great".

Hints:

• The rating is available in the variable this.props.rating and correspond to a number.
• The rating number meaning can be found in the file constant.js
• Have a look at the material-ui library to see how to insert components for formating

Before pushing your task, you can test it here in the file Result.jsx:

Note: You can change the value of the rating in the file App.js

Add possibility to vote with one word and display a word cloud

See

• https://www.mentimeter.com/templates/speakers/speakers-webinar-survey
• https://react-wordcloud.netlify.com/usage/options

Display an activity feed in the admin dashboard

To help track which admin creates/closes which poll, shall be nice to display a basic activity feed.

Only users with verified email shall be considered admin

To increase the confidentiality, only users with verified email shall be able to be "admin"

Make it a Progressive Web App

Can we make it a Progressive Web App? So that the user could install the app like a native app.

Possible to filter poll in admin dashboard

While listing all the polls from the admin dashboard it shall be possible to select to only display the one that are opened and/or "my polls"

Page for user to choose a vote ID

This task is to work with the file VotingClientSelector.jsx and VotingServerSelector.jsx

This file controls the page where the user has to enter which vote he/she wants to select.

You need to implement the following features:

• A form for the user to enter the poll id. Use the form element and style it using FormControl, Input, FormHelperText and Button.

• The form shall take the poll/vote Id and save it locally in this.state.pollId. Hint: Create an "onChange" function on the Input element. (Look at the source code examples here.)

• When the user click the submit button the "handleSubmit" function will be called. It does 2 things: Check in the database if the pollId exists. If it does then navigate to the pollId URL (/client/ID or /server/ID) using history.push. If it doesn't then display an error (this..state.errorMsg and this.state.showError)

You can test your code here before uploading it to Github.

Page which display either the voting or the result

You will have to implement the VotingClient.jsx page.

This page has 2 functions:

• Display either the Result or Vote component depending if the user has voted or not
• Send the vote result to the firebase server

Hints:

• The variable that keep track if the user has voted is this.state.hasVoted
• The result component Result has one propertie "rating" which is the rating/vote number
• The vote component Vote has one propertie "callbackVote" which is the function that will handle the callback.
• The handleRatingCallback function shall take the rating and save it both in its internal state (this.setState) and in the database (see how to push() data to the database)
• The vote/rating shall be saved at the reference path "/polls/voteID/votes".

You can test your code here (Not the push to firebase though... But that's a simple one :) )

Make sure a user can only vote one time

Improve the admin page to create a poll

Use firebase functions to check if poll exists

Instead of checking if a poll exists in the client, allowing quering of all info, check it on the server and return a bool to the client.

Restrict user creation

Avoid that everyone create an account.
Check that the email address is a work email.
Add a rechaptcha.