ID: S202601252319
Status: school
Tags: hand-in, documentation, test plan, Requirements, User Story Format
avans 2-1 POC document
User stories and requirements
User stories
Epic 1: Subject Browsing & Filtering
- As a student, I want to see a list of available subjects so that I can explore my options.
- As a student, I want to filter subjects by study points (15 or 30 EC) so that I can find subjects that fit my schedule.
- As a student, I want to filter subjects by level (NLQF-5 or NLQF-6) so that I only see suitable subjects.
- As a student, I want to filter subjects by tag so that I can focus on my interests.
- As a student, I want to see the list of available tags so that I know what I can filter on.
Epic 2: Subject Detail Page
- As a student, I want to see detailed information about a subject, including description, EC, and type, so that I can make an informed choice.
- As a student, I want to add or remove subjects from my favorites from the detail page so that I can save subjects Iām interested in.
- As a student, I want a āmore infoā action on the subject page so that I can access additional details or external links.
Epic 3: Favorites
- As a student, I want to save subjects as favorites so that I can easily access them later.
- As a student, I want to remove subjects from my favorites so that I can keep the list organized.
Epic 4: Recommendations
- As a student, I want to see recommended subjects based on my study program so that I can discover subjects I might like.
Epic 5: Accessibility & Inclusivity
- As a student, I want to toggle the app language (NL/EN) so that I can use it in my preferred language.
Epic 6: PWA Feature
- As a student, I want to install the app on my phone so that I can access it like a native app.
Epic 7: Security & Authentication
- As a user, I want secure communication between the frontend and backend so that my data is protected.
- As a user, I want failed requests to be handled gracefully so that I understand what went wrong.
Epic 8: User Registration and Login
- As a student, I want to register for an account so that I can access personalized features.
- As a teacher, I want to register for an account so that I can manage subjects and translations.
- As a student, I want to log into my account so that I can access my favorites and recommendations.
- As a teacher, I want to log into my account so that I can manage subjects and translations.
- As a user, I want to stay logged in across browser sessions so that I donāt have to log in repeatedly.
- As a user, I want to log out of my account so that I can secure my session.
- As a user, I want to see clear error messages if login fails so that I can correct any issues.
Epic 9: Subject Management
- As a teacher, I want to add new subjects so that I can manage the curriculum.
- As a teacher, I want to edit existing subjects so that I can update their details.
- As a teacher, I want to delete subjects so that I can remove outdated or irrelevant ones.
Epic 10: Translation Management
- As a teacher, I want a page to edit translations of subjects so that they are available in multiple languages.
- As a teacher, I want a page to edit translations of the website UI so that it is accessible to users in different languages.
- As a teacher, I want to see all unused translations so that I can assess database waste.
- As a teacher, I want to delete unused translations so that I can clean up database space.
Epic 11: Study Selection
- As a student, I want to select my study so that the app is tailored to my academic program.
- As a teacher, I want to add new studies so that I can manage the curriculum.
- As a teacher, I want to edit and delete studies so that I can keep the list up to date.
- As a student, I want to view the study I am enrolled in so that I can verify it is correct.
Non-functional requirements
Security and privacy
- Communication between client and server must be secured (e.g., HTTPS, JWT-based auth).
- No secrets or API keys may be hardcoded in the codebase; secrets must be stored in secure configuration (e.g., environment variables or secret manager).
- Authentication tokens must be stored and transmitted securely, following best practices to prevent XSS/CSRF.
Performance and reliability
- Subject list and filters should respond within acceptable latency (e.g., initial load under 2 seconds on a typical 4G connection).
- The app should gracefully handle network failures with clear, actionable error messages and retry options where appropriate.
Usability and accessibility
- The application must support language switching between NL and EN throughout the UI and content where translations exist.
Platform and compatibility
- The application must support installation as a Progressive Web App, including a manifest and service worker for offline caching of critical assets.
- The app should function on modern desktop and mobile browsers
Maintainability and extensibility
- Backend and frontend implementations should be modular to support future recommendation algorithms beyond the mock/static approach.
Data integrity and consistency
- CRUD operations for subjects, translations, and studies must validate required fields and enforce referential integrity.
- Deleting entities (e.g., subjects, studies, translations) should not leave orphaned references; provide safeguards or cascades.
Auditability and logging
- Authentication and administrative actions (e.g., create/edit/delete subjects, translations, studies) should be logged for audit purposes, respecting privacy laws.
Functional requirements
Browsing and filtering
- The system shall provide endpoints and UI to list subjects and filter by EC (15, 30), level (NLQF-5, NLQF-6), and tags.
- The system shall expose a list of available tags for filtering.
Subject details and actions
- The system shall display subject details: description, EC, and type.
- The system shall support a āmore infoā field or link for additional details.
- The system shall allow adding/removing a subject to/from favorites from both list and detail views.
Favorites
- The system shall persist a userās favorites and allow retrieval and removal.
Recommendations
- The system shall show recommendations based on the userās selected study using a predefined static/mock algorithm.
- The system shall allow configuration of recommended subjects per study.
Localization
- The system shall store and serve translations for subjects and UI strings in NL and EN.
- The system shall allow editing and deleting translations, and listing unused ones.
Authentication and session
- The system shall support user registration and login for students and teachers.
- The system shall maintain session continuity across browser sessions and support logout.
- Failed authentication shall return clear, localized error messages.
Subject and study management
- The system shall support create, read, update, delete (CRUD) for subjects and studies with appropriate role-based access (teacher).
- The system shall prevent deletion that would violate referential integrity or provide safe cascades.
PWA
- The system shall include a web app manifest and service worker to enable installation and basic offline capability for critical assets.
Testing plan
Login Flow Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 8: User Registration and Login - As a student, I want to log into my account so that I can access my favorites and recommendations. Functional: The system shall support user registration and login for students and teachers. |
| Expected to be done beforehand | User is registered and has valid credentials. App is running and accessible. |
| Steps | 1. Visit the login page. 2. Check that username and password fields are visible and required. 3. Enter valid credentials. (provided) 4. Click the login/submit button. |
| Expected Outcome | User is logged in and redirected to their dashboard or home page. |
| Test Result | The fields are required, and you are able to login. |
Authorization and Route Protection Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 7: Security & Authentication Epic 8: User Registration and Login Functional: The system shall maintain session continuity and support logout. Protected routes require authentication. |
| Expected to be done beforehand | App is running. No user is authenticated at start. |
| Steps | 1. Attempt to visit protected routes without authentication: Management, translation management, module management, user profile, reccomended page, favourites page, all modules page and specific module page 2. Authenticate as student and visit protected routes. 3. Attempt to visit teacher-only routes as unauthenticated and as student: Management, translation management, module management 4. Authenticate as teacher and visit teacher-only routes. |
| Expected Outcome | Unauthenticated users are redirected to login. Authenticated users access allowed routes based on their role. |
| Test Result | When not logged in, it forces you to the login, when user, forced to profile page. so it works. |
Home Page Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 1: Subject Browsing & Filtering Epic 5: Accessibility & Inclusivity Functional: The system shall provide endpoints and UI to list subjects and filter. |
| Expected to be done beforehand | App is running and accessible. |
| Steps | 1. Visit the home page. 2. Check that the home page loads and displays the main heading. 3. Verify navigation menu and language switcher are present. 4. switch language |
| Expected Outcome | Home page loads successfully with navigation and language switcher visible, and switching the language works |
| Test Result | it works |
Navigation Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 1: Subject Browsing & Filtering Epic 5: Accessibility & Inclusivity Functional: The system shall expose a list of available tags for filtering. |
| Expected to be done beforehand | App is running and accessible. |
| Steps | 1. Use navigation menu to go to About page. 2. Use navigation to go to Login page. 3. Visit an invalid route and check for 404 page. 4. Navigate back to home from any page. |
| Expected Outcome | Navigation works as expected, invalid routes show 404, and user can return home. |
| Test Result | works |
PWA Features Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 6: PWA Feature Functional: The system shall include a web app manifest and service worker for offline capability. |
| Expected to be done beforehand | App is running and accessible. |
| Steps | 1. Request manifest.json and check for valid response. 2. navigate to home 3. Click install on the PWA |
| Expected Outcome | Manifest is visable and PWA is installable. |
| Test Result | Only works on chrome, not on firefox |
Teacher Tools Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 9: Subject Management Epic 10: Translation Management Functional: The system shall support CRUD for subjects and translations with role-based access. |
| Expected to be done beforehand | App is running. User is unauthenticated, student, teacher, or admin. |
| Steps | 1. Visit management page unauthenticated. 2. Authenticate as teacher and visit management page. 3. Navigate to translation management 4. Change translation about.hero.title |
| Expected Outcome | Only teachers can access management page. Students are redirected to dashboard or login. When changing the translation it visually changes in the list, but not in the header because of caching. |
| Test Result | correct. |
Translation Features Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 5: Accessibility & Inclusivity Epic 10: Translation Management Functional: The application must support language switching and allow editing/deleting translations. |
| Expected to be done beforehand | App is running and accessible. |
| Steps | 1. Check default language is English. 2. Switch language to Dutch. 3. Switch back to English. 4. Verify language persists after navigation and reload. |
| Expected Outcome | Language switcher works and persists selection across navigation and reloads. |
| Test Result | correct |
Study Selection and Recommendations Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 4: Recommendations; Epic 11: Study Selection Functional: The system shall show recommendations based on the userās selected study and allow configuration of recommended subjects per study. |
| Expected to be done beforehand | App is running. User is registered and logged in as a student. |
| Steps | 1. Navigate to the user profile/dashboard page. 2. Select Study A from the study selector and save/apply changes. 3. Navigate to the Recommended Subjects page. 4. Observe and note the list of recommended subjects for Study A. 5. Navigate back to the profile/dashboard page. 6. Change the selected study to Study B and save/apply changes. 7. Navigate again to the Recommended Subjects page. 8. Compare the list of recommendations with the list from Step 4. |
| Expected Outcome | After selecting Study A, the recommendations page shows the Study A-specific recommendation list. After switching to Study B, the recommendations change accordingly and differ from Study Aās list. |
| Test Result | yep, the list changes. |
Favorite from Module Detail Test Plan
| Item | Description |
|---|---|
| Linked User Story / Epic / Requirement | Epic 1: Subject Browsing & Filtering; Epic 2: Subject Detail Page; Epic 3: Favorites Functional: The system shall allow adding/removing a subject to/from favorites from both list and detail views and persist favorites. |
| Expected to be done beforehand | App is running. User is registered and logged in as a student. At least one subject/module exists and is not already in favorites. |
| Steps | 1. Navigate to the All Subjects/Modules page. 2. Select a specific module to view its detail page. 3. On the detail page, click the Favorite (Add to Favorites) action/button. 4. Navigate to the Favorites page/list. |
| Expected Outcome | The selected module appears in the Favorites list. |
| Test Result | yep |
Research Bronnen
Strapi overview
Korte, neutrale samenvatting van meerdere surveys. Link: https://strapi.io/blog/frameworks-for-javascript-app-developlemt
FrontendTools bundle size gids
Concrete groottes van bundles. Link: https://www.frontendtools.tech/blog/reduce-javascript-bundle-size-2025
FrontendTools benchmark
Vergelijking m.b.v. Google Lighthouse scores en js-framework-benchmark. Link: https://www.frontendtools.tech/blog/best-frontend-frameworks-2025-comparison
NestJS documentatie
Link: https://docs.nestjs.com/ Link: https://docs.nestjs.com/techniques/mongodb
NPMTrends
Zelf grafieken genereren voor downloads/adoptie zowel frontend als backend. Link: https://npmtrends.com/
Google trends
Ik heb google trends gebruikt om te kijken hoe vaak iets voorkomt. Dit was volgensmij het eerste wat ik had opgezocht LOL. Voorbeeld plaatje:
Theo.gg
Theo.gg is een youtuber die ik kijk over voortgang van development. ook hij heeft hier videos over gemaakt die ik gekeken heb en dus wss wel bias hebben geintroduseert. Video link 1: https://www.youtube.com/watch?v=TKcetuFoYU0 Video link 2: https://www.youtube.com/watch?v=WJRf7dh5Zws Video link 3: https://www.youtube.com/watch?v=O-EWIlZW0mM
DEV.to
benchmarks en use-cases Link: https://dev.to/bilelsalemdev/nestjs-vs-expressjs-when-to-use-each-2l73
Stackoverflow
Ik heb de survey van stackoverflow gebruikt als informatie. Dit laat zien wat developers het meest gebruiken (volgens de survey ofc)
State of javascript survey
Voor dit onderzoek heb ik de state of javascript servey gebruikt. Dit was de 2024 versie want 2025 was nog niet uit toen.
Medium
Vergelijking met focus op maintainability, performance en features Link: https://medium.com/@pravir.raghu/introduction-78775e1c5e47