A modern web client for the Monitors API built with Next.js, React, and TypeScript.
- Deploy the monitor-api server somewhere
- Create a Vercel project attached to monitor-client-nextjs
- Add the monitor-api base URL as env var to Vercel
- Trigger Vercel deploy
# Install dependencies
npm install
# Run the development server with Turbopack
npm run devOr use the Makefile:
# Install dependencies
make setup
# Run the development server
make run# Run unit and component tests (Jest + React Testing Library)
npm test
# Run tests in watch mode (useful during development)
npm run test:watch
# Generate test coverage report
npm run test:coverage
# Run end-to-end tests (Playwright)
npm run test:e2e
# Run end-to-end tests in debug mode (with browser UI)
npm run test:e2e:debug
# Run all tests for CI environment
npm run test:ciWith Makefile:
# Run unit tests
make test
# Run end-to-end tests
make test-e2e
# Run all tests (unit + e2e)
make test-all# Build the application for production
npm run build
# Start the production server
npm run startWith Makefile:
# Build the application
make build
# Start the production server
make start# Run ESLint
npm run lint
# Format code with Prettier
npx prettier --write "**/*.{js,jsx,ts,tsx,json,md}"With Makefile:
# Run linter
make lint
# Format code
make format
# Clean build artifacts
make cleanThe project includes a Makefile with the following commands:
make setup- Install dependenciesmake format- Format code with Prettiermake format-check- Check formatting without modifying filesmake lint- Run ESLintmake lint-ci- Run ESLint with zero tolerance for warningsmake test- Run unit testsmake test-e2e- Run end-to-end testsmake test-all- Run all testsmake run- Start development servermake build- Build for productionmake start- Start production servermake ci- Run all checks and tests for CI environmentsmake clean- Remove build artifacts