Description: This is a single-page ReactJS/Redux polling application. Poll questions take the form of "Would you rather [question 1] or [question 2]".
Basic operations:
Login: Upon initial startup, the user will be asked to log in. Upon successful login they will be redirected to the main/index page, which will display 3 tabbed sections, each with a list of questions: "Unanswered" (questions they have not yet answered), "Answered" (questions they have previously answered), and "Mine" (questions they have authored.).
Answer/View polls: Each poll question will be a link which will take the user to the details of that poll, where they will either see the results of the voting for questions they have answered (number of votes each question recieved, along with the percentage), or else a form where they can select one of the two options. Upon answering the poll question, the question page will reload showing the user the results of that question.
View Leaderboard: The user will be able to navigate to the "Leaderboard" from the top nav bar. The Leaderboard will display a table with 4 columns: User, total questions the user asked, total questions the user answered, and the sum of asked + answered. The table will be initially sorted by total, descending. The table can be sorted by the other columns by clicking on the column header (an up/down arrow will indicate the current sorting order)
Create New Polls: The user will have the option (shown in the navigation bar at the top of the window) to also create new Polls. When selected, the user will see 2 text fields where they can ask the 2 questions for the poll. Upon submission, the user will be redirected back to the main screen, where they will see the new poll question in their "unanswered" tab.
Installation:
To install, you should have a node.js server available on your system. Clone or download the app at https://github.com/pnellesen/reactnd-would-you-rather to a directory of your choosing (unzip if downloading) then run "npm install" in the app directory. Once all the required node modules have been installed, run "npm start" to run the application.
=========================================================================
Development information:
This is the starter code for the final assessment project for Udacity's React & Redux course.
The _DATA.js file represents a fake database and methods that let you access the data. The only thing you need to edit in the _DATA.js file is the value of avatarURL. Each user should have an avatar, so you’ll need to add the path to each user’s avatar.
Using the provided starter code, you'll build a React/Redux front end for the application. We recommend using the Create React App to bootstrap the project.
There are two types of objects stored in our database:
- Users
- Questions
Users include:
| Attribute | Type | Description |
|---|---|---|
| id | String | The user’s unique identifier |
| name | String | The user’s first name and last name |
| avatarURL | String | The path to the image file |
| questions | Array | A list of ids of the polling questions this user created |
| answers | Object | The object's keys are the ids of each question this user answered. The value of each key is the answer the user selected. It can be either 'optionOne' or 'optionTwo' since each question has two options. |
Questions include:
| Attribute | Type | Description |
|---|---|---|
| id | String | The question’s unique identifier |
| author | String | The author’s unique identifier |
| timestamp | String | The time when the question was created |
| optionOne | Object | The first voting option |
| optionTwo | Object | The second voting option |
Voting options are attached to questions. They include:
| Attribute | Type | Description |
|---|---|---|
| votes | Array | A list that contains the id of each user who voted for that option |
| text | String | The text of the option |
Your code will talk to the database via 4 methods:
_getUsers()_getQuestions()_saveQuestion(question)_saveQuestionAnswer(object)
_getUsers()Method
Description: Get all of the existing users from the database. Return Value: Object where the key is the user’s id and the value is the user object.
_getQuestions()Method
Description: Get all of the existing questions from the database. Return Value: Object where the key is the question’s id and the value is the question object.
_saveQuestion(question)Method
Description: Save the polling question in the database.
Parameters: Object that includes the following properties: author, optionOneText, and optionTwoText. More details about these properties:
| Attribute | Type | Description |
|---|---|---|
| author | String | The id of the user who posted the question |
| optionOneText | String | The text of the first option |
| optionTwoText | String | The text of the second option |
Return Value: An object that has the following properties: id, author, optionOne, optionTwo, timestamp. More details about these properties:
| Attribute | Type | Description |
|---|---|---|
| id | String | The id of the question that was posted |
| author | String | The id of the user who posted the question |
| optionOne | Object | The object has a text property and a votes property, which stores an array of the ids of the users who voted for that option |
| optionTwo | Object | The object has a text property and a votes property, which stores an array of the ids of the users who voted for that option |
| timestamp | String | The time when the question was created |
_saveQuestionAnswer(object)Method
Description: Save the answer to a particular polling question in the database.
Parameters: Object that contains the following properties: authedUser, qid, and answer. More details about these properties:
| Attribute | Type | Description |
|---|---|---|
| authedUser | String | The id of the user who answered the question |
| qid | String | The id of the question that was answered |
| answer | String | The option the user selected. The value should be either "optionOne" or "optionTwo" |
This repository is the starter code for all Udacity students. Therefore, we most likely will not accept pull requests. For details, check out CONTRIBUTING.md.