De afgelopen weken heb ik keihard gewerkt aan Xion, mijn eigen projectmanagement platform. Wat begon als een Kanban board met wat basisfunctionaliteit is uitgegroeid tot iets waar ik echt trots op ben. In deze post neem ik je mee door alle grote veranderingen.

Xion is nu een app
De grootste milestone: Xion is nu een Progressive Web App (PWA). Dat betekent dat je op je telefoon of tablet naar Xion gaat, en een melding krijgt: wil je Xion installeren? Een tik en je hebt een volwaardige app op je homescreen, inclusief een eigen splash screen, offline ondersteuning en push notificaties. Het voelt als een native app, maar draait gewoon in de browser.
Op iOS werkt het iets anders. Daar krijg je een instructie om via het deelmenu Zet op beginscherm te kiezen. Niet ideaal, maar Apple blijft Apple.
Onder de motorkap zit een Service Worker die de hele app shell cached. Dat betekent dat CSS, JavaScript en fonts direct laden vanuit de cache. API calls gaan altijd eerst naar het netwerk voor verse data, maar als je offline bent krijg je een nette fallback pagina in plaats van een Chrome-dinosaurus.

Volledig responsive, eindelijk

Laten we eerlijk zijn: Xion op mobiel was niet geweldig. De sidebar dekte alles af, modals waren te klein om in te tikken, en het Kanban board was onbruikbaar op een telefoon. Dat is nu compleet anders.
Er zit nu een uitgebreide mobile.css in het project met vier breakpoints, van grote tablets tot kleine iPhone SE-schermen. De sidebar is nu een overlay met blur-effect, modals schuiven als bottom sheets omhoog vanaf de onderkant van het scherm, en er is een floating action button om snel taken aan te maken.
Het belangrijkste: een vaste navigatiebalk onderaan het scherm. Vijf knoppen (Work, My Tasks, Chat, Docs en Menu) waarmee je direct kunt navigeren zonder de sidebar te openen. Precies zoals je gewend bent van apps als Slack of Trello.

Het drag-and-drop probleem

Op desktop werk je met drie kolommen naast elkaar en sleep je taken van links naar rechts. Op mobiel staan die kolommen onder elkaar. Een taak van Backlog naar Done slepen betekent dan eindeloos scrollen. Daar moest iets beters voor komen.
De oplossing: drie manieren om taken te verplaatsen op mobiel. Je kunt swipen op een taakkaart (zoals een mail wegswipen in Gmail) om verplaatsknoppen te zien. Je kunt de kleine pijltjesknoppen onderaan elke kaart gebruiken voor een snelle tik. Of je houdt een taak lang ingedrukt en kiest uit een popup menu naar welke kolom je wilt verplaatsen. Elke methode geeft een bevestiging met een toast melding, en het bord wordt direct opgeslagen.
Op desktop verandert er niks. Daar werkt drag-and-drop gewoon zoals altijd.

Chrome Extension: taken vanuit elke pagina

Een idee dat ik al langer had: een browser extension waarmee je vanuit elke webpagina snel een taak kunt aanmaken. Ctrl+Shift+X en er verschijnt een popup waar je een titel intypt, een project kiest, en klaar. De extension onthoudt je laatst gebruikte project en kolom, ondersteunt prioriteiten en deadlines, en heeft zelfs een rechtermuisklik-optie om geselecteerde tekst direct als taak toe te voegen.
Het ding staat inmiddels in de test fase op de Chrome Web Store. Edge-gebruikers kunnen hem ook gewoon installeren. De authenticatie werkt via tokens zodat je niet elke keer opnieuw hoeft in te loggen.

Broadcast: van wizard naar Mailchimp-style editor

Het e-mail broadcast systeem heeft een complete redesign gekregen. De oude aanpak was een 5-stappen wizard: ontvangers kiezen, content maken, preview bekijken, inplannen, en dan versturen. Dat voelde log en ouderwets.
Nu werkt het zoals je gewend bent van Mailchimp. Je geeft je campagne een naam en komt op een overzichtspagina met inklapbare secties. To, From, Subject, Send Time, Content, alles op een plek, met een live preview aan de rechterkant. Voor de content kun je kiezen uit een visuele drag-and-drop builder, een HTML editor, of je laat de AI een email schrijven op basis van een prompt.
Daarnaast zijn er acht nieuwe modules geintegreerd: template management, contactbeheer met bulk import, Zapier webhooks, transactionele emails, en meer.

AI Assistent

Xion heeft nu een ingebouwde AI assistent, aangedreven door Claude. Je klikt op de knop in de sidebar en er schuift een chatpaneel open waar je vragen kunt stellen over je taken, projecten en het dashboard. Het systeem slaat je gesprekken op zodat je later kunt terugkomen waar je gebleven was. Op mobiel opent het als een bottom sheet.

Onder de motorkap: security

Niet alles is zichtbaar voor gebruikers. Er is een uitgebreide security audit gedaan van de hele codebase. Daarbij kwamen SQL injection kwetsbaarheden aan het licht in de API, XSS risicos in de chat waar berichten als raw HTML werden gerenderd, en diverse kleinere issues. De bevindingen zijn gedocumenteerd en worden stap voor stap opgelost.

Vier themas

Een leuke toevoeging: Xion ondersteunt nu vier visuele themas. Naast het standaard lichte thema is er een Dark mode (geinspireerd op het ontwerp van nickreur.nl), Nova (een paars-roze gradient) en Forest (diep groen). Alle componenten respecteren de thema-variabelen en er zit een zachte overgang op bij het wisselen.

Wat nu?

De basis staat er. Xion heeft een werkend Kanban board, teamchat, documentbeheer, een beveiligde kluis voor facturen, een compleet broadcast platform, een Chrome extension, een AI assistent, en het is installeerbaar als app op elk apparaat.
De volgende stappen: multi-tenancy zodat meerdere organisaties elk hun eigen omgeving krijgen, een betalingssysteem met Mollie of Stripe voor abonnementen, en uiteindelijk de publieke lancering.

Wordt vervolgd.