https://github.com/chainstacklabs/performance-tool-client
Chainstack Compare frontend
https://github.com/chainstacklabs/performance-tool-client
Last synced: 5 months ago
JSON representation
Chainstack Compare frontend
- Host: GitHub
- URL: https://github.com/chainstacklabs/performance-tool-client
- Owner: chainstacklabs
- Created: 2024-01-17T14:24:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-03T12:38:41.000Z (about 1 year ago)
- Last Synced: 2025-03-27T06:11:49.551Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://compare.chainstack.com
- Size: 4.81 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Performance Tool Client
A modern web application for monitoring and analyzing blockchain network performance metrics.
## Overview
This tool provides real-time performance monitoring and analysis capabilities for blockchain networks, built with Next.js, TypeScript, and Tailwind CSS.
## Prerequisites
- Node.js (v18 or higher)
- npm or yarn
- Modern web browser
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/your-username/performance-tool-client.git
cd performance-tool-client
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Set up environment variables:
```bash
cp .env.example .env.local
```
## Commands
Run the development server on localhost:
```bash
npm run dev
# or
yarn dev
```
Build the application:
```bash
npm run build
# or
yarn build
```
More about [deploying options](https://nextjs.org/docs/app/building-your-application/deploying)
Deployments:
Deployed on Vercel automatically on PR merge.
## How to Add New Method
Navigate to `src/app/store/store.js` and find the `METHODS` array:
```javascript
export const METHODS = entity([
{
id: 0,
method_used: 'eth_getBlockByNumber',
method_url: process.env.NEXT_PUBLIC_BACKEND_APP_PATH_URL + 'test-get-block',
perform: true,
isLoading: true,
data: {},
},
{
id: 1,
method_used: 'eth_call',
method_url: process.env.NEXT_PUBLIC_BACKEND_APP_PATH_URL + 'test-eth-call',
perform: true,
isLoading: true,
data: {},
},
]);
```
To add a new method:
1. Add a new object at the end of the array
2. Increment the `id` field value
3. Set `method_used` for the card label shown in results UI
4. Update `method_url` with the new path
5. Keep other fields unchanged
## Project Structure
```
├── src/
│ ├── app/ # Next.js App Router components
│ └── components/ # Reusable React components
└── public/ # Static assets
```
## Key Directories
- `/app/compare-double/page.js`: Implements side-by-side comparison functionality for two blockchain nodes page
- `/app/compare-single/page.js`: Implements testing functionality for one blockchain node page
- `/app/injection-result-double/page.js`: Implements side-by-side comparison functionality for two blockchain nodes for injected page
- `/app/store/store.js`: Contains global state management and methods configuration
- `/app/page.js`: Initial page
## Core Technologies
- [Next.js](https://nextjs.org/) - React Framework
- [TypeScript](https://www.typescriptlang.org/) - Type safety
- [Tailwind CSS](https://tailwindcss.com/) - Styling
- [ESLint](https://eslint.org/) - Code linting
- [Jest](https://jestjs.io/) - Testing framework
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## Code Quality
- Follows best practices for React and Next.js
- Implements maintainable and scalable code structure
- Includes comprehensive documentation
- Uses TypeScript for type safety
- Adheres to ESLint configuration