REST/GraphiQL Client

REST/GraphiQL Client web application using React/NEXT.

Deploy: https://graphiql-app-peach.vercel.app/ru

• stack: React, NextJS, Typescript, Redux Toolkit, Vite, Tailwind, Prettier, Eslint, Vitest, Firebase, GraphQL

Authors

• Pavel Gordienko
• Katsiaryna Piatrova
• Tim Yusupov

Setup and Running

• Use node 21.x or higher.
• Clone this repo: $ git clone https://github.com/RS-Tech-Artisans/eCommerce-React.git.
• Go to downloaded folder: $ cd eCommerce-React.
• Install dependencies: $ npm install.
• Start server: $ npm start.
• Now you can see web application to the address: http://localhost:8080.

Build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm run dev

npm run build

For formatting all files with Prettier

npm run prettier

Running test

npm run test

Folder structure

• app - This directory contains all the main pages used for routing, such as the core pages of the application. It handles the application's routing logic and acts as the entry point for various screens.

• Components - This folder holds the shared components used throughout the entire application. These are reusable UI components that can be used across different pages and features, such as buttons, input fields, and modals.

• context - Here, you will find context files for managing global states like authentication and localization (translation). It provides a centralized way to manage and share data across multiple components using React Context API.

• pagesComponents - This folder contains components that are specific to individual pages. These components are tailored to specific page layouts and functionality, helping to build and structure the content of each page.

• utils - The utils directory includes utility functions and services, such as API request handlers and external service connectors. It also houses helper functions that are used for various tasks throughout the application.

Screenshots