⚛️ GraphiQL-App: REST/GraphQL Client

🦥 RS-School React Final Task.

Overview

This repository hosts the development of a lightweight application combining features of Postman and GraphiQL. The application allows users to interact with RESTful APIs and GraphQL endpoints, offering method selection, URL input, headers editing, and response viewing.

Purpose

The goal is to create a tool that supports both REST and GraphQL requests, integrating authentication, history tracking, and a user-friendly interface. The app is built using React 18+ with NextJS or Remix, ensuring a modern, efficient, and accessible development environment.

Key Features

• RESTful API client with method selection and headers editor.
• GraphiQL client with query editor and documentation explorer.
• User authentication via Firebase.
• Request history with easy retrieval and re-execution.
• Internationalization support.

*GraphiQL: Your interactive GraphQL and RESTful API IDE, empowering website development with syntax highlighting, autocompletion, and dynamic documentation 🤩.*

Deployed project preview - GraphiQL 👀

Getting Started 🚀

To run our project locally, you would have to download zip file with our repository or clone it to your computer. ✨

Setup and Running ⚠️

What things do you need to do in order to run our project locally? 🤔

• Use node 20.x or higher. ⚡
• Installed .git on your computer. ✌️
• Code Editor of your choice. 📝
• Installed npm. 📦

Installation And Preparation 🔮

First make sure you have all the things listed in the previous section. Then clone our repository to your computer: 👌

with SSH

git clone git@github.com:andron13/graphiql-app.git

with HTTPS

git clone https://github.com/andron13/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 😍

tbd

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 format:fix

Type check the App with TypeScript: 🦁

npm run typecheck

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 dev

Technology Stack ⚙️

Developing 🦈

• Remix - The React.JS Web Framework 💘
• TypeScript - The Language 💖
• Tailwind - The CSS Framework 🍃
• Vite - The Bundler 📦
• Firebase - Authentication 🔥

Code Quality 🧹

• Vitest - The GraphqlPath 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 🦚
• Clsx + Tailwind Merge - The Tailwind Classnames Resolver 🎨

External Libraries 📚

• Yup - The Form Validation Schema Builder 🏛️
• React Hook Form - The Form Library 📑

Core Development Team 👨‍💻

Andrej Podlubnyj 🦁

Front-end. UI/UX Design.

Contact 👋:

• Email - andron13@gmail.com 📬
• Linkedin - Andrej Podlubnyj ✒️
• Telegram - @ptchom 📱
• GitHub - andron13 🦉

Vadym Popov 🦈

Front-end. Back-end.

Contact 👋:

• Email - vadympopov.dev@gmail.com 📬
• Linkedin - Vadym Popov ✒️
• Telegram - @boy_cristal 📱
• GitHub - Vadym Popov 🦉