nexus-5-frontend-2/README.md

Nexus 5 Frontend 2 - Team App

Streamlined team-focused mobile application for the Nexus 5 platform, designed for field operations and simplified workflows.

Overview

This is the second iteration of the Nexus 5 frontend, built as a lightweight team-focused application that abstracts functionality from the admin dashboard (frontend-1). It's optimized for mobile devices and field workers who need quick access to their assigned work.

Tech Stack

• SvelteKit 5 - Latest SvelteKit with Svelte 5 runes
• Houdini - Type-safe GraphQL client
• Tailwind CSS v4 - Next-generation Tailwind
• TypeScript - Strict mode enabled
• Node adapter - Production deployment

Evolution

Feature	nexus-5-frontend-1	nexus-5-frontend-2
Focus	Admin dashboard	Team mobile app
Complexity	Comprehensive	Streamlined
Target Users	Admins, Team Leaders	Field technicians
Svelte Version	Svelte 4	Svelte 5 (runes)
Tailwind	v3	v4
UI Library	Flowbite	Custom components

Features

• Service List - View and manage assigned services
• Project List - Track assigned projects
• Work Sessions - Open, manage, and close work sessions
• Task Completion - Mark tasks complete during sessions
• Photo/Video Upload - Document work with media
• Session Notes - Add notes during work sessions
• Reports - View and access reports
• Messages - Team communication
• Notifications - Real-time notifications
• Profile - Personal profile management

Getting Started

Prerequisites

• Node.js 18+
• Access to Nexus 5 GraphQL API

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run check

Docker Deployment

# Build and run with docker-compose
docker-compose up --build

# Run in detached mode
docker-compose up -d --build

Environment Variables

See .env.example for required configuration.

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── entity/         # Entity display components
│   │   ├── layout/         # Layout components
│   │   └── session/        # Session management
│   ├── graphql/
│   │   ├── mutations/      # GraphQL mutations
│   │   └── queries/        # GraphQL queries
│   ├── stores/             # Svelte stores
│   └── utils/              # Utility functions
└── routes/
    ├── accounts/           # Account viewing
    ├── messages/           # Team messages
    ├── notifications/      # Notifications
    ├── profile/            # User profile
    ├── projects/           # Project list
    ├── reports/            # Reports
    ├── services/           # Service list
    └── sessions/           # Work sessions

Key Patterns

Svelte 5 Runes

Uses modern Svelte 5 syntax with runes:

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log('Count changed:', count);
  });
</script>

Mobile-First Design

Optimized for mobile devices with responsive layouts:

<!-- Mobile cards -->
<div class="space-y-4 md:hidden">
  {#each items as item}
    <Card {item} />
  {/each}
</div>

<!-- Desktop table -->
<div class="hidden md:block">
  <Table {items} />
</div>

Tab-Based Pagination

Services and projects use tab-based organization with load-more pagination:

• Scheduled - Upcoming work
• In Progress - Active work
• Completed - Finished work

Comparison to Frontend-1

What's Different

• No dashboard - Direct access to work items
• Simplified navigation - Fewer menu options
• Mobile-optimized - Touch-friendly UI
• Reduced features - Only what field workers need

Shared Patterns

• GraphQL queries and data models
• Session management workflows
• Entity relationships

Related Repositories

• nexus-5 - Django GraphQL API backend
• nexus-5-auth - Ory Kratos/Oathkeeper authentication
• nexus-5-frontend-1 - Admin dashboard
• nexus-5-frontend-3 - Full-featured portal

License

MIT License - See LICENSE file for details.