GraphiQL

.eslintrc

@@ -0,0 +1,61 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "root": true,
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "comma-dangle": ["error", "only-multiline"],
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/ban-ts-comment": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-var-reqiures": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -1 +1,30 @@
-# graphiql-app
+# NPM version 8.19.2
+
+# Create T3 App
+
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+
+## What's next? How do I make an app with this?
+
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+
+## Learn More
+
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+
+## How do I deploy this?
+
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

description.md

@@ -0,0 +1,64 @@
+#  GraphiQL
+
+Our app is **GraphiQL** - a playground/IDE for graphQL requests. GraphiQL is a sandbox for compiling, editing and sending GraphQL requests to the server API and getting responses to them. Our application also allows user to specify variables and headers and add them to the request. The user can also retrieve the API schema using an introspective query. To perform validation, we always get the schema when the editor is loaded.
+
+We also added authorization/authentication capabilities to our app, to give access to the tool to only to authorized users.
+
+## Team
+We worked on our app in a team of 3 developers: Olga Khmaruk, Gleb Belegov and Alexander Mikhailov. Our work was carried out in the private github repository graphiql-app. The develop branch was the main working branch. Each team member created new branch from develop, worked in this branch and after that made a pull request to the develop branch. Other teammates checked and commented new pull request code. After proper corrections pull requests were merged to the develop branch.
+
+## API
+We used an open GraphQL Pokemon api in our app. GraphQL-Pokemon is a GraphQL API that provides extensive Pokémon data. Unlike contemporary APIs this API focusses on speed, accuracy and data quality. API provides fully generated client-side TypeScript typings, images, information about various assets in Pokemon: Pokedex, Items, AbilitiesMoves, Learnsets, Type matchups. API has a detailed documentation with instructions for installation and use. The documentation also contains a description of possible queries and variables to them.
+
+## Design
+Design of our application is minimalistic. The color scheme is close to black and white. The user has the ability to change the color theme using the switcher in the header. Dark and light themes are available.
+Layout is adaptive, the minimum page width of the application is less then 320px.
+Elements users can interact with are interactive through hover effects, cursor pointer style, usage of different styles for the active and inactive state of the element and smooth animations.
+The unity of styles of all pages of the application is provided by SHADCN component libruary - the same fonts, button styles, indents, the same elements on all pages of the application have the same appearance and layout.
+
+## Application structure
+Our site contains Welcome page, User auth, GraphiQL page with request editor, variables editor, headers editor, docummentation explorer and response section.
+App layout consists of header, footer and main component between them.
+All Private routes contains sticky header. It doesn't change it's positin during scrolling the page. We used blur effect to emphasize a moment the header becomes sticky. All the scrolled content becomes blurred under the header.
+Header contation language and theme switches and sign in/ sign up/ sign out buttons on their proper places.
+Footer contains a link to the authors' github pages, the year the application was created, course logo with link to the react course.
+Footer is displayed on all pages of the application.
+
+## Backend
+We used firebase for implementing authentication and authorizing with username and password.
+
+## Deploy
+The demo version of the application is deployed on Vercel and available on deploy link.
+
+## Localization
+localization at enflish and russian languages is implemented using inbuilt nextjs i18 plugun. Uesr is able to change the language by clicking on the switcher in header.
+
+## private routes
+There are private routes in our app...
+## 404
+We created cistom 404 page. 404 page is shoun if url is not exist or user entered unexsisting url pathname. 404 page's has a button letting user to try to go to the Welcomepage
+## error boundary
+Error Boundary surrounds all the App components. for exaple, if we try to throw an error in our code, error fallback components will apear on the page. User may click Error button to look through an error happened and to try to navigate to Welcome page.
+Errors from the api side - (Not found, unhandled rejection, etc) are displayed in a user-friendly format as a red button in the response section. Clicking this button user can read Error Message and Error description for being able to handle with error correcting.
+
+## Docamentation
+Documentation is lazy-loaded using Suspence. First, when page is loading the first time, we send an introspective query to our server API to get graphql schema. After schema has been got and saved to the redux store we parse it and create the documentation consisting on our schema types and enums by our own.
+Then we compile documentation of the description of our API and our newly created from schema components after it.
+We used accordion like components showing and hiding their content for user' better experience.
+
+## Libraries
+We used Next.js for building our app. It allows for server side rendering under the hood.
+
+### Sign In
+If user is not authorized, the welcome page contains a link to Sign In / Sign Up page. Buttons for Sign In / Sign Up are placed in the right side of the app header.
+Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form.
+If user is authorized, the page should contains a link to the Main editor page and sign out button. Button sign out signs user out.
+Client-side validation should be implemented using hook form built-in validation features and user's custom validation functions. We verify if the password consists of proper symbols(email and password strength - minimum 8 symbols, at least one letter, one digit, one special character), if the password is correct, if the user with entered email already exists in the database and other email and password validation.
+Upon successful login, the user is redirected to the Main page. Also if the user is already logged in and tries to reach these routes, he is redirected to the Main editor page.
+For the authentication you should use Firebase with email option ans Firestore.
+
+### Welcome route - max 10 points
+The welcome page contains general information about the developers, project, and course. In the upper right corner there are 2 buttons: Sign In and Sign Up. If login token is valid and unexpired, change the Sign In and Sign Up buttons to the "Go to Main Page" button. When the token expires - the user is redirected to the "Welcome page" automatically.
+
+### GraphiQL route - max 50 points
+Working editor allowing to edit the query. Working documentation explorer is visible only when sdl request will succeed. Variables sectioncan be closed/opened. Headers section also may be closed/opened. Response section.

next-i18next.config.js

@@ -0,0 +1,9 @@
+const path = require("path");
+module.exports = {
+  i18n: {
+    locales: ["en", "ru"],
+    defaultLocale: "en",
+    localeDetection: false,
+    localePath: path.resolve("./public/locales"),
+  },
+};

next.config.mjs

@@ -0,0 +1,68 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import("./src/env.mjs");
+//import withImages from 'next-images';
+import withTM from "next-transpile-modules";
+import { createRequire } from "node:module";
+
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
+const withTMnew = withTM(["monaco-editor"]);
+
+const require = createRequire(import.meta.url);
+const { i18n } = require("./next-i18next.config");
+
+/** @type {import("next").NextConfig} */
+const config = {
+  webpack: (config, options) => {
+    config.output.publicPath = "/_next/";
+    // because next.js doesn't like node_modules that import css files
+    // this solves the issue for monaco-editor, which relies on importing css files
+    //patchWebpackConfig(config, options);
+    config.resolve.alias = {
+      ...config.resolve.alias,
+
+      // this solves a bug with more recent `monaco-editor` versions in next.js,
+      // where vscode contains a version of `marked` with modules pre-transpiled, which seems to break the build.
+      //
+      // (the error mentions that exports.Lexer is a const that can't be re-declared)
+      "../common/marked/marked.js": "marked",
+    };
+    config.resolve.fallback = { fs: false };
+
+    if (!options.isServer) {
+      config.plugins.push(
+        // if you find yourself needing to override
+        // MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker,
+        // you probably just need to tweak configuration here.
+        new MonacoWebpackPlugin({
+          // you can add other languages here as needed
+          languages: ["json", "graphql"],
+          filename: "static/[name].worker.js",
+          // this is not in the plugin readme, but saves us having to override
+          // MonacoEnvironment.getWorkerUrl or similar.
+          customLanguages: [
+            {
+              label: "graphql",
+              worker: {
+                id: "graphql",
+                entry: require.resolve("monaco-graphql/esm/graphql.worker.js"),
+              },
+            },
+          ],
+        })
+      );
+    }
+    // load monaco-editor provided ttf fonts
+    config.module.rules.push({ test: /\.ttf$/, type: "asset/resource" });
+    return config;
+  },
+  devIndicators: {
+    buildActivity: false,
+  },
+  reactStrictMode: true,
+  i18n,
+};
+
+export default withTMnew(config);