JMESPath Testing Tool

A React-based web application for testing and validating JMESPath expressions against JSON data in real-time. This interactive tool provides a user-friendly interface to experiment with JMESPath queries and see results instantly.

Features

• 🎯 Real-time Evaluation: JMESPath expressions are evaluated instantly as you type
• 📝 JSON Validation: Built-in JSON syntax validation and error reporting
• 🎨 Bootstrap UI: Clean, responsive interface with Bootstrap styling
• 🔄 Sample Data: Pre-loaded examples to get started quickly
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• 🐳 Docker Ready: Containerized for easy deployment
• ✅ Error Handling: Clear error messages for both JSON and JMESPath syntax issues
• 🚀 CI/CD Ready: GitHub Actions workflow for automated container builds

Application Layout

The application is divided into three main sections:

1. Top Section: Title and description of the tool
2. Middle Section: Input area for JMESPath expressions
3. Bottom Sections:
   • Left: JSON data input area
   • Right: Query results output area

Quick Start

Prerequisites

• Node.js 24 LTS or higher
• npm or yarn package manager

Local Development

1. Clone the repository:

   git clone <repository-url>
   cd jmespath-playground
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

4. Open your browser and navigate to http://localhost:3000

Container Deployment

Docker

# Build the Docker image
docker build -t jmespath-playground .

# Run the container
docker run -p 3000:3000 jmespath-playground

# Using npm scripts
npm run docker:build
npm run docker:run

Usage

1. Enter a JMESPath expression in the top input field (e.g., people[*].name)
2. Paste or type JSON data in the bottom-left textarea
3. View the results in the bottom-right output area
4. Use the toolbar buttons to:
   • Load sample data
   • Format JSON
   • Clear all inputs

Example JMESPath Expressions

Try these examples with the sample data:

• people[*].name - Get all names
• people[0] - Get the first person
• people[?age > 30] - Filter people older than 30
• people[*].skills[0] - Get the first skill of each person
• length(people) - Count the number of people

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode. The page will reload when you make edits.

npm test

Launches the test runner in interactive watch mode.

npm run 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 serve

Serves the production build locally on port 3000.

Docker Scripts

npm run docker:build

Builds a Docker container.

npm run docker:run

Runs the Docker container.

Project Structure

jmespath-playground/
├── .github/
│   ├── workflows/
│   │   └── build-container.yml   # CI/CD pipeline
│   └── copilot-instructions.md   # AI agent instructions
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── favicon.ico
├── src/
│   ├── App.js          # Main application component
│   ├── App.css         # App-specific styles
│   ├── App.test.js     # App tests
│   ├── index.js        # React entry point
│   ├── index.css       # Global styles
│   ├── setupTests.js   # Test configuration
│   └── reportWebVitals.js
├── scripts/
│   ├── build.sh        # Build script
│   └── dev.sh          # Development script
├── Dockerfile          # Docker container
├── Dockerfile.dev      # Development container
├── docker-compose.yml  # Container orchestration
├── package.json        # Dependencies and scripts
├── README.md           # Comprehensive documentation
├── DEVELOPMENT.md      # Developer guide
└── demo.sh             # Demo script

Technology Stack

• React 18.2.0: Frontend framework
• Bootstrap 5.3.2: CSS framework for styling
• JMESPath 0.16.0: JMESPath expression evaluation
• Node.js 24 LTS: Runtime environment
• Docker: Containerization
• GitHub Actions: Automated CI/CD pipeline

CI/CD Pipeline

The project includes a GitHub Actions workflow that automatically:

• 🔍 Triggers on pushes to main or develop branches when src/ directory changes
• 📦 Builds the React application with Node.js 24 LTS
• 🧪 Runs the test suite with coverage reporting
• 🐳 Creates container image using Docker
• ✅ Tests the container by starting it and verifying HTTP response
• 🏗️ Builds multi-platform images (amd64/arm64) for main branch
• 📤 Uploads build artifacts for later use

The workflow uses Docker for containerization and is optimized for cross-platform deployment.

Deployment

Docker Deployment

The application is containerized and ready for deployment:

1. Build the Docker image:

   docker build -t jmespath-playground .
   

2. Deploy to your container platform (Docker Swarm, Kubernetes, etc.)

Static Hosting

You can also deploy the built application to static hosting services:

1. Build the application:

   npm run build
   

2. Deploy the build folder to services like:

   • Netlify
   • Vercel
   • GitHub Pages
   • AWS S3 + CloudFront
   • Azure Static Web Apps

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Make your changes and commit them: git commit -m 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

About JMESPath

JMESPath is a query language for JSON. It allows you to declaratively specify how to extract elements from a JSON document. For more information about JMESPath syntax and capabilities, visit the official JMESPath website.

Support

If you encounter any issues or have questions, please open an issue on GitHub.