Visteller- Webapp voor het bijhouden van vistellingen onder de vriendengroep
VisTeller is een mobiele webapp die ik heb ontwikkeld om visvangsten binnen vriendengroepen eenvoudig bij te houden en te vergelijken. De app is volledig gericht op gebruiksgemak op telefoons en voelt aan als een native applicatie.
Gebruikers kunnen zonder wachtwoord inloggen via een gebruikersnaam en direct deelnemen aan groepen. Binnen deze groepen worden vangsten toegevoegd met foto, vissoort en automatisch berekende punten. Alle resultaten worden realtime verwerkt in een overzichtelijk leaderboard.
De app bevat daarnaast sociale en competitieve elementen, zoals het bekijken van elkaars vangsten in een feed-achtige weergave en het delen van groepen via uitnodigingslinks. Foto’s worden automatisch gecomprimeerd naar WebP om opslag en laadtijden te optimaliseren.
Voor beheer heb ik een admin dashboard ontwikkeld waarin alle vangsten overzichtelijk worden weergegeven en beheerd kunnen worden. Hierbij is ook rekening gehouden met filtering, zoeken en moderatie.
Technisch is de applicatie gebouwd met moderne webtechnologieën en maakt gebruik van een cloud database voor opslag van gebruikers, groepen en vangsten.
Belangrijkste features:
- 📱 Mobile-first design (PWA-achtig)
- 👤 Inloggen zonder wachtwoord (username-based)
- 👥 Groepen aanmaken en joinen
- 🏆 Leaderboard met puntensysteem
- 📸 Foto upload met automatische WebP compressie
- 🔗 Invite links voor groepen
- 🔍 Admin dashboard met zoek- en filterfunctionaliteit
- ⚡ Snelle en responsive UI
Tech stack:
- React (TypeScript + Vite)
- Supabase (database + storage)
- React Query (data fetching)
- Tailwind CSS (styling)
Wat dit project laat zien:
Met VisTeller laat ik zien dat ik in staat ben om:
- een complete full-stack webapp te bouwen
- UX/UI te optimaliseren voor mobiel gebruik
- performance en opslag efficiënt te beheren
- praktische oplossingen te ontwikkelen voor echte gebruikers