NEXMA: Organizational Management SaaS

Organizational management SaaS: shared calendar, organizations with roles and members, contracts with task boards, and time tracking.

Status
Live
Type
SaaS platform
Website
dash.nexma.org

About this project

NEXMA is an organizational management SaaS. Teams plan their activities on a shared calendar, run their organization (members, roles, positions), follow contracts and their tasks, and track working time.

This page covers the web app, a Next.js and TypeScript front end that talks to NEXMA's REST APIs. It is available in French and English. I worked on it in a small team: I set up the codebase and built a large part of its modules.

My role: Front-end developer on the web app, in the HES Digital Service team. I set up the codebase and led the calendar, contracts, members and authentication work.

Key features

  • Calendar and agenda

    Day, week and month views to plan activities, with a creation dialog, a detail page per activity, and CSV and PDF export.

  • Organizations and members

    Create an organization, invite members by link or QR code, and manage members, positions and roles (owner, admin, member).

  • Contracts

    Create contracts with a location picked on a map, then follow their tasks on a drag-and-drop kanban board.

  • Time tracking

    Start a timer on a task and check out with the user's geolocation, backed by work sessions and daily reports.

  • Discussions

    Team discussions inside each organization, responsive on mobile and tablet.

  • Accounts

    Sign-up and sign-in by email with password or one-time code, password reset, and profile, security and language settings.

Technical approach

  1. Server state with TanStack Query

    Query keys are scoped by organization, mutations update the UI optimistically, and a paginating hook works around the API's 100-item limit.

  2. Server-side authentication

    Tokens live in cookies set by server actions. Server components guard the dashboard and organization routes and keep signed-in users out of the auth pages.

  3. Typed API layer

    One Axios service per domain (activities, contracts, daily reports, comments, check-ins, work sessions), typed end to end with TypeScript and Zod.

  4. Role-based permissions

    An owner, admin and member hierarchy decides in one place who can edit, delete or change the role of another member.

  5. Internationalization

    French and English with next-intl, including translated Zod validation messages.

  6. Tooling

    Biome for linting and formatting, and a GitHub Actions workflow that builds and type-checks every change.

What I built

  • Set up the Next.js/TypeScript front end from scratch (Tailwind CSS, Biome, TanStack Query, Zustand) and its GitHub Actions CI.
  • Built the calendar and agenda (day, week and month views, event creation, activity detail page, CSV/PDF export) and wired them to the activity API with optimistic updates.
  • Implemented server-side authentication with cookie-stored tokens and protected routes.
  • Built the contracts module (map location picker, drag-and-drop task board), member management with invitations and QR-code joining, and the discussions module.
  • Wrote the typed API services for activities, contracts, daily reports, comments, check-ins and work sessions, and the time tracking flow with geolocated check-out.
  • Contributed to the French/English translations, positions management and role-based permissions.

Built with

Framework
  • Next.js
  • React
  • TypeScript
UI
  • Tailwind CSS
  • Radix UI
  • dnd kit
Data
  • TanStack Query
  • Zustand
  • Axios
  • REST APIs
Forms
  • React Hook Form
  • Zod
Maps
  • MapLibre
  • Leaflet
i18n
  • next-intl
Tooling
  • Biome
  • GitHub Actions