Tech stack🛠️
Tech stack explained used for Listral
🛠️ Tech Stack
React (met TypeScript)
De basis van de frontend.
React zorgt voor de component-gebaseerde structuur en herbruikbare UI-onderdelen.
TypeScript voegt types toe aan React props, state en API responses → voorkomt bugs en maakt de code voorspelbaarder.
In Listral gebruik je React/TS bijvoorbeeld voor:
Het renderen van je media-lijsten (games, films, boeken, series).
Het beheren van tabbladen en filters.
Sterke typing van database-objecten (bijv.
MediaItem,User,WishlistItem).
TailwindCSS
Utility-first CSS framework → snelle en consistente styling zonder aparte CSS-bestanden.
Voordelen voor Listral:
Responsive design: out-of-the-box ondersteuning voor mobiel, tablet en desktop.
Consistentie: spacing, kleuren en typografie zijn gecentraliseerd.
Snelle iteratie: design tweaks direct in je JSX/TSX.
shadcn/ui
Bovenop Radix UI gebouwd, met Tailwind als stylinglaag.
Geeft je toegankelijke, modulair uitbreidbare componenten.
In Listral erg nuttig voor:
Tabs (Games / Films / Series / Boeken).
Dialogs & Modals (media toevoegen, details bewerken).
Toasts (feedback bij wishlist-acties).
Dropdowns & Selects (filters, sorteeropties).
Supabase (PostgreSQL + Auth + Storage)
Supabase biedt een managed PostgreSQL-database met extra’s als authenticatie en file storage.
In Listral gebruik je Supabase voor:
Database (Postgres):
Relationele tabellen voor
users,media,categories,wishlists.Perfect voor many-to-many relaties (één user ↔ meerdere wishlist items).
Authenticatie: gebruikers loggen in via Google of e-mail/password.
Row Level Security (RLS): users zien alleen hun eigen data.
Storage (optioneel): covers of icons van media opslaan.
Node.js
De runtime die alles samenbrengt.
Draait de React-app tijdens development Ă©n bouwt je productie-bundels.
Wordt ook gebruikt om scripts, server-routes of API-calls (naar Supabase of externe APIs) uit te voeren.
Voordeel: Ă©Ă©n taal (TypeScript/JavaScript) voor frontend Ă©n backend.
đź”— Samenvatting
De Listral stack combineert:
React + TypeScript → moderne frontend, type-safe en component-gedreven.
TailwindCSS + shadcn/ui → consistente, toegankelijke en snel te bouwen UI.
Supabase (Postgres, Auth, Storage) → complete backend zonder eigen infra.
Node.js → runtime voor development en backend-integraties.
Resultaat: een volledige full-stack setup die schaalbaar, overzichtelijk en developer-vriendelijk is.
Laatst bijgewerkt