🦥 RS-School React Final Task.
GraphiQL: Your interactive GraphQL IDE, empowering website development with syntax highlighting, autocompletion, and dynamic documentation 🤩.
Deployed project preview - GraphiQL 👀
To run our project locally, you would have to download zip file with our repository or clone it to your computer. ✨
What things do you need to do in order to run our project locally? 🤔
- Use node 18.x or higher. ⚡
- Installed .git on your computer. ✌️
- Code Editor of your choice. 📝
- Installed npm. 📦
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! 🎉🥳
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
- 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 🔥
- 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 🎨
- 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 🍞
The app is using the Material Design 3 System aka Material You.
- Figma - The Design Tool 🎨
- Design File - link
Front-end. UI/UX Design.
- Email -
[email protected]📬 - Linkedin - Bohdan Shcherbyna ✒️
- Telegram - @Quiddle 📱
- GitHub - Quiddlee 🦉
Front-end. Back-end.
- Email -
[email protected]📬 - Linkedin - Oleksii Drohachov ✒️
- Telegram - @Tedzury 📱
- GutHub - Tedzury 🦉
Front-end.
- Email -
[email protected]📬 - GitHub - barrydilan 🦉