Slawomir Koszewski
557f1b20c9
- Remove Dockerfile.dev and CI/CD workflow - Remove Docker-specific npm scripts from package.json - Update README to prioritize local Node.js development - Make Docker containerization optional rather than required - Update build scripts to treat Docker as optional - Remove GitHub Actions and CI/CD references from documentation - Add Format JSON button to JMESPath toolbar per copilot instructions - Simplify development workflow for better accessibility
2.2 KiB
2.2 KiB
Development Guide
Quick Start Commands
# Install dependencies
npm install
# Start development server (with hot reload)
npm start
# Build for production
npm run build
# Run tests
npm test
# Serve production build locally
npm run serve
Docker Commands
# Build Docker container
docker build -t jmespath-playground .
# Run Docker container
docker run -p 3000:3000 jmespath-playground
# Development with Docker Compose
docker-compose --profile dev up jmespath-playground-dev
# Production with Docker Compose
docker-compose up jmespath-playground
Project Structure Overview
src/
├── App.js # Main component with JMESPath logic
├── App.css # App-specific styles
├── App.test.js # Basic tests
├── index.js # React entry point
├── index.css # Global styles and Bootstrap overrides
└── setupTests.js # Test configuration
Key Features Implemented
- Real-time JMESPath Evaluation: Uses the
jmespathlibrary to evaluate expressions as user types - JSON Validation: Parses and validates JSON input with error reporting
- Bootstrap UI: Responsive layout with cards, buttons, and form controls
- Error Handling: Clear error messages for both JSON and JMESPath syntax issues
- Sample Data: Pre-loaded examples with "Load Sample" button
- JSON Formatting: "Format JSON" button to prettify JSON input
- Clear Function: "Clear All" button to reset all inputs
Component Architecture
The main App.js component manages:
- State for JMESPath expression, JSON data, results, and errors
- Auto-evaluation using
useEffectwhen inputs change - Error handling for both JSON parsing and JMESPath evaluation
- UI event handlers for buttons and input changes
Styling
- Bootstrap 5.3.2 for responsive grid and components
- Custom CSS for enhanced UX (color coding, hover effects)
- Gradient header with professional appearance
- Color-coded input areas (yellow for JMESPath, green for JSON, blue for results)
Browser Compatibility
Built with React 18 and targets:
- Modern evergreen browsers
- Node.js 24 LTS compatibility
- Mobile-responsive design
License
MIT License - see LICENSE file for details.