strazdinsg / rebus Goto Github PK

As an administrator user I want to see a score select-box (dropdown) for each answer in the scoring page.

As a user, I want to be able to navigate through all the sections of the page (without authentication).

As a developer I want to see that the backend is using a domain name.

As a developer I want to see that the admin user is auto-generated, if the database does not contain any admin user.
The pin code must be randomly generated (a 6-integer-digit string).
The pin code must be printed in the console.

As a developer I want to see the backend deployed on a publicly available server, with CORS problem solved.

As a developer I want to see a minimalistic React JS project for the frontend in the folder frontend, with a README.

As a developer I want to see that the backend is secured with HTTPS.

As a regular user I want to be able to submit an answer to the quiz:

• ✔️ When I open the answer page, I want to see my previously uploaded
  • ✔️ answer
  • ✔️ image
• ✔️ When I enter new text in the answer, it is stored in a temporary state variable
• ✔️When I select a new image:
  • ✔️A resized version of the image is created: max 1800x1800 pixels
  • ✔️The resized image is stored in a temporary state variable
  • ✔️The resized image is displayed to the user
• ✔️ If I start selecting an image and then cancel it:
  • ✔️ If I have submitted an image before, the previously selected image is shown in the preview
  • ✔️ If I have not submitted an image before, nothing is displayed (no error)
• ✔️ When I press on the "Send" button:
  • ✔️ The submitted answer is sent to the backend
  • ✔️The attached image is sent to the backend, if selected
  • ✔️When text is saved, toast is shown: "Answer saved"
  • ✔️When image is uploaded successfully, toast is shown: "Image saved"

As a developer I want to see a sketch of the whole database structure (on paper?), the entity classes implemented on the backend, and tables auto-generated.

As a user I want to be able to log in as Team 1 with pin 111111, Team 2 with pin 222222, or as an admin with pin 667667.

As a user I want to be able to log in with my PIN.
As a developer I want to see:

• An HTTP POST /authenticate sent when the user signs in with the PIN
• A valid JWT token returned when a valid PIN is sent in the authentication
• The JWT token stored in a cookie and included in all consecutive API requests

As a developer I want to have an API for storing images on the backend:

• ✔️POST /pictures/{challengeId}/{userId} - add an image to an answer for a specific challenge
• ✔️DELETE /pictures/{challengeId}/{userId} - delete an image
• ✔️GET /pictures/{challengeId}/{userId} - return the image data (usable for src=".." to an img element).

For all the endpoints:

• They are accessible only with a JWT, authorized user
• The team (userId) is extracted from the provided JWT token
• userId in the JWT and URL must match (or the user must be admin)

As a user I want to see styled Answer-page when I click on a challenge button.
I can see the right challenge number and text on the page.

As a user I want to be taken to user page when I type in a correct user-pin, and to an admin page when I type in a correct admin-pin.

As an administrator I want to see that my score is saved when I select a score in a select-box on the scoring page.
I also want to see that the next time the score is loaded from the backend and displayed properly on the page.

As a user I want to see a list of challenges when I log in:

• Styled components
• With static challenge data
• Challenges where an answer has been submitted are marked with a different colour and checkmark

As an administrator I want to see total score for each team displayed in a summary column on the scoring page.

As a developer I want to see authentication and authorization in place on the backend.
/authenticate takes a json object {pin: number} and returns a JWT token, with role user for the regular user and user+admin roles for the admin.

As a developer I want to see all the necessary REST API endpoints on the backend:
✔️Public endpoints:

• ✔️ GET /challenges

✔️User endpoints (teamId is received from the JWT):

• ✔️ GET /answers/my - get all answers for the current user, for all challenges
• ✔️ POST /answers/{challengeId}/{userId}
  (image endpoints are a separate issue)

✔️Admin endpoints:

• ✔️GET /teams
• ✔️ GET /answers - all answers, of all teams
• ✔️POST /score/{challengeId}/{userId}

As a user I want to see the Login page styled as necessary.
As a developer I want to see the LoginPage implemented using Material UI components.

As ad administrator user I want to see the scoring page after I have logged in with my PIN.
I want to see a table where the rows are the different teams and the columns are the challenges.
In each cell I want to see the answer submitted by the corresponding team.

As a frontend developer I want to see a generic API (function) for sending HTTP GET and POST requests, with data, parsing the response as JSON, specifying a callback function on success and a callback function on error.

As a user or admin I want to be able to log out by clicking on an exit icon in the app bar (or by accessing /logout link)

As a user I want to get redirected to the login page when my JWT has expired.
As an administrator I want to see that all the cookies are deleted if the JWT is expired.

As an administrator user I want to be able to see the images submitted as answers to the challenges in the admin scoring page.

As an administrator, I want to see images loaded in an effective way on my dashboard:

• Loaded every time, not needing to refresh several times
• Loaded one after another
• No requests to non-existing images

Implementation steps:

• Whenever a user uploads an image, a random 64-character imageId is generated for that image. This should be extremely hard to simply guess
• One API endpoint serves images: /images/{imageId} - a "secret image URL"
• Before displaying image elements on the admin dashboard, the app sends a request to the server to find out which answers have attached images and what their IDs are. Endpoint URL: /images/get-ids
• Then the app creates image elements for each team, one by one, with the "secret URLs".
• x millisecond delay (500ms?) between image element creation of each team.

As a user I want to see a preview of the image I'm going to upload as an answer to a challenge.

As a developer I want to see Challenges and answers stored in Redux store instead of Context.

As a developer I want to see the main structure for the React UI - the main components, with some static data (not all the style).

As a user I want to see the image I have previously uploaded shown on the AnswerPage.

If I have no image uploaded, I don't want to see any error icon, just no image at all.