Repository files navigation

A preview of the main coaching session page (rapidly evolving)

A web frontend built on Next.js that provides a web API for various client applications (e.g. a web frontend) that facilitate the coaching and mentoring of software engineers.

The platform itself is useful for professional independent coaches, informal mentors and engineering leaders who work with individual software engineers and/or teams by providing a single application that facilitates and enhances your coaching practice.

This is aNext.js project bootstrapped withcreate-next-app.

When running locally on a development machine you can manually set the application's configuration through a.env file at the root of the source tree:

NEXT_PUBLIC_BACKEND_SERVICE_PROTOCOL="http"NEXT_PUBLIC_BACKEND_SERVICE_PORT=4000NEXT_PUBLIC_BACKEND_SERVICE_HOST="localhost"NEXT_PUBLIC_BACKEND_API_VERSION="1.0.0-beta1"# TIPTAP_APP_ID originates from your TipTap Cloud DashboardNEXT_PUBLIC_TIPTAP_APP_ID="<TIPTAP_APP_ID>"FRONTEND_SERVICE_INTERFACE=0.0.0.0FRONTEND_SERVICE_PORT=3000

Note that these variables get set and passed by docker-compose in the backend's.env file anddo not need to be set here in this case.

npm run dev

Openhttp://localhost:3000 with your browser to log in to the platform.

This project includes a comprehensive testing suite with unit tests, integration tests, and end-to-end tests to ensure reliable state management and user interactions.

Ensure all dependencies are installed:

npm install

# Run all unit and integration testsnpm runtest# Run tests with interactive UI (great for development)npm run test:ui# Run tests with coverage reportnpm run test:coverage

# Run E2E tests (requires dev server to be running)npm run test:e2e# Run E2E tests with interactive UInpm run test:e2e:ui# Run all tests (unit + integration + E2E)npm run test:all

These test individual components, hooks, and state stores in isolation:

npm runtest

What this covers:

• State store logic (organization, coaching relationship, auth)
• React hooks behavior
• Component rendering and interactions
• API mocking with realistic responses

These test complete user workflows in a real browser:

# First, start the development server in one terminalnpm run dev# Then in another terminal, run E2E testsnpm run test:e2e

What this covers:

• State persistence across page navigation
• Logout clearing all stored state
• Error handling (403 forbidden pages)
• Session relationship ID syncing
• Cross-browser compatibility

• __tests__/ - Unit, integration, and E2E tests (mirrorssrc/ structure)
  • components/ui/ - UI component tests (mirrorssrc/components/ui/)
  • lib/stores/ - State management logic tests (mirrorssrc/lib/stores/)
  • lib/hooks/ - React hooks integration tests (mirrorssrc/lib/hooks/)
• src/test-utils/ - Testing utilities and mocks

Note: E2E tests (.spec.ts files) are now organized alongside unit tests in the__tests__/ directory, mirroring the source code structure for easier navigation and maintenance.

If tests fail, you can:

1. Run tests in UI mode for better debugging:

   npm run test:ui# For unit testsnpm run test:e2e:ui# For E2E tests

2. Run specific test files:

   npm runtest -- __tests__/stores/auth-store.test.ts

3. Check test coverage:

   npm run test:coverage

All tests should pass before merging code. The test suite is designed to:

• Catch state management regressions
• Prevent logout/session bugs
• Validate user interaction flows
• Ensure cross-browser compatibility

For more detailed testing information, seedocs/testing/frontend-testing-strategy.md.