Project

Botje / Family Hub

Een eigen webapplicatie rond gezinsplanning en automatisatie, met aandacht voor security, configuratie en integraties.

Overzicht

Botje / Family Hub is een eigen webapplicatie rond gezinsplanning en automatisatie. Het project focust op betrouwbaarheid, duidelijke structuur, veilige configuratie en integratie met externe services. De applicatie simuleert een realistische productieomgeving waarin planning, notificaties en synchronisatie centraal staan.

Context

- Gezinsgerichte planning (family hub concept) - Meerdere gebruikers en contexten - Automatisatie van terugkerende taken - Integratie met externe APIs (o.a. Google Calendar) Doel: een stabiele en onderhoudbare webapplicatie met aandacht voor security, configuratie en uitbreidbaarheid.

Wat ik heb opgezet

Applicatiestructuur

- Next.js met App Router - Duidelijke scheiding via route groups - Herbruikbare componenten en logische mappenstructuur

Data & authenticatie

- Supabase als backend (database + authentication) - Structuur per gezin / context - Dataconsistentie en server-side validatie

Google Calendar integratie

- Integratie via Google Calendar API - Gebruik van service accounts - Automatisch aanmaken en synchroniseren van kalenderitems en reminders

Configuratie & secrets

- Geen hardcoded secrets - Environment variables via: - .env.local (lokaal) - cloud environment settings - Duidelijke scheiding tussen test- en productieconfiguratie

Security & betrouwbaarheid

- Secrets en credentials nooit in frontend code - Bewuste keuzes rond permissions en API scopes - Correct omgaan met service account beperkingen - Stabiliteit en voorspelbaarheid boven snelle workarounds

Troubleshooting & leerpunten

- Oplossen van issues rond: - ontbrekende of foutieve environment variables - Google Calendar permissions en attendees - Next.js routing en duplicaten - Inzicht opgedaan in: - cloud-configuratie - service account beperkingen - reproduceerbare fixes en versiebeheer

Wat dit project aantoont

- Moderne webontwikkeling met Next.js - API-integratie in een realistische context - Security-bewust werken - Probleemoplossend vermogen bij niet-triviale issues - Gestructureerde en professionele aanpak

Gebruikte technologieën

Next.js (App Router) Supabase (database & authentication) Google Calendar API JavaScript / TypeScript Environment variables & cloud configuration

Screenshots

Botje - Dashboard — **Dashboard**
Startpagina met modules en status-overzicht (dark/light).

Botje - Agenda — **Gezinsagenda**
Overzicht van gedeelde en persoonlijke events + sync met Google Calendar.

Botje - Bestanden — **Bestanden**
OneDrive-integratie voor gedeelde mappen + upload/rename/delete.

Botje - Boodschappen — **Boodschappen**
Lijsten per winkel met snelle afvink-flow in de winkel.

Botje - Klantenkaarten — **Klantenkaarten**
QR-codes fullscreen scanbaar aan de kassa (mobile-first).

Botje - QR modal — **QR modal**
Kaart tonen/verwijden met duidelijke UI en veilige opslag.

Botje - Gezinskluis — **Gezinskluis**
Veilige opslag van gevoelige documenten en wachtwoorden.

Botje - Verzekeringen — **Verzekeringen**
Overzicht van verzekeringspolissen met details en vervaldata.

Botje - Chatbot — **Botje Chat**
AI-chatbot voor natuurlijke taalinput en automatisatie.

Technische highlights (per functionaliteit)

Dashboard & modules

- Modulaire UI-components per feature (agenda, bestanden, boodschappen). - Consistente styling met ondersteuning voor dark/light mode. - Ontworpen met focus op eenvoud voor niet-technische gebruikers.

Gezinsagenda

- Integratie met Google Calendar via service accounts. - Duidelijke scheiding tussen gedeelde en persoonlijke events. - Betrouwbare synchronisatie met gecontroleerde foutafhandeling.

Boodschappen & klantenkaarten

- Data-structuur per winkel en lijst. - Mobile-first gebruik in de winkel. - QR-codes fullscreen scanbaar aan de kassa.

Bestandenbeheer

- OneDrive-integratie voor gedeelde opslag. - Basis bestandsbeheer (upload, mappen, verwijderen). - Geen secrets of tokens in de client.

Gezinskluis

- Veilige opslag van gevoelige documenten en wachtwoorden. - Encryptie en toegangscontrole per gebruiker. - Categorisatie en snel zoeken van documenten.

Verzekeringen

- Centraal overzicht van alle verzekeringspolissen. - Automatische herinneringen bij vervaldata. - Documenten koppelen aan specifieke verzekeringen.

Chat & automatisatie (Botje)

- Natuurlijke taalinput om acties te triggeren. - AI-gestuurde assistent voor dagelijkse taken. - Server-side validatie en guardrails. - Transparante feedback richting gebruiker.