ilyakozak / graphiql-app Goto Github PK

Demo version of the application should be deployed on gh-pages, netlify, heroku, or another similar service

In the upper right corner there are 2 buttons: Sign In and Sign Up. 2 point

Upon successful login, the user should be redirected to "Main/GraphiQL route" 3 point

• Nextjs Image: was preloaded using link preload but not used within a few seconds from the window's load event
• React default favicon - 5 points
• The presence of errors and warnings in the console - 2 points for each
• The presence in the console of the results of the console.log execution - 2 points for each
• @ts-ignore or any usage (search through github repo) - 1 point for each
• Making commits after the deadline - 20 points

Buttons for Sign In / Sign Up / Sign Out are everywhere where they should be 5 points

Client-side validation should be implemented. 10 points
(email and password strength - minimum 8 symbols, at least one letter, one digit, one special character)

Working editor allowing to edit the query. 15 points

Response section. 10 points

Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form. 1 point

After completing the task, create a pull request from develop to main branch. Merging a Pull Request is not required

• 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
• 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.

• Footer should contain a link to the author's github, the year the application was created, course logo with link to the course.
• Footer is displayed on all pages of the application.

Headers section. Should be closed/opened 5 points

The welcome page should contain general information about the developer, project, and course. 2 point

For the authentication you should use Firebase with email option. Please, check this article

Documentation explorer (should be lazy-loaded)
Working documentation explorer, should be visible only when sdl request will succeed. 15 points

Implement Error Boundary
https://nextjs.org/docs/advanced-features/error-handling
https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

If user already logged in and he try to reach this Sign In/Sign Up routes - he should be redirected to Main/GraphiQL route. 2 point

If login token is valid and unexpired, change buttons Sign In and Sign Up on "Go to Main Page" button. 2 points

Variables section. Should be closed/opened 5 points

Localization (at least 2 languages). You should be able to change the language by clicking on the toggler/select in header.

For the convenience of verification, it is necessary to record and post on YouTube a short (5-7 min) video for reviewers with an explanation of how each of the items listed in the evaluation criteria is implemented. Add a link to the video to the pull-request.

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).

When the token expires - the user should be redirected to the "Welcome page" automatically. 3 points
https://groups.google.com/g/firebase-talk/c/rjR0zYiiEhM?pli=1

Implement for docs lazy-loading
reactwg/react-18#37

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

Headers section. Should be closed/opened 5 points

• semantic layout
• 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), 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.

Variables section. Should be closed/opened 5 points

Next.js project initial setup

There is default 404 page from next.js

Sign Out button - signs user out