GraphiQL-application

Welcome to the GraphQL sandbox, providing a versatile playground for various APIs! It simplifies the workflow for constructing GraphQL queries. The GraphiQL application offers several features to enhance clarity and streamline development, including:

1. Syntax Highlighting
2. Data Display upon Request
3. Error Notifications for Specific Requests
4. Configuration of Variables/HTTP Headers
5. Interactive Documentation for Specified Resources
6. Query Prettifying

Our stack:

• 
• 
• 
• 
• 
• 
• 
• Yup
• MonacoEditor
• Vitest

Requirements:

• Installed Node.js 18.x or higher.

Formatting and code quality

To enforce consistent coding styles and to identify potential code issues we use:

• Eslint
• Prettier
• Husky

How to Install and Run the Project

• Clone this repo: $ git clone https://github.com/zweroboy1/graphiql-app.git
• Go to the downloaded folder: $ cd graphiql-app
• Install dependencies: $ npm install
• Create a .env file in the root directory with the following structure:

VITE_API_KEY=
VITE_AUTH_DOMAIN=
VITE_PROJECT_ID=
VITE_STORAGE_BUCKET=
VITE_MESSAGING_SENDER_ID=
VITE_APP_ID=
VITE_MEASUREMENT_ID=

• Start the server: $ npm run dev
• Open http://localhost:5173/ in your browser

Scripts:

• dev - runs a local development server with hot refresh on any changes.
• build - compiling source files into a finished bundle in the ./dist folder.
• preview - launches the built application on a local server.
• lint - runs ESLint to check code for issues.
• lint:fix - runs ESLint to check code and fix autofixable issues.
• format:fix - runs Prettier to format code.
• test - runs prepared unit tests.
• test-coverage - runs prepared unit tests with displaying coverage.
• prepare - automatically enables Git hooks.
• commit - enables formatted commits following commitizen conventions.

Our team:

1. zweroboy1 - team lead;
2. alenzija - frontend developer;
3. ritter1111 - frontend developer;
4. ZennKa - mentor of the team.