React ND Capstone: Would You Rather?

Overview

Would You Rather? is a frontend web app that allows a user to play the "Would You Rather?" game. The game goes like this: a user is asked a question in the form: "Would you rather [option A] or [option B]?". Answering "neither" or "both" is against the rules.

Would You Rather app is the capstone for Udacity React Nanodegree program.

The project has the following goals:

• Use React to build an application.
• Practice using hooks.
• Manage state using Redux.
• Leverage React Router.
• Deploy React application using Amazon Web Services.

Verify AWS deployment here.

Features

Login Flow

• There is a way for the user to log in as an existing user:
  • A login box appears at the root of the application, and the user can select a name from the list of existing users.
• The application allows the user to log out and log back in.
• The user should be logged in to:
  • submit new polling questions;
  • vote; and
  • view the leaderboard.

Home Page

• The answered and unanswered polls are both available at the root. The user can alternate between viewing them.
• The polls in both categories are arranged from the most recently created (top) to the least recently created (bottom).
• The unanswered questions are shown by default.
• The name of the logged in user is visible on the page.
• A View button links to details of the corresponding poll.

Poll Details

• The details of the poll are available at questions/question_id.
• When the user is logged in, the details of the poll are shown. If the user is logged out, they are asked to log in before before being able to access the poll.
• When a poll is clicked on the home page, the following is shown:
  • The text Would You Rather.
  • The picture of the user who posted the polling question.
  • The two options.

• For answered polls, each of the two options contains:
  • The text of the option.
  • The number of people who voted for that option.
  • The percentage of people who voted for that option.
  • The option selected by the logged in user is clearly marked.

• The application asks the user to sign in and shows a 404 page if that poll does not exist.

Voting Mechanism

• Upon voting in a poll, all of the information of the answered poll is displayed.
• The user’s response is recorded and is clearly visible on the poll details page.
• When the user comes back to the home page, the polling question appears in the Answered column.
• The data on the Leaderboard changes appropriately.

Add New Question

• The form is available at /add.
• The application shows the text Would You Rather and has a form for creating two options.
• Upon submitting the form, a new poll is created and the user is taken to the home page.
• The new polling question appears in the correct category on the home page.

Leaderboard

• The Leaderboard is available at /leaderboard.
• Each entry on the Leaderboard contains:
  • The user’s name.
  • The user’s picture.
  • The number of questions the user asked.
  • The number of questions the user answered.
• Users are ordered in descending order based on the sum of the number of questions they’ve answered and the number of questions they’ve asked.

Navigation

• The app contains a Navigation Bar that is visible on all of the pages.
• The user can navigate between the New Question, the Leaderboard, and the Home pages without typing the address into the address bar.

Architecture

In terms of architecture, the project meets the following requirements:

1. Components read the necessary state from the store; they do not have their own versions of the same state.
2. There are no direct API calls in the components' lifecycle methods.
3. Most application state is managed by the Redux store (form inputs and controlled components have some state handled by the component).
4. Updates are triggered by dispatching action creators to reducers.
5. Components are modular and reusable.

Getting Started

To run Would You Rather in dev mode:

1. Clone this repo.
2. cd into project directory.There are no direct API calls in the components' lifecycle methods.
3. Install dependencies by running the following command:

npm install

4. Start the server by running the following command:

npm start

The http:localhost:3000 page will be automatically opened in your browser.

Author

Alexandra Baturina