Kylrix Flow

Kylrix Flow is the orchestration layer for Kylrix’s productivity suite. It blends a premium Next.js + Material UI frontend with Appwrite-backed state to deliver task, calendar, and event workflows that feel cohesive across the entire experience.

What Kylrix Flow Does

Kylrix Flow is an AI-powered productivity app that unifies your tasks, schedule, and shared events so you can see everything that matters in a single pane. It automatically highlights key information—due dates, attendance status, availability—so you understand what’s next without jumping between tools. The result is a more confident, deliberate daily flow where priorities stay visible and nothing important is overlooked.

Highlights

• Context-driven state (TaskContext, AuthContext, LayoutContext) keeps tasks, authentication, and the secondary sidebar synchronized across the UI.
• Appwrite-first operations live in lib/kylrixflow.ts, using auto-generated types (types/kylrixflow.ts) for typed CRUD against Tasks, Events, and Guests.
• Premium UI with glassmorphism, cybernetic teal accents (#00F0FF), and a responsive layout that hides the primary sidebar on /events/[eventId] while exposing the secondary drawer.
• Secondary sidebar surfaces task or event details no matter where the item is clicked (list, calendar, events grid).
• Public Events experience: /events/{eventId} renders a dedicated landing page with registration actions (authenticated) and autogenerated hazard-gradient covers when no image exists.
• Auth overlay (using AUTH_SUBDOMAIN + AUTH_DOMAIN) blurs the app when unauthenticated and opens the Appwrite login window, auto-detecting session changes.

Tech Stack

• Next.js 16 (App Router + Server Components)
• Material UI 7.3.5 for theming, components, and responsive layouts
• Appwrite SDK + auto-generated TypeScript tables
• date-fns for date formatting
• Custom utilities (e.g., utils/patternGenerator.ts) for deterministic gradients

Getting Started

1. Install dependencies

   pnpm install

2. Copy the sample env

   cp env.sample .env.local

3. Fill in Appwrite values
   • NEXT_PUBLIC_APPWRITE_ENDPOINT
   • NEXT_PUBLIC_APPWRITE_PROJECT
   • NEXT_PUBLIC_APPWRITE_DATABASE
   • NEXT_PUBLIC_APPWRITE_COLLECTION_TASKS, ...EVENTS, ...GUESTS
   • AUTH_SUBDOMAIN and AUTH_DOMAIN for the login overlay
4. Run the dev server

   pnpm dev

5. Open http://localhost:3000 to explore the dashboard, calendar, and event screens.

Useful Scripts

• pnpm dev – start the development server with HMR.
• pnpm build – compile for production (also runs TypeScript checks).
• pnpm lint – run ESLint (if configured later).
• pnpm test – placeholder if tests are added.

Architecture Overview

pages / app/**/*.tsx
└── Layout (AppBar + Sidebar + RightSidebar)

components/
├── layout/         (AppBar, Sidebar, BottomNav, RightSidebar)
├── tasks/          (TaskList, TaskDetails used by RightSidebar)
├── calendar/        (CalendarView that opens TaskDetails)
├── events/          (EventList, EventDetails, dynamic `/events/[eventId]/page`)

context/
├── TaskContext     (state reducer, data loading, actions)
├── AuthContext     (session polling + login overlay)
└── LayoutContext   (secondary sidebar orchestration)

lib/
└── kylrixflow.ts  (Appwrite clients and helpers for each table)

Event Experience

• The public route /events/[eventId] uses server/client logic to fetch events and guest registrations. It gracefully falls back to generated gradients when Appwrite does not supply a cover image.
• Every event card, calendar entry, and task can open the shared secondary sidebar (RightSidebar) with full details plus direct links (Copy link, View event).
• Registration buttons respect authentication: unauthenticated users trigger the overlay, while logged-in users read eventGuests to determine their state.

Authentication Flow

• AuthContext checks for Appwrite sessions on load. If the user is missing, it blurs the UI, opens ${AUTH_SUBDOMAIN}.${AUTH_DOMAIN}/login, and watches for the session to appear before closing the overlay.
• Once authenticated, AuthContext exposes user, logout, and isAuthenticated to components like the AppBar (which now shows initials) and event registration buttons.

Development Tips

• Use the event sidebar copy button to grab shareable links (/events/{eventId}), which can be opened directly for public viewing/registration.
• Generated patterns in utils/patternGenerator.ts keep the visuals consistent even when no cover image exists.
• Run pnpm build before merging to ensure the Appwrite types and Next.js routes compile cleanly.

Contributing

Contributions are welcome—especially around:

• Improving Appwrite integrations (more collections, validation)
• Filling out tests for the contexts and UI flows
• Expanding the calendar view or adding real-time collaboration

Please open a PR with your changes and reference any relevant issues.

---

Stay premium. Let Kylrix Flow orchestrate the rest.