Damien Coles 1324f9259f public-ready-init

2026-01-26 11:28:04 -05:00

4.3 KiB

Raw Blame History

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

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.

4.3 KiB Raw Blame History