Merge pull request #85 from Quiddlee/docs/update-readme

docs: update readme

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.*
+
+<img height="400px" src="public/img_5.png">
+
+### Contact 👋:
+* Email - ```[email protected]``` 📬
+* 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.*
+
+<img height="400px" src="public/img_6.png">
+
+### Contact 👋:
+* Email - ```[email protected]``` 📬
+* 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.*
+
+<img height="400px" src="public/img_7.png">
 
-- 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 - ```[email protected]``` 📬
+* GitHub - [barrydilan](https://github.com/barrydilan) 🦉