Giter VIP home page Giter VIP logo

reactnd-would-you-rather's Introduction

Would You Rather React App

Project Overview

The project is build as a web application that lets a user 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.

App Functionality

Using the app, users will be able to

  • answer questions,
  • see which questions they haven’t answered,
  • see how other people have voted,
  • post questions, and
  • see the ranking of users on the leaderboard

Create React App

This project was bootstrapped with Create React App.

Project dependencies

react-scripts from npm registry is used to build and run the app. Please refer dependencies and scripts section in package.json for more details.

In the project directory, you can run the below scripts:

  • install all project dependencies with npm install
  • start the development server with npm start
  • the app can be accessed in the browser using http://localhost:3000/

Additional information:

  • project can be build with npm run build

Technologies used

  • React UI Library is used to design the presentational and controlled UI components
  • React-Bootstrap UI Foundation library
  • Redux is used to improve the predictability of the application’s state; establish strict rules for getting, listening, and updating the store; and identify what state should live inside of Redux and what state should live inside of React components. For this application, most of the application’s state is managed by Redux. However, component state has been used to handle form input fields and controlled components. Otherwise, the rest of the state for the application is controlled by the reducers.
  • Dispatch of async actions to reducers is managed via Redux Thunk middleware. Also logger middleware is used for debugging purpose.
  • React Router is used for managing application routes

Application Routes

  • Home Page: /
  • New Question: /add
  • LeaderBoard: /leaderboard
  • Specific Poll Question: questions/:question_id

Backend Server

The App leverages the _DATA.js which serves as a backend server and provies the following methods to perform necessary operations on the backend:

  • _getUsers
  • _getQuestions
  • _saveQuestion
  • _saveQuestionAnswer

Limitation: The app uses a dummy backend database server so the application state will not persist after refresh

Application UI design

  1. SignIn page App SignIn Page
  2. Home page App Home Page
  3. New Question page App New Question Page
  4. Vote Submit page App Vote Submit Page
  5. Poll Result page App Poll Result Page
  6. LeaderBoard page App LeaderBoard Page Note: The screenshots are referenced from Udacity materials

reactnd-would-you-rather's People

Contributors

cynthia3r avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.