[react] Final task - improve language & grammar. User-specified endpoint

react/modules/graphiql.md

@@ -1,12 +1,15 @@
 # GraphiQL
 
 **GraphiQL** is a playground/IDE for graphQL requests.
-PLEASE, READ TASK DESCRIPTION CAREFULLY UP TO THE END BEFORE STARTING THE TASK
+PLEASE, READ THE TASK DESCRIPTION CAREFULLY UP TO THE END BEFORE STARTING THE TASK
 
 ## Theoretical Notes
 
-GraphiQL is an open-source tool which you can use as an example (https://www.npmjs.com/package/@graphiql/react).
-However, your app will also include authorization/authentication capabilities, to give access to the tool to only to authorized users.
+GraphiQL is an open-source tool that you can use as an example (https://www.npmjs.com/package/@graphiql/react).
+However, your app will also include:
+
+- Authorization and authentication capabilities, ensuring access to the tool is restricted to authorized users.
+- Work with a user-specified open GraphQL endpoint.
 
 ## Building a team
 
@@ -15,14 +18,14 @@ However, your app will also include authorization/authentication capabilities, t
 
 ## Application Prototype
 
-You can use [existing solutions](https://graphql.github.io/swapi-graphql) as a source for inspiration.
+You can use [existing solutions](https://graphql.github.io/swapi-graphql) as a source of inspiration.
 However, pay attention that we leave the final set of tools and design up to you to not limit your possibilities and imagination.
-Design, prototype, as well as the implementation of the application are up to you.
+Design, prototype, as well as implementation of the application, are up to you.
 
-## Backend
+## Backend / API
 
-Application doesn't require a backend.
-You can use any open GraphQL api which supports [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), or you can create a proxy service as part of your app and use it to make requests to any GraphQL api (even those which do not support CORS)
+- Application doesn't require a backend.
+- Application should support any open, user-specified GraphQL API that supports [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). You can create a proxy service as part of your app and use it to make requests to any GraphQL API (even those that do not support CORS).
 
 ## Application structure
 
@@ -31,21 +34,22 @@ Your app must contain:
 1. Welcome page
 2. User auth
 3. GraphiQL page with:
-   - request editor (query editor / json viewer)
+   - request editor (query editor / JSON viewer)
    - variables editor
    - headers editor
    - documentation explorer (should be lazy-loaded)
-   - response section (query editor / json viewer)
+   - response section (query editor / JSON viewer)
+   - possibility to change to a different user-specified API endpoint
 
 ## Repository requirements
 
-- teamlead should create private repo in github and invite other members
+- teamlead should create private repo in GitHub and invite other members
 - repo name **graphiql-app**. Branch name for develop - **develop**, **main** branch is empty and contains only README.md
-- the commit history should display application development process. [Commit requirements](https://docs.rs.school/#/git-convention)
+- the commit history should display the application development process. [Commit requirements](https://docs.rs.school/#/git-convention)
 - the demo version of the application should be deployed on `gh-pages`, `netlify`, `heroku`, or another similar service
 - after completing the task, create a pull request from **develop** to **main** branch. **Merging a Pull Request is not required**
 - in case you will use proxy-service you need to include instructions on how to run it locally
-- you should make your repo public after deadline
+- you should make your repo public after the deadline
 
 ## Workflow/Branching strategy
 
@@ -66,69 +70,74 @@ You are free to choose your own way of developing the project and the repository
 - you must use React 18 + **suspense** feature
 - you can use Vite (or any React framework you want, e.g. Gatsby, NextJS, Remix), css frameworks, any js/components libs you want, html and css pre-processors
 - you MUST use Typescript
-- tests should be present on the project (**test** command in the package.json ), test coverage should be reported when running the command, test coverage should be at least 80%
+- tests should be present on the project (**test** command in the package.json ), and test coverage should be reported when running the command. Test coverage should be at least 80%
 - Eslint, prettier (**lint** and **prettier-fix** commands in the package.json)
 - Husky hooks (run **lint** on pre-commit, **test** on pre-push)
-- ❗ it is forbidden to copy the code of other students or [GraphiQL](https://www.npmjs.com/package/@graphiql/react). This ban applies to html, css, and js code. You can use small code snippets from Stack Overflow, and other self-found sources on the Internet, except github repositories of course students.
+- ❗ it is forbidden to copy the code of other students or [GraphiQL](https://www.npmjs.com/package/@graphiql/react). This ban applies to html, css, and js code. You can use small code snippets from Stack Overflow, and other self-found sources on the Internet, except GitHub repositories of course students.
 
 ## Application design requirements
 
 - the application quality is characterized by the elaboration of details, attention to typography (no more than three fonts per page, font size of at least 14 px, optimal [font and background contrast](https://snook.ca/technical/colour_contrast/colour.html)), carefully selected content
 - adaptive layout, the minimum page width of the application should be 320px
 - interactivity of elements users can interact with; element hover effects; usage of different styles for the active and inactive state of the element; smooth animations
-- the unity of styles of all pages of the application - the same fonts, button styles, indents, the same elements on all pages of the application have the same appearance and layout. Item colors and background images may vary. In this case, colors should be from the same palette, and background images from the same collection.
+- the unity of styles of all pages of the application - the same fonts, button styles, indents, and the same elements on all pages of the application have the same appearance and layout. Item colors and background images may vary. In this case, colors should be from the same palette, and background images from the same collection.
 
 ## Description of function blocks
 
 ### General requirements
 
-- Errors from the api side (Not found, unhandled rejection, etc) should be displayed in a user-friendly format (toast, pop-up, or something like this - up to your decision).
-- Localization (at least 2 languages). You should be able to change the language by clicking on the toggler/select in header. Localization should be implemented using Context API. No 3rd party / open source solutions are allowed.
+- Errors from the API side (Not found, unhandled rejection, etc) should be displayed in a user-friendly format (toast, pop-up, or something like that - up to your decision).
+- Localization (at least 2 languages). You should be able to change the language by clicking on the toggler/select in the header. Localization should be implemented using Context API. No 3rd party / open-source solutions are allowed.
 
 ### Welcome page
 
-- If user is not authorized, the page should contain a link to Sign In / Sign Up page
-- If user is authorized, the page should contain a link to the Main page
+- If the user is not authorized, the page should contain a link to Sign In / Sign Up page.
+- If the user is authorized, the page should contain a link to the Main page.
 
 ### Header
 
-- All Private routes should contain sticky header. Moment when it become sticky (if there is a scroll on a page) should be animated: color can be changed or it's height can become smaller. [Animated sticky header](https://www.youtube.com/watch?v=hR8UW5CvYgw)
+- The header should be sticky. The moment it becomes sticky (if there is a scroll on a page) should be animated: color can be changed or its height can become smaller. [Animated sticky header](https://www.youtube.com/watch?v=hR8UW5CvYgw)
+- Link to Welcome page
+- Control that allows user to switch the language
 - Sign Out button - signs user out
 
 ### Footer
 
-- Footer should contain a link to the authors' github, the year the application was created, [course logo](https://rs.school/images/rs_school_js.svg) with [link to the course](https://rs.school/react/).
+- Footer should contain a link to the authors' GitHub, the year the application was created, [course logo](https://rs.school/images/rs_school_js.svg) with [link to the course](https://rs.school/react/).
 - Footer is displayed on all pages of the application.
 
 ### Sign In / Sign Up
 
-- For the authentication you should use Firebase with email option. Please, check this [article](https://blog.logrocket.com/user-authentication-firebase-react-apps/)
-- Client-side validation should be implemented (email and password strength - minimum 8 symbols, at least one letter, one digit, one special character)
+- For the authentication you should use Firebase with the email/password sign-in method. Please, check this [article](https://blog.logrocket.com/user-authentication-firebase-react-apps/)
+- Client-side validation should be implemented (email and password strength - minimum 8 symbols, at least one letter, one digit, one special character, Unicode passwords must be supported)
 - Upon successful login, the user should be redirected to the Main page
 - If the user is already logged in and tries to reach these routes, they should be redirected to the Main page
 
 ### Main page - GraphiQL
 
-- Query editor / Json viewer. Query editor should support prettifying. Any 3rd party / open source solution is forbidden, you should implement it on your own. Json viewer should be read only, it will be used in the response section.
-- Variables section
-- Headers section (optional. If you are making a CORS request each added header should be supported on the backend, please, consider that)
-- Documentation section, should be visible only when app will receive a successfull response with the schema definition from the api
-- Response section. Should be represented by the same Query editor / Json viewer component. Should be read only.
+- This route should be private.
+- Header should be visible.
+- Query editor / JSON viewer. The query editor should support prettifying. Any 3rd party / open-source solution is forbidden, you should implement it on your own. JSON viewer should be read-only, it will be used in the response section.
+- Variables editor section.
+- Headers editor section (If you are making a CORS request each added header should be supported on the backend, please, consider that).
+- Documentation section, should be visible only when the app receives a successful response with the schema definition from the API.
+- Response section. Should be represented by the same Query editor / JSON viewer component. Should be read only.
+- Change Endpoint button - allows the user to switch to an arbitrary GraphQL endpoint.
 
 ## How to submit tasks
 
 - Link to pull request in rs app is submitted only by **team leader** ❗
-- Make sure the pull request is available for review ❗. To do this, open the link that you submit in rs app in incognito browser mode
+- Make sure the pull request is available for review ❗. To do this, open the link that you submit in rs app in incognito browser mode.
 - If the task is not submitted before the deadline, it will not be distributed during the cross-check and points will not be added to your score.
 
 ## Evaluation criteria
 
-**Maximum available points for the task 400**
+**Maximum available points for the task are 400**
 
 It contains:
 
 - maximum 350 for crosscheck
-- maximum 50 for your involvement into a project. Those points will be assigned by the mentor for each student.
+- maximum 50 for your involvement in a project. Those points will be assigned by the mentor for each student.
 
 ## Cross-check criteria
 
@@ -137,39 +146,40 @@ For the convenience of verification, it is **necessary** to record and post on Y
 
 ### Welcome route - max 50 points
 
-- [ ] The welcome page should contain general information about the developers, project, and course **10 point**
-- [ ] In the upper right corner there are 2 buttons: Sign In and Sign Up **10 point**
-- [ ] If login token is valid and unexpired, change the Sign In and Sign Up buttons to the "Go to Main Page" button **10 points**
+- [ ] The welcome page should contain general information about the developers, project, and course **10 points**
+- [ ] In the upper right corner there are 2 buttons: Sign In and Sign Up **10 points**
+- [ ] If the login token is valid and unexpired, the Sign In and Sign Up buttons are replaced with the "Main Page" button **10 points**
 - [ ] When the token expires - the user should be redirected to the "Welcome page" automatically **10 points**
-- [ ] Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form **10 point**
+- [ ] Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form **10 points**
 
 ### Sign In / Sign Up - max 50 points
 
 - [ ] Buttons for Sign In / Sign Up / Sign Out are everywhere where they should be **10 points**
-- [ ] Client-side validation should be implemented **20 points**
-- [ ] Upon successful login, the user should be redirected to the Main page **10 point**
-- [ ] If the user is already logged in and tries to reach these routes, they should be redirected to the Main page **10 point**
+- [ ] Client-side validation is implemented **20 points**
+- [ ] Upon successful login, the user is redirected to the Main page **10 points**
+- [ ] If the user is already logged in and tries to reach these routes, they should be redirected to the Main page **10 points**
 
 ### GraphiQL route - max 200 points
 
-- [ ] Working editor allowing to edit and prettify the query **60 points**
-- [ ] Working documentation explorer, should be visible only when sdl request will succeed **50 points**
-- [ ] Variables section; could be showed/closed **30 points**
-- [ ] Header section; could be showed/closed **20 points**
-- [ ] Response section; editor in read only json viewer mode **40 points**
+- [ ] Functional editor enabling query editing and prettifying **60 points**
+- [ ] Operational documentation explorer, visible _only_ upon successful SDL request **50 points**
+- [ ] Variables section that can shown or hidden, specified variables are sent to the server **30 points**
+- [ ] Header section that can be shown or hidden, user-added headers are sent to the server **20 points**
+- [ ] Response section with an editor in read-only as a JSON viewer **40 points**
 
 ### General requirements - max 50 points
 
-- [ ] Localization **30 point**
+- [ ] Localization **30 points**
 - [ ] Sticky header **10 points**
-- [ ] Errors from api side are displayed in the user friendly format **10 points**
+- [ ] Errors from API side are displayed in the user friendly format **10 points**
 
 ### Penalties
 
 - [ ] React default favicon **-50 points**
 - [ ] The presence of errors and warnings in the console **-20 points** for each
 - [ ] The presence in the console of the results of the console.log execution **-20 points** for each
-- [ ] @ts-ignore or any usage (search through github repo) **-20 point** for each
+- [ ] @ts-ignore or any usage (search through GitHub repo) **-20 points** 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 **-100 points**
 - [ ] Absence of tests **-250 points**
 - [ ] Test coverage below 80% **-100 points**