diff --git a/README.md b/README.md index 0d6babe..8ecfc77 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,177 @@ -# React + TypeScript + Vite +# โš›๏ธ GraphiQL App -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +๐Ÿฆฅ RS-School React Final Task. -Currently, two official plugins are available: +***GraphiQL:** Your interactive GraphQL IDE, empowering website development with syntax highlighting, autocompletion, and dynamic documentation ๐Ÿคฉ.* -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +# Getting Started ๐Ÿš€ +To run our project locally, you would have to download zip file with our repository or clone it to your computer. โœจ -## Expanding the ESLint configuration +## Setup and Running โš ๏ธ -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +What things do you need to do in order to run our project locally? ๐Ÿค” -- Configure the top-level `parserOptions` property like this: +* Use node 18.x or higher. โšก +* Installed [.git](https://git-scm.com/) on your computer. โœŒ๏ธ +* Code Editor of your choice. ๐Ÿ“ +* Installed [npm](https://www.npmjs.com/). ๐Ÿ“ฆ -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -} +## Installation And Preparation ๐Ÿ”ฎ + +First make sure you have all the things listed in the previous section. Then clone our repository to your computer: ๐Ÿ‘Œ + +``` +git clone https://github.com/Quiddlee/graphiql-app.git +``` + +or download zip file manually with our repository. + +Navigate into project folder and run ๐Ÿ“ฆ: + +``` +npm install +``` + +Finally run a development server: ๐Ÿคฉ +``` +npm run dev ``` +Aaaaand you're done! ๐ŸŽ‰๐Ÿฅณ + +# Features ๐Ÿ˜ +![img.png](public/img.png) + +![img_1.png](public/img_1.png) + +![img_2.png](public/img_2.png) + +![img_3.png](public/img_3.png) + +## Available Scripts ๐Ÿฅ‘ + +Here you can find all the scripts that are available in our project. ๐Ÿฆš + +Lint the App with **ESlint**: โœ… + +``` +npm run lint +``` + +Format the App with **Prettier**: ๐Ÿงน + +``` +npm run prettier:fix +``` + +Type check the App with **TypeScript**: ๐Ÿฆ + +``` +npm run type-check +``` + +Install **Husky** to enable pre-commit hooks: ๐ŸŽฃ + +``` +npm run prepare +``` + +Run unit-tests with **Vitest**: ๐Ÿงช + +``` +npm run test +``` + +Run unit-tests coverage with **Vitest**: ๐Ÿงช + +``` +npm run coverage +``` + +**Build** project for production: ๐ŸŽ + +``` +npm run build +``` + +**Preview** the **production build** locally: ๐Ÿ‘€ + +``` +npm run preview +``` + +# Technology Stack โš™๏ธ + +## Developing ๐Ÿฆˆ +* **React.js** - The Web Framework used ๐Ÿ’˜ +* **React** Router Dom - The Router ๐Ÿ“ +* **TypeScript** - The Language ๐Ÿ’– +* **Tailwind** - The CSS Framework ๐Ÿƒ +* **Vite** - The Bundler ๐Ÿ“ฆ +* **Material**/web - Material Design Web Components ๐Ÿ’ซ +* **Firebase** - The Backend tooling ๐Ÿ”ฅ + +## Code Quality ๐Ÿงน +* **Vitest** - The Test Runner ๐Ÿงช +* **Testing** Library - The Testing Framework ๐Ÿซ‚ +* **React Testing Library** - The Testing Framework ๐Ÿซ‚ +* **ESLint** โ€” Air-bnb base - The Linter ๐Ÿ”” +* **Prettier** - The Code Formatter ๐Ÿ‘ +* **Husky** - The Pre-commit Hooks ๐Ÿช +* **Lint Staged** - The Pre-commit Hooks Config ๐Ÿฆš +* **EditorConfig** - The Code Style Enforcer ๐Ÿ˜Ž +* **Clsx + Tailwind Merge** - The Tailwind Classnames Resolver ๐ŸŽจ + +## External Libraries ๐Ÿ“š +* **Yup** - The Form Validation Schema Builder ๐Ÿ›๏ธ +* **React Hook Form** - The Form Library ๐Ÿ“‘ +* **Framer** Motion - The Animation Library ๐Ÿ˜ +* **Codemirror** - The Code Editor ๐Ÿ“ +* **Overlayscrollbars** - The Custom Scrollbar ๐Ÿ“œ +* **React Toastify** - The Toast Library ๐Ÿž + +# App Design Guideline ๐ŸŽจ + +The app is using the **Material Design 3** System aka **Material You**. + +* **Figma** - The Design Tool ๐ŸŽจ +* **Design File** - [link](https://www.figma.com/file/2bUMq5pE5L91lJWB9S1jAX/GraphiQL-App-%F0%9F%9A%80?type=design&node-id=0%3A1&mode=design&t=v3gBWbiLESRO53BN-1) + +![img_4.png](public/img_4.png) + +# Core Development Team ๐Ÿ‘จโ€๐Ÿ’ป + +### **Bohdan Shcherbyna ๐Ÿฆ** + +*Front-end. UI/UX Design.* + + + +### Contact ๐Ÿ‘‹: +* Email - ```bogdanscherbinadev@gmail.com``` ๐Ÿ“ฌ +* Linkedin - [Bohdan Shcherbyna](https://www.linkedin.com/in/quiddle/) โœ’๏ธ +* Telegram - [@Quiddle](https://t.me/quiddle) ๐Ÿ“ฑ +* GitHub - [Quiddlee](https://github.com/Quiddlee) ๐Ÿฆ‰ + +# + +### **Oleksii Drohachov** ๐Ÿฆˆ +*Front-end. Back-end.* + + + +### Contact ๐Ÿ‘‹: +* Email - ```asdrogachev@gmail.com``` ๐Ÿ“ฌ +* Linkedin - [Oleksii Drohachov](https://www.linkedin.com/in/oleksii-drohachov-b127a9245/) โœ’๏ธ +* Telegram - [@Tedzury](https://t.me/tedzury) ๐Ÿ“ฑ +* GutHub - [Tedzury](https://github.com/Tedzury) ๐Ÿฆ‰ + +# + +### **Harry Holubiev** ๐Ÿฒ +*Front-end.* + + -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +### Contact ๐Ÿ‘‹: +* Email - ```queharambe@gmail.com``` ๐Ÿ“ฌ +* GitHub - [barrydilan](https://github.com/barrydilan) ๐Ÿฆ‰ diff --git a/public/img.png b/public/img.png new file mode 100644 index 0000000..2ec5e8a Binary files /dev/null and b/public/img.png differ diff --git a/public/img_1.png b/public/img_1.png new file mode 100644 index 0000000..7feb6ab Binary files /dev/null and b/public/img_1.png differ diff --git a/public/img_2.png b/public/img_2.png new file mode 100644 index 0000000..812ba8f Binary files /dev/null and b/public/img_2.png differ diff --git a/public/img_3.png b/public/img_3.png new file mode 100644 index 0000000..57075f1 Binary files /dev/null and b/public/img_3.png differ diff --git a/public/img_4.png b/public/img_4.png new file mode 100644 index 0000000..afa3f3d Binary files /dev/null and b/public/img_4.png differ diff --git a/public/img_5.png b/public/img_5.png new file mode 100644 index 0000000..5c411e7 Binary files /dev/null and b/public/img_5.png differ diff --git a/public/img_6.png b/public/img_6.png new file mode 100644 index 0000000..cf56cec Binary files /dev/null and b/public/img_6.png differ diff --git a/public/img_7.png b/public/img_7.png new file mode 100644 index 0000000..d79d289 Binary files /dev/null and b/public/img_7.png differ