IP Lookup Tool Front-end

This project is a proof-of-concept for a good-practices Typescript React application built with esbuild. It is a fully functional IP address validation and lookup tool that uses ip-api.com to query information about the supplied address.

Corresponding back-end application at: https://github.com/folkhack/ip-lookup-tool

PUNCH:

• Update this project, re-build git and submit to github

Application Features:

• Responsive minimalistic web application for looking up IP address info
• IPv4 and IPv6 lookup support
• Input validation, error handling

Development Features:

• React based SPA (single-page application) - src/index.tsx
• esbuild based build system - build.js
  • Devevelopment/production builds with minification etc.
  • Watched assets/src with live reload
  • Bundle analyze tool
• Linux, Mac, Windows support
• Node.js LTS
• ECMAScript 2015 Module Imports
• TypeScript - tsconfig.json
• eslint (linting) - .eslintrc.json
• Jest (testing) - npm run tests; jest.config.js
  • Unit testing - npm run tests; src/**/*.test.ts
  • Integration testing - npm run tests; src/**/*.test.ts
  • Code coverage at 100% - npm run coverage
  • Snapshot testing - npm run tests src/App
  • Accessibility testing - npm run tests
• Playwright (testing) - npm run tests_e2e; tests/e2e/**/*.spec.ts
• Sublime 4 workflow (linting, TypeScript support w/LSP, Linux/Mac/Windows support) - *.sublime-project

---

Usage:

NOTE: Expects ip-lookup-tool HTTP API to be running.

Building:

# FOR DEVELOPMENT:

# Build production application
npm run build

# Build production application and serve
npm run serve

# Build production application and analyze bundle
npm run build_analyze

#############################################################################################

# FOR PRODUCTION:

# Build development application (enables additional debugging/dev features)
npm run build_dev

# Build development application and serve
npm run serve_dev

# Watch assets/src directories, build on changes, and serve
npm run build_watch

# Watch assets/src directories, build on changes, serve, and live reload the browser
npm run build_reload

You can control the build script even more (ex: setting logging levels, serve ports) - see docs/esbuild_build_script.md for more complex build options/information!

Linting

# Lint the project assets and report on code consistency issues
npm run lint

# Fix the linting errors produced
# - IMPORTANT - This will edit your code!
npm run lint_fix

Tests

# Run application unit, integration, snapshot, and accessibility tests
npm run tests
npm run tests_verbose

# Run tests from `npm run tests` above and also generate code coverage report
npm run coverage
npm run coverage_verbose

# Run Playwright E2E tests
npx playwright install # only needs to be done once!
npm run tests_e2e

---

Project Parts:

• Node.js/base setup - Base nvm/Node.js installation, module imports, package.json setup
• TypeScript - strongly typed programming language built on JavaScript
• esbuild build.js - Main application build script
• React - React application details/anatomy
• Jest - Unit and integration testing, code coverage
• Playwright - E2E testing through the Playwright library
• eslint - linting, code formatting
• DevTools Tooling - Tools/dev features available in Chrome/Chromium DevTools
• Image Optimization - Using optimizt to optimize static image assets
• Sublime Text 4 - Project config designed to use TypeScript language server and eslint linting
• README Demo GIF - Creating a demo GIF for use on your README.md

---

Modifying to Taste:

This is an optional list to help you get started modifying this project a sane starting-point for another project. This is not a definitive list and avoids documenting obvious things like dependencies.

• Project name:
  • Rename *.sublime-project to project_name.sublime-project
  • Set name in package.json
  • Search for "ip_lookup_tool_frontend" in the docs:
    • README.md (this file)
• ECMA version:
  • tsconfig.json
    • compilerOptions.target
    • compilerOptions.module
  • .eslintrc.json
    • env.es6 for modern ECMA features
    • parserOptions.ecmaVersion
• Module support:
  • package.json
    • type (remove if CJS desired)
  • tsconfig.json
    • compilerOptions.moduleResolution
    • compilerOptions.module
  • .eslintrc.json
    • env.es6 for modern ECMA features
    • parserOptions.sourceType
  • jest.config.js
    • preset
    • extensionsToTreatAsEsm
    • transform (modify/remove useEsm transforms)
    • Modify/remove transform_node_modules in jest.config.js
    • Modify/remove JestSetup.fix_exported_modules_w_named_defaults in jest_setup.js
• Node.js support:
  • tsconfig.json
    • compilerOptions.moduleResolution
  • .eslintrc.json
    • env.node
• TypeScript support:
  • .eslintrc.json
    • parser
    • extends - @typescript-eslint/recommended
    • plugins - @typescript-eslint
    • Modify/remove TypeScript-specific rules
    • Modify/remove compilerOptions.paths path aliases
• esbuild support:
  • Modify esbuild build script options/tooling
    • ex: Change dist directory, add/edit entry points
    • Most likely don't need to edit this - most applicable options available to be configured through CLI arguments
• Browser support:
  • tsconfig.json
    • compilerOptions.moduleResolution
  • .eslintrc.json
    • env.browser
    • Modify/remove Browser-specific rules
  • jest.config.js
    • testEnvironment
• Jest support:
  • .eslintrc.json
    • env.jest
    • plugins - jest
    • Modify/remove Jest-specific rules
    • Modify/remove moduleNameMapper path aliases (will match aliases in tsconfig.json)