A modern, interactive web UI to explore and test all endpoints from the learn-node backend API. Built with vanilla HTML, CSS, and JavaScript with a focus on accessibility, performance, and developer experience.

• 🎨 Modern Interface: Responsive design with gradient backgrounds and smooth animations
• 🔄 Interactive Testing: Test all API endpoints with a single click
• 📊 Real-time Responses: View formatted JSON and text responses with syntax highlighting
• 🔌 Connection Testing: Verify API connectivity before making requests
• ⚙️ Configurable: Easy to point to different backend instances with persistent storage
• 📋 Copy to Clipboard: Quick copy functionality for API responses
• ⌨️ Keyboard Shortcuts: Ctrl+Enter to test connection, Ctrl+R to fetch all endpoints
• 📱 Fully Responsive: Works seamlessly on mobile, tablet, and desktop

• ♿ Accessible: WCAG 2.1 compliant with ARIA labels and keyboard navigation
• 🌓 Dark Mode: Automatic dark mode support based on system preferences
• 🔒 Secure: Security headers, CORS handling, and CSP policies
• ⚡ Performance: Optimized with caching, compression, and minimal dependencies
• 🐳 Docker Ready: Production-ready Docker image with health checks
• 🔄 Auto-retry: Automatic retry logic for failed requests
• 💾 Persistent State: API URL saved to localStorage
• 🎯 Error Handling: Comprehensive error handling and user feedback

• GET / - Welcome message and API information
• GET /ping - Simple ping-pong connectivity test
• GET /healthz - Health check with system metrics
• GET /info - Detailed application and system information

• A web browser (Chrome, Firefox, Safari, Edge)
• The learn-node backend running (default: http://localhost:3000)
• Node.js >= 18 (for development)

Simply open src/index.html in your web browser - no server required!

# Clone the repository
git clone https://github.com/dxas90/learn-node-ui.git
cd learn-node-ui

# Install dependencies
npm install

# Start development server
npm start

The application will open automatically at http://localhost:8080.

# Install dependencies and start server
make install
make start

# Build the image
docker build -t learn-node-ui:latest .

# Run the container
docker run -d \
  --name learn-node-ui \
  -p 8080:80 \
  -e API_URL=http://localhost:3000 \
  -e ENVIRONMENT=production \
  learn-node-ui:latest

# Or using make
make docker-build
make docker-run

Visit http://localhost:8080 in your browser.

1. Configure API URL: Enter your backend API URL (default: http://localhost:3000)
2. Test Connection: Click "Test Connection" to verify the backend is accessible
3. Fetch Endpoints: Click "Fetch" on individual endpoints or use "Fetch All Endpoints"
4. View Responses: Responses appear below each endpoint with:
   • Formatted JSON or text
   • Response time
   • Content type
   • Copy to clipboard button

• Ctrl/Cmd + Enter - Test connection
• Ctrl/Cmd + R - Fetch all endpoints
• Tab - Navigate between interactive elements

• API_URL - Backend API URL (default: http://localhost:3000)
• ENVIRONMENT - Environment name: localdev or production (default: production)
• MY_DEBUG - Debug mode: false, true, or verbose (default: false)
• SHOW_END_RESULT - Show configuration results (default: false)

The API URL is saved to localStorage and persists across sessions.

learn-node-ui/
├── src/                    # Source files
│   ├── index.html         # Main HTML with semantic structure
│   ├── script.js          # JavaScript with ES6+ features
│   └── styles.css         # Modern CSS with custom properties
├── deploy/                # Deployment configurations
│   ├── 99-fix-access.sh  # Environment setup script
│   └── default.conf      # Nginx configuration
├── .github/               # GitHub Actions workflows
│   └── workflows/
│       └── ci-cd.yml     # CI/CD pipeline
├── Dockerfile            # Multi-stage Docker build
├── Makefile              # Development tasks
├── package.json          # Dependencies and scripts
└── README.md             # This file

# Development
npm start              # Start dev server (opens browser)
npm run dev            # Start dev server (no browser)

# Code Quality
npm run lint           # Run all linters
npm run format         # Format all code
npm run validate       # Lint and format

# Docker
npm run docker:build  # Build Docker image
npm run docker:run    # Run Docker container
npm run docker:stop   # Stop and remove container

# Testing
npm run test:accessibility  # Run accessibility tests
npm run test:lighthouse    # Run Lighthouse audit

make help              # Show all available commands
make install           # Install dependencies
make dev               # Start development server
make lint              # Run linters
make format            # Format code
make validate          # Validate and format
make test              # Run tests
make docker-build      # Build Docker image
make docker-run        # Run Docker container
make ci                # Run CI pipeline locally

• ESLint - JavaScript linting
• Stylelint - CSS linting
• HTMLHint - HTML validation
• Prettier - Code formatting
• Pa11y - Accessibility testing
• Lighthouse - Performance auditing

# Run all tests
make test

# Individual tests
make test-accessibility
make test-lighthouse

1. Start the development server: npm start
2. Start the backend API: learn-node
3. Test all endpoints and verify responses
4. Test responsive design at different viewport sizes
5. Test keyboard navigation and screen reader compatibility
6. Test error scenarios (API down, network errors, etc.)

# Build production image
docker build -t learn-node-ui:latest .

# Run with custom API URL
docker run -d \
  --name learn-node-ui \
  -p 8080:80 \
  -e API_URL=https://your-api.com \
  -e ENVIRONMENT=production \
  learn-node-ui:latest

# View logs
docker logs -f learn-node-ui

# Health check
curl http://localhost:8080/health

version: '3.8'
services:
  ui:
    build: .
    ports:
      - "8080:80"
    environment:
      - API_URL=http://localhost:3000
      - ENVIRONMENT=production
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost/health"]
      interval: 30s
      timeout: 10s
      retries: 3

• Security Headers: X-Frame-Options, CSP, X-Content-Type-Options
• CORS Configuration: Properly configured for API communication
• Input Validation: URL validation and sanitization
• No Secrets: No hardcoded secrets or API keys
• Non-root User: Docker container runs as non-root user
• Health Checks: Built-in health check endpoint

• WCAG 2.1 Level AA compliant
• Semantic HTML5 structure
• ARIA labels and live regions
• Keyboard navigation support
• Screen reader compatible
• Focus management
• High contrast mode support
• Reduced motion support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

• Lighthouse Score: 95+
• Gzip compression enabled
• Optimized caching strategy
• Minimal JavaScript footprint
• No external dependencies
• Fast initial load time

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

• learn-node - The backend API this UI consumes

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Backend Issues: learn-node Issues

• Built with modern web standards
• Inspired by API testing tools like Postman and Insomnia
• Thanks to all contributors

Made with ❤️ for learning Node.js | Report Bug | Request Feature