Een moderne, Interactieve agenda-app voor studenten
GLR Agenda is een moderne, intuΓ―tieve mobiele applicatie ontworpen voor studenten om hun rooster en agenda eenvoudig te beheren. Met een stijlvolle zwart-groene interface en gebruiksvriendelijke functionaliteiten helpt de app je georganiseerd te blijven.
Live demo van de GLR Agenda App in actie
- π Weekoverzicht: Bekijk je rooster per dag met een elegante datumkiezer
- β Handmatig toevoegen: Voeg eenvoudig lessen, opdrachten, tentamens en afspraken toe
- ποΈ CategorieΓ«n: Onderscheid verschillende soorten evenementen met kleurcodering
- πΎ Lokale opslag: Al je gegevens worden veilig lokaal opgeslagen
- π Dark theme: Moderne donkere interface die prettig is voor de ogen
- π Statistieken: Overzicht van totaal aantal items en aankomende evenementen
- Node.js (versie 18 of hoger)
- npm of yarn
- Expo CLI
- Expo Go app op je telefoon (optioneel)
-
Clone de repository
git clone https://github.com/Leonwijng/GLR-Agenda.git cd glragenda -
Installeer dependencies
npm install
-
Start de development server
npx expo start
-
Open de app
- iOS Simulator: Druk op
i in de terminal - Android Emulator: Druk op
ain de terminal - Fysiek apparaat: Scan de QR-code met de Expo Go app
- iOS Simulator: Druk op
glragenda/
βββ app/ # Hoofdapp schermen (Expo Router)
β βββ _layout.tsx # Root layout met splash screen
β βββ index.tsx # Hoofdpagina
β βββ +not-found.tsx # 404 pagina
βββ components/ # Herbruikbare componenten
β βββ AgendaItem.tsx # Agenda item component
β βββ DatePicker.tsx # Datumkiezer component
β βββ AddItemModal.tsx # Modal voor nieuwe items
β βββ SplashScreen.tsx # Laadscherm
βββ assets/ # Statische bestanden
β βββ images/
β β βββ GLRLOGO.png # GLR logo
β βββ fonts/
β βββ SpaceMono-Regular.ttf
βββ constants/ # App constanten
β βββ Colors.ts # Kleurendefinities
βββ hooks/ # Custom React hooks
βββ styles/ # Globale styling
- Primair Groen:
#22c55e- GLR merkkleur voor accent elementen - Achtergrond:
#000000- Hoofdachtergrond voor modern uiterlijk - Surface:
#1f2937- Kaartachtergronden en panels - Tekst: Wit/grijs varianten voor hiΓ«rarchie en leesbaarheid
- SplashScreen: Geanimeerd laadscherm met GLR logo
- AgendaItem: Moderne kaarten met statusbadges en pictogrammen
- DatePicker: Horizontale weekweergave met vandaag highlighting
- AddItemModal: Stijlvolle modal voor het toevoegen van evenementen
| Technologie | Versie | Beschrijving |
|---|---|---|
| React Native | 0.79.4 | Cross-platform mobiele ontwikkeling |
| Expo | ~53.0.12 | Ontwikkelplatform en tools |
| TypeScript | ~5.8.3 | Type-veilige ontwikkeling |
| NativeWind | ^4.1.23 | Tailwind CSS voor React Native |
| Expo Router | ~5.1.0 | Bestandsgebaseerde routing |
| AsyncStorage | 2.1.2 | Lokale data opslag |
- Dagweergave: Bekijk al je evenementen voor een specifieke dag
- Weeknavigatie: Scroll door de komende 7 dagen
- Tijdsortering: Evenementen automatisch gesorteerd op tijd
- Verschillende types: Les, Opdracht, Tentamen, Afspraak
- Verplichte velden: Titel, Vak, Tijd
- Optionele velden: Locatie
- Kleurcodering: Elk type heeft een unieke kleur
- π Les (Groen): Reguliere lessen en colleges
- π Opdracht (Geel): Inleverdatums en deadlines
- π Tentamen (Rood): Toetsen en examens
- π₯ Afspraak (Blauw): Meetings en besprekingen
- Totaal items: Overzicht van alle agenda items
- Aankomende: Aantal toekomstige evenementen
- Lege staat: Vriendelijke boodschap wanneer er geen items zijn
# Start development server
npx expo start
# Start voor Android
npx expo start --android
# Start voor iOS
npx expo start --ios
# Start voor web
npx expo start --web
# Lint code
npm run lint
# Reset project
npm run reset-project- ESLint: Geautomatiseerde code kwaliteitscontrole
- TypeScript: Strikte type checking
- Prettier: Consistente code formatting (aanbevolen)
npx expo install --fix
npx eas build --profile development --platform ios
npx eas build --profile development --platform androidnpx eas build --profile production --platform allGemaakt met β€οΈ voor GLR studenten
Β© 2025 GLR Agenda App. Alle rechten voorbehouden.