Défi is a would you rather game made with React/Redux that I built to practice front end programming and React/Redux as part of my udacity nanodegree.
It uses mock data to simulate a user/game server allowing users to be authenticated and keeping track of their answers, questions and score.
It demonstrates my understanding of React and its components,components life cycle, and states. As well as my understanding ot Redux and its action creators, actions, reducers, helpers and context providers as well as React Router and its routers, nested navigations, redirection, history and parameterized navigation.
React was used for the front end. Redux was used for state management. Router was used for navigational components
-
View and vote on existing questions.
-
Login/Authenticate as an existing user.
-
View all answered/unanswered questions.
-
Create new user with customizable avatars.
-
View previously answered questions and see your answers.
-
Error handling in case you navigate to a non-existing question.
-
Create a would you rather question for you and other users to vote on.
-
See the leaderboard and see how your score compares with other players.
User credentials for testing can be found inside src/utils/_DATA.js
+---public
| | favicon.ico
| | favicon.png
| | index.html
| | manifest.json
| | robots.txt
| |
| \---images
| | 404.gif
| | github.png
| | linkedin.png
| | logo.png
| | would-you.gif
| |
| +---avatars
| | 0.png
| | 1.png
| | 2.png
| | 3.png
| | 4.png
| | 5.png
| | 6.png
| |
| \---tabs
| answered.png
| home.png
| leaderboard.png
| question.png
| unanswered.png
|
\---src
| index.css
| index.js
|
+---actions
| authedUser.js
| questions.js
| shared.js
| users.js
|
+---components
| App.js
| AppNav.js
| Footer.js
| Leaderboard.js
| Login.js
| NewQuestion.js
| NotFound.js
| Player.js
| Poll.js
| PollNav.js
| Question.js
| QuestionsList.js
| QuestionsListItem.js.js
|
+---images
| +---avatars
| | 0.png
| | 1.png
| | 2.png
| | 3.png
| | 4.png
| | 5.png
| | 6.png
| |
| \---trophies
| bronze-trophy.png
| gold-trophy.png
| silver-trophy.png
|
+---middleware
| index.js
| logger.js
|
+---reducers
| authedUser.js
| index.js
| questions.js
| users.js
|
\---utils
api.js
_DATA.js
You can get the project up and running in 3 simple steps.
- Use the following command to install the required packages
npm install
- A. You can either run in development mode using
npm start
- B. Or run in production mode using
npm run build
Then
yarn global add serve
serve -s build
To run your build