REST/GraphiQL Client

[Ivan-rom]

1. Task: link
2. Screenshot:

3. Deploy: graphiql-app-roan.vercel.app
4. Done 15.09.2024 / deadline 16.09.2024
5. Video: https://youtu.be/XD6l7SrB0yI
6. Score:

400/400

Test coverage below 80% (we have 72%) (-100/-100)

Main route - max 50 points

• The Main page should contain general information about the developers, project, and course. - (10/10)
• In the upper right corner there are 2 buttons: Sign In and Sign Up. - (10/10)
• If the login token is valid and unexpired, the Sign In and Sign Up buttons are replaced with the "Main Page" button. - (10/10)
• When the token expires - the user should be redirected to the Main page automatically. - (10/10)
• Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form. - (10/10)

Sign In / Sign Up - max 50 points

• Buttons for Sign In / Sign Up / Sign Out are everywhere where they should be. - (10/10)
• Client-side validation is implemented. - (20/20)
• Upon successful login, the user is redirected to the Main page. - (10/10)
• If the user is already logged in and tries to reach these routes, they should be redirected to the Main page. - (10/10)

RESTfull client - max 120 points

• Functional editor enabling query editing and prettifying, request body provided in the url as base64-encoded on focus out. - (35/35)
• Functional read-only response section, with information about HTTP status and the code. - (30/30)
• Method selector, shows all the valid HTTP verbs, value is provided in the url on change. - (10/10)
• Input for the url, entered value is provided in base64-encoded way on change. - (15/15)
• Variables section that can shown or hidden, specified variables are included in the body. - (15/15)
• Headers section, value is provided in the url on header add/change. - (15/15)

GraphiQL route - max 80 points

• Functional editor enabling query editing and prettifying, request body provided in the url as base64-encoded on focus out. - (35/35)
• Read-only response section, with information about HTTP status and the code, reused from the RESTfull client. - (5/5)
• Operational documentation explorer, visible only upon successful SDL request. - (20/20)
• Variables section that can shown or hidden, specified variables are included in the body. - (10/10)
• Header section that can be shown or hidden, value is provided in the url on header add/change. - (10/10)

History route - max 50 points

• History shows informational message with links to the clients when there are no requests in the local storage. - (10/10)
• User can navigate to the previoulsy executed HTTP request to the RESTfull client, HTTP method, url, body, headers are restored. (20/20)
• User can navigate to the previoulsy executed GraphQL request to the GraphiQL client, url, SDL url, body, headers are restored. (20/20)

General requirements - max 50 points

• Multiple (at lest 2) languages support / i18n. - (30/30)
• Sticky header. - (10/10)
• Errors are displayed in the user friendly format. - (10/10)

Penalties

• Vite/NextJS default favicon (-0/-50)
• HTTP 4xx and 5xx status codes displayed as errors not in the response section (-0/-50)
• The presence of errors and warnings in the console (-0/-20) for each
• The presence in the console of the results of the console.log execution (-0/-20) for each
• @ts-ignore or any usage (search through GitHub repo) (-0/-20) for each
• The presence of code-smells (God-object, chunks of duplicate code), commented code sections -10 points per each
• Making commits after the deadline (-0/-100)
• Absence of tests (-0/-250)
• Test coverage below 80% (we have 72%) (-100/-100)
• Absence of linting (-0/-150)
• Absence of prettier (-0/-100)
• Absence of husky git hooks (-0/-100)
• Pull Request doesn't follow guideline (including checkboxes in Score) PR example (10/10)
• The administration reserves the right to apply penalties for the use of incorrect repository or branch names