Exam #2: "SolveMyRiddle"

Project for WebApp Exam at Politecnico di Torino, a.y. 2021-2022

Student: s294828 CALO' LUCA

React Client Application Routes

• Route /: Home page, only purpose to welcome user
• Route /myriddles: List of riddles added by current logged in user (this route is available only if you are logged). Allows to look at your riddles and their answers and to add new riddles. Calls components "RiddleTable", "ModalBody"
• Route /opened-riddles: List of riddles with 'opened' status. If you are logged, allows for each riddle to open the page where to insert answer. Calls components "RiddleTable", "ModalBody"
• Route /closed-riddles: List of riddles with 'closed' status. If you are logged, allows for each riddle to see previously given answers and who answered correctly. Calls components "RiddleTable", "ModalBody"
• Route /ranking: List of top 3 users by their score. Calls component "UserTable"
• Route /add: Form to insert new riddle. Calls component "AddRiddleForm"
• Route /answer: Form to insert new answer. Calls component "AddAnswerForm"
• Route /login: Form to authenticate. Calls component "AuthComponents"
• Route /*: Default route, shows an error message

API Server

• GET /api/riddles
  • request parameters: nothing
  • response body content: list of the riddles into the database
• GET /api/myriddles/:id
  • request parameters: id of the user
  • response body content: list of the riddles of the specified user
• GET /api/opened-riddles
  • request parameters: nothing
  • response body content: list of the riddles with the status on "opened"
• GET /api/closed-riddles
  • request parameters: nothing
  • response body content: list of the riddles with the status on "closed"
• GET /api/answers/:id
  • request parameters: id of the riddle
  • response body content: list of the answers for the specified riddle
• GET /api/answers/:id/winner
  • request parameters: id of the riddle
  • response body content: list of the users that answered correctly to the specified riddle (is only one)
• GET /api/answers/:iduser/:idriddle
  • request parameters: id of the user, id of the riddle
  • response body content: list of the given answers to the specified riddle, from the specified user (at most one)
• POST /api/riddles
  • request parameters: nothing
  • request body content: json with all the fields describing the riddle to insert
  • response body content: nothing
• POST /api/answers
  • request parameters: nothing
  • request body content: json with all the fields describing the answer to insert
  • response body content: nothing
• PUT /api/close-riddles
  • request parameters: nothing
  • request body content: json with all the fields describing the riddle to close
  • response body content: nothing
• PUT /api/start-riddles
  • request parameters: nothing
  • request body content: json with all the fields describing the riddle to start
  • response body content: nothing
• GET /api/ranking
  • request parameters: nothing
  • response body content: list of the top 3 users by their score, into the database
• PUT /api/update-scores/:score
  • request parameters: score to assign to the user
  • request body content: json with all the fields describing the user to which to assign score specified
  • response body content: nothing
• POST /api/sessions
  • request parameters: nothing
  • request body content: json with all the fields describing the user that wants to login
  • response body content: nothing
• GET /api/sessions/current
  • request parameters: nothing
  • response body content: json with all the fields describing the user logged
• DELETE /api/sessions/current (closes current session logging out the user)
  • request parameters: nothing
  • response body content: nothing

Database Tables

• Table USERS - contains: id, email, hash, salt, name, surname, score
• Table RIDDLES - contains: id, question, level, duration, answer, hint1, hint2, status, startTime, idUser
• Table ANSWERS - contains: id, idUser, idRiddle, answer, correct

Main React Components

• AddAnswerForm (in AddAnswerForm.js): Is invoked to show the form to insert a new answer for the selected riddle. That is true only if the user has not already answered, if the riddle is opened and if the user is not the author. There is also the countdown to know when the riddle will be closed, and here is where the hints are shown. It receives as parameters the state storing the actual riddle ("actualRiddle"), the logged user ("authUser"), his score ("actualScore"), the method to modify this score ("loadScore"), the method that allows to insert the answer ("addAnswer"), the method to close a riddle ("closeRiddle"), the method to insert a "startTime" into a riddle ("startRiddle") and the method to update the score of a User ("updateUserScore").
• AddRiddleForm (in AddRiddleForm.js):Is invoked to show the form to create a new riddle. It receives as parameters the logged user ("authUser") and the method that allows to insert the riddle ("addRiddle")
• LoginForm, LogoutButton(in AuthComponents.js): First one is invoked to show the form for authentication. The login method ("login") and the logout method ("logout") are passed as parameters. In the event of an error, the component does not continue and allows new login attempts. Otherwise it sends the logged user back to the Home Page. Second one is the button to logout.
• ModalBody (in ModalBody.js): Contains the answers (potentially also the winner of the riddle, or the countdown if you are in "MyRiddles" looking at open riddles) to show into the body of the Modal inside the "RiddleTable" component. It receives as parameters the method to close the Modal ("close") the state storing the actual riddle ("actualRiddle"), the method to select a specific riddle ("setActualRiddle"), the author of the riddle ("author"), its status ("status"), the logged user ("authUser") and the riddle itself ("riddle").
• NavBar (in NavBar.js): Shows the navbar used to navigate all over the website. It receives as parameters the login status ("loggedIn"), the logged user ("authUser") and the logout method ("logout"). Inside the navbar there are always at least "Opened" button, "Closed" button and "Ranking" button. Furthermore there is a link called "SolveMyRiddle", that redirects to Home Page. Based on the login status, it shows "MyRiddles" button and "LogoutButton" component if a user is logged and "Login" button if is not.
• RiddleTable (in RiddleTable.js): Exploits as parameters the method to select a specific riddle ("setActualRiddle"), the login status ("loggedIn"), the logged user ("authUser"), the state that tells if it is possible to add new riddles ("adding"), and the array with the riddles to display ("riddles"). The latter will change according to the route calling the component ("openedRiddles", "closedRiddles" or "myRiddles").
• WelcomeRoute, MyRiddlesRoute, OpenedRiddlesRoute, ClosedRiddlesRoute, RankingRoute, AddRiddleRoute, AddAnswerRoute, DefaultRoute, LoginRoute (in Routes.js): All the routes used into the website.
• UserTable (in UserTable.js): Displays the table including only the top 3 users, by their score. It exploits as parameter the array with these users ("users").

Screenshot

Users Credentials

• username: fulviocorno@mail.com, password: password (name: Fulvio, surname: Corno)
• username: elvistheking@mail.com, password: password (name: Elvis, surname: Presley)
• username: billyjoel@mail.com, password: password (name: Billy, surname: Joel)
• username: marcorossi@mail.com, password: password (name: Marco, surname: Rossi)
• username: mariobianchi@mail.com, password: password (name: Mario, surname: Bianchi)