Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/the-manpreet-singh/react-redux-would-you-rather-app

Would You Rather is a polling game that presents the user with a series of questions that can be answered one of two ways. It's built with React, Redux, React Router, & Redux Thunk.
https://github.com/the-manpreet-singh/react-redux-would-you-rather-app

actions connect meterial-ui middleware react-redux react-redux-loading react-router-dom reactjs reducers redux redux-thunk restful-api semantic-ui udacity-react-nanodegree

Last synced: 2 months ago
JSON representation

Would You Rather is a polling game that presents the user with a series of questions that can be answered one of two ways. It's built with React, Redux, React Router, & Redux Thunk.

Host: GitHub
URL: https://github.com/the-manpreet-singh/react-redux-would-you-rather-app
Owner: The-manpreet-singh
Created: 2020-06-23T08:37:02.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-01-05T21:52:15.000Z (about 2 years ago)
Last Synced: 2023-03-07T16:48:54.882Z (almost 2 years ago)
Topics: actions, connect, meterial-ui, middleware, react-redux, react-redux-loading, react-router-dom, reactjs, reducers, redux, redux-thunk, restful-api, semantic-ui, udacity-react-nanodegree
Language: JavaScript
Homepage: https://would-you-rather-by-manpreet.netlify.app/
Size: 4.45 MB
Stars: 5
Watchers: 1
Forks: 0
Open Issues: 19
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

# Would You Rather Project

## Live url- https://would-you-rather-by-manpreet.netlify.app/

## Project rules: https://review.udacity.com/#!/rubrics/1567/view

Would You Rather is a polling game that presents the user with a series of questions that can be answered one of two ways. It's built with React, Redux, React Router, & Redux Thunk. also add the authentication of users, which is entered a selected user dashboard, adding a queston answers to their own dashboard and see the poll of question answer section.

This is the final assessment project for Udacity's React - Redux course. This app a web app that lets a user play the “Would You Rather?” questions answer game. In this project, I'm using react and redux functionality, improving the predictability of the application’s state; establish rules for getting and updating the store; and identify what state should live inside of Redux and what state should live inside of React components.

# Installation instructions

Clone the repository, change directories, and use NPM/Yarn to install the dependencies.

- `$ git clone https://github.com/The-manpreet-singh/react-redux-would-you-rather-app.git`
- `$ cd react-redux-would-you-rather-app`
- `$ npm install or yarn install`

## Usage

The project can be run with

- `npm start` or `yarn start`

The project can be viewed in the browser at

- [http://localhost:3000](http://localhost:3000)

## Features

- login from with option to select user
- option to logout any time
- Tabs for answer or unanswer questions
- option to create new questions
- option to see the leaderboard

# extra description for api

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](https://github.com/facebook/create-react-app) to bootstrap the project.

## Data

There are two types of objects stored in our database:

- Users
- Questions

### Users

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

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

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)`

1. `_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.

2. `_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.

3. `_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 |

4. `_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"` |

## Contributing

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](https://github.com/udacity/reactnd-project-would-you-rather-starter/blob/master/CONTRIBUTING.md).