Skip to main content

Extended Syllabus - JavaScript

Course: JavaScript
Code: ICD0006
ECTS: 6 (156 student hours)
SIS/ÕIS: JavaScript (ICD0006)
Duration: 16 weeks + 1 extra defense day
Course year: 2nd year
Semester: Spring (4th semester)
Format: Flipped classroom
Students: ~150
TAs: 5
Language: English if any Erasmus/exchange students are enrolled; otherwise Estonian. Q&A Estonian and English
Written language: English (slides, comments, code, etc...)
Contact: 0-3h/week (consultation, demos, defense) + extra day Week 17
Attendance: Not mandatory, but recommended (defense mandatory)
Teacher: Andres Käver
Email: andres.kaver@taltech.ee

Goals (from ÕIS)​

  • To provide intermediate level programming skills in JavaScript.
  • To provide skills for creating web applications using JavaScript technologies.
  • To present and overview of the most common tools and libraries used in JavaScript development.

Learning Outcomes (from ÕIS)​

  • Can solve programming problems using JavaScript.
  • Understands JavaScript’s programming model.
  • Can create Single Page Applications using appropriate framework.
  • Can create build script for the application.
  • Is able to use some other language that transpiles into JavaScript.

General competencies course develops (not graded)​

TalTech General Competencies

1.1 Self-management and learning competence

  • self-management
  • self-regulation
  • learning skills

1.2 Critical thinking

  • critical information acquisition skills
  • analytical skills
  • problem-solving skills
  • argumentation skills
  • self-assessment skills

1.4 Communication competence

  • self-expression in different forms
  • adaptation of communication style
  • giving feedback

Communication 2025/2026 spring​

Pre-Requirements​

Students should have mastered the following before taking this course:

Programming Fundamentals

  • Variables, data types, operators
  • Control structures (if/else, loops, switch)
  • Functions (parameters, return values, scope)
  • Arrays and basic data structures
  • Object-oriented programming basics (classes, objects, inheritance)
  • Debugging techniques

Web Fundamentals

  • HTML5 (semantic elements, forms, tables, multimedia)
  • CSS3 (selectors, box model, flexbox, grid, responsive design, media queries)
  • How HTTP works (request/response cycle, status codes, headers)
  • Client-server architecture concepts
  • Browser developer tools usage

Development Tools

  • Git version control (clone, commit, push, pull, branches, merge, resolving conflicts)
  • Command line/terminal basics (navigation, file operations, running commands)
  • Code editor proficiency (VS Code recommended)
  • Package managers concept (npm will be taught, but understanding the concept helps)

Database Basics

  • Relational database concepts (tables, rows, columns, keys)
  • Basic SQL (SELECT, INSERT, UPDATE, DELETE, JOINs)
  • ER diagrams understanding

Literature​

Recommended books to read:

Workload Distribution​

ComponentHours
Video lectures24
Weekly assignments96
Defense preparation20
Self-study14
Defense2
Contact sessions (practices, Q and A) (16 weeks)optional
Total156

Course Structure Overview​

Core Curriculum (Weeks 1-11)​

WeekTopicAssignmentDefense
1JS Fundamentals + ToolingA1: JS basics-
2Advanced JS + AI Dev ToolsA1 cont.-
3TypeScript BasicsA2: TypeScript-
4TypeScript AdvancedA2 cont.-
5Vue.js FundamentalsA3: Vue appD1 starts (A1+A2)
6Vue.js + State ManagementA3 cont.-
7Node.js + ExpressA4: Backend + Full-stack-
8NestJS + Vue IntegrationA4 cont.-
9NestJS Auth + Frontend AuthA4 cont.-
10Docker + CI/CD + VPS DeploymentA5: DevOps + TestingD2 starts (A3+A4)
11Testing (Unit + Component + E2E)A5 cont.-

Extended Curriculum - depending on class progress (Weeks 12-15)​

WeekTopicAssignmentDefense
12React FundamentalsA6: React app-
13React Advanced + HooksA6 cont.-
14Angular FundamentalsA7: Angular app-
15Angular + Services + RxJSA7 cont.D3 starts (A5+A6+A7+Demo)
16Buffer / Retakes-Retakes
17Extra Defense Day-Final retakes + consultation

Week 17 (Extra Defense Day): One additional contact day after semester end for final retakes and consultation. This replaces a separate theory/practical exam - all assessment is done through assignment defenses.

Teacher discretion: If class progression requires more time on core material, React and/or Angular weeks may be dropped or condensed. Decision made by Week 11 based on defense pass rates and assignment completion.

Backend options for A6/A7: Students concurrently enrolled in "Web Applications with C#" should use their ASP.NET Core backend, reinforcing cross-course learning. Others continue with their NestJS backend from A4. Both options require minimum 10 domain entities + identity entities.

Full Application Requirement: At least ONE framework (Vue, React, or Angular) must have a fully developed application demonstrating the complete domain complexity - not just CRUD views. This includes:

  • Complex UI workflows beyond simple list/detail/edit views
  • Dashboard or summary views with aggregated data
  • Multi-step forms or wizards where appropriate
  • Proper UX patterns (loading states, error handling, confirmations)
  • Business logic reflecting real-world use cases

The full application must be deployed and demonstrated during D3 (final defense). Other framework implementations may be simplified more CRUD-focused versions for comparison purposes.

Note:
All assignments are cumulative, building on previous work. Each defense combines multiple assignments for comprehensive assessment.

Assignment deadlines

  • Code must be committed and pushed to git by 23:59:59 on Thursday evening (the day before Friday defense sessions in weeks 5, 10, and 15), serving as the code-freeze deadline.

How the course works

  • Before session: videos, personal preparation
  • During session: demo/clinic/defense with TA's
  • After session: assignment work + support channels
  • Gitlab, VPS, AI access, etc. provided by course
  • Expected time per week: 8–10h (videos ~1.5h, r&d ~5–8h, optional clinic ~0–3h)

Grading Overview​

Assessment Model: All grading is done through assignment defenses. No separate theory or practical exam.

Defense Points (100 total + 20 bonus)​

DefensePointsPassing (>50%)
D1: JS + TypeScript (A1+A2)25>12.5
D2: Vue + Backend + Full-Stack (A3+A4)35>17.5
D3: DevOps + Testing + React + Angular + Demo (A5+A6+A7)40>20
Total100>50
Bonus points (TA/Teacher discretion)+20
Maximum possible120

D1 points (0–25) = 25 × (0.5×A1 + 0.5×A2)/100
D2 points (0–35) = 35 × (0.5×A3 + 0.5×A4)/100
D3 points (0–40) = 40 × (0.3×A5 + 0.3×A6 + 0.4×A7)/100

Passing Requirements

  • Each defense must achieve >50% of its points to pass
  • Must pass ALL defenses to pass the course
  • Overall course grade based on total points earned

Retake Penalty

  • Retakes only available for failed defenses (<50%)
  • Retake maximum is 75% of original points
  • Two retakes allowed total
  • In case of technical issues (e.g., GitLab or VPS outage) contact teacher

Bonus Points (up to 20) TAs and teacher may award bonus points for:

  • Exceptional code quality or architecture
  • Going beyond requirements
  • Outstanding documentation
  • Creative solutions
  • Helping other students
  • Active participation

Grade Scale​

GradePoints
A (5)90-120
B (4)80-89
C (3)70-79
D (2)60-69
E (1)50-59
F (0)<50 or failed defense

Reduced Curriculum (If React/Angular Dropped)​

If teacher decides to drop extended curriculum, defense points redistribute:

Without Angular (D1 + D2 + partial D3)

  • D1: 30 points
  • D2: 40 points
  • D3 (DevOps + Testing + React + Full App Demo): 30 points
  • Bonus: +20

D1 points (0–30) = 30 × (0.5×A1 + 0.5×A2)/100
D2 points (0–40) = 40 × (0.5×A3 + 0.5×A4)/100
D3 points (0–30) = 30 × (0.4×A5 + 0.6×A6)/100

Without React and Angular (D1 + D2 + simplified D3)

  • D1: 40 points
  • D2: 40 points
  • D3 (DevOps + Testing + Full App Demo): 20 points
  • Bonus: +20

D1 points (0–40) = 40 × (0.5×A1 + 0.5×A2)/100
D2 points (0–40) = 40 × (0.5×A3 + 0.5×A4)/100
D3 points (0–20) = 20 × (A5/100)

Defense Logistics​

Schedule (Full Curriculum)

  • D1 (Week 5): JavaScript + TypeScript - A1 + A2 (25 points)
  • D2 (Week 10): Vue + Backend + Full-Stack - A3 + A4 (35 points)
  • D3 (Week 15): DevOps + Testing + React + Angular + Full App Demo - A5 + A6 + A7 (40 points)
  • Week 16: Buffer / Retakes
  • Week 17: Extra Defense Day (final retakes + consultation)
  • If code is not committed or not working (does not compile or app does not run) - student will get 0 points for the assignment
  • Code defense is done using students own laptop and VPS
  • Defense slots are available for allocation via Moodle or other similar system
  • Students must bring their own laptop to defense
  • 5 TA-s are working in parallel, be prepared to wait for your turn
  • remote defense or off the hours defense are possible, but require prior agreement

Format

  • D1: 15-20 minutes per student
  • D2: 15-25 minutes per student (Vue + Backend + Full-Stack Integration)
  • D3: 15-30 minutes per student (DevOps + Testing + React + Angular + live demo)
  • Student presents work (5-10 min)
  • TA asks questions
  • Points awarded immediately after defense

D3 Full Application Demo Requirements

  • Application must be deployed and accessible
  • Student demonstrates complex workflows live
  • No slides - show the actual working application
  • Be prepared for TA to request specific scenarios

Passing Rules

  • Each defense requires >50% of its points to pass
  • Failing ANY defense = failing the course (regardless of total points)

Retake Policy

  • Only TWO retakes allowed in total (across all defenses)
  • Retake is only possible if defense failed (<50%)
  • Retake penalty: maximum 75% of original points available
  • Retake must be completed before the next defense period starts:
    • D1 retake: must complete before D2 (Week 10)
    • D2 retake: must complete before D3 (Week 15)
    • D3 retake: Week 16 or Week 17 (Extra Defense Day)
  • Students needing retakes should aim for bonus points to compensate for the penalty

For example:
Student passes D1, fails D2, uses first retake, then fails D3, uses the second retake and fails → course fail (because no retake left + must pass all defenses).

Bonus Points (up to 20)

  • Awarded at TA/teacher discretion throughout the course
  • Can be given during any defense or for overall performance
  • Bonus points added to final total after all defenses complete

TA Distribution (5 TAs, ~150 students)

  • 30 students per TA
  • 3 defense sessions per semester + retake slots
  • Defense slots: 12 per TA per defense session day (one session lasts 2-3 weeks)

Students with special needs​

Students with special needs are encouraged to contact the instructor at the beginning of the course. If special needs may affect participation or assessment, the instructor should be informed at the beginning of the course so appropriate accommodation can be arranged. Students may also contact the university support services for accessibility arrangements. All requests will be handled confidentially.

AI Usage Policy​

Encouraged (semi mandatory)

  • Using AI for code generation with proper specifications
  • Learning from AI explanations
  • Debugging with AI assistance
  • Documentation generation

Required documentation

  • Keep prompts/specs used
  • Note what AI got wrong
  • Describe your modifications
  • Alternative solutions considered
  • ERD schemas where applicable

Not acceptable (defense fail)

  • Submitting AI code without actual understanding
  • Copying without verification
  • Unable to explain your codebase without AI assistance

Academic Integrity​

You are allowed to use any source for your work, citations are not mandatory. Wide usage of AI is allowed (expected). Self organized group work is allowed (each student must maintain their own code repository).
You are allowed to use external code (ai, external help, etc.). Personal requirements apply - code in git, vps deployment, ci/cd, etc. Third-party code/assets must follow their license terms.

But you must be able to explain your work/code individually in minute details and defend it in front of the teacher and TA's - without external/ai help.

In brief, the course is characterized by: a learner-centered approach, practical and project-based learning, assessment requiring understanding and justification, conscious and reflected use of AI, and a learning environment that simulates real software development work.

Planned Lectures Content (Prerecorded Videos)​

Week 1: JavaScript Fundamentals + Tooling (3 videos, ~90 min total)​

Video 1.1: Modern JS Environment (30 min)

  • Node.js installation and npm/pnpm
  • VS Code setup, essential extensions
  • ESLint, Prettier configuration
  • Git workflow basics
  • Project structure conventions

Video 1.2: JavaScript Core (35 min)

  • Variables: let, const, var differences
  • Data types, type coercion
  • Functions: declarations, expressions, arrows
  • Closures and scope
  • Array methods: map, filter, reduce, find
  • Object destructuring, spread operator
  • Template literals

Video 1.3: Async JavaScript (25 min)

  • Event loop explanation
  • Callbacks and callback hell
  • Promises: creation, chaining, error handling
  • async/await patterns
  • fetch API basics

Week 2: Advanced JS + AI-Assisted Development (3 videos, ~90 min)​

Video 2.1: Advanced Patterns (30 min)

  • ES modules: import/export
  • Classes and prototypes
  • this binding rules
  • Higher-order functions
  • Currying and partial application

Video 2.2: Spec-Driven Development with AI (35 min)

  • Writing effective specifications
  • AI coding assistants: Cursor, Copilot, Kilo Code
  • Prompt engineering for code generation
  • Iterative refinement workflow
  • Code review of AI output
  • When AI helps vs. when it hurts

Video 2.3: AI Development Workshop (25 min)

  • Live demo: building a utility library with AI
  • Specification → implementation → testing cycle
  • Common pitfalls and hallucinations
  • Documentation generation

Week 3: TypeScript Basics (3 videos, ~90 min)​

Video 3.1: TypeScript Introduction (30 min)

  • Why TypeScript
  • tsconfig.json setup
  • Basic types: string, number, boolean, arrays
  • Type inference
  • Union and intersection types

Video 3.2: Functions and Objects (35 min)

  • Function type annotations
  • Optional and default parameters
  • Interface basics
  • Type aliases vs interfaces
  • Index signatures

Video 3.3: Practical TypeScript (25 min)

  • Generics introduction
  • Utility types: Partial, Required, Pick, Omit
  • Type narrowing and guards
  • Strict mode benefits

Week 4: TypeScript Advanced (3 videos, ~90 min)​

Video 4.1: Advanced Types (30 min)

  • Conditional types
  • Mapped types
  • Template literal types
  • infer keyword
  • Discriminated unions

Video 4.2: TypeScript with DOM and APIs (35 min)

  • DOM type definitions
  • Event handling types
  • Fetch with typed responses
  • Zod for runtime validation

Video 4.3: Project Configuration (25 min)

  • Multi-file projects
  • Declaration files (.d.ts)
  • Path aliases
  • Strict configuration options

Week 5: Vue.js Fundamentals (3 videos, ~90 min)​

Video 5.1: Vue 3 Setup (30 min)

  • Vite + Vue project creation
  • Single File Components anatomy
  • Template syntax: interpolation, directives
  • v-if, v-for, v-bind, v-on
  • Composition API vs Options API

Video 5.2: Reactivity System (35 min)

  • ref() and reactive()
  • computed properties
  • watch and watchEffect
  • Template refs
  • Component props and emits

Video 5.3: Components and Routing (25 min)

  • Component composition
  • Slots: default and named
  • Vue Router basics
  • Route parameters
  • Navigation guards intro

Week 6: Vue.js Advanced (3 videos, ~90 min)​

Video 6.1: State Management with Pinia (30 min)

  • Pinia store creation
  • State, getters, actions
  • Store composition
  • Persisting state

Video 6.2: Forms and Validation (35 min)

  • v-model in depth
  • Form handling patterns
  • VeeValidate or FormKit
  • Custom form components

Video 6.3: Vue Ecosystem (25 min)

  • VueUse composables
  • Component libraries (PrimeVue, Vuetify)
  • API integration patterns
  • Error boundaries

Week 7: Node.js + Express (3 videos, ~90 min)​

Video 7.1: Node.js Fundamentals (30 min)

  • Node.js runtime
  • CommonJS vs ES modules
  • File system operations
  • Environment variables
  • npm scripts

Video 7.2: Express.js (35 min)

  • Express setup with TypeScript
  • Routing
  • Middleware concept
  • Request/response handling
  • Error handling middleware

Video 7.3: REST API Design (25 min)

  • RESTful conventions
  • CRUD operations
  • Request validation (Zod/Joi)
  • Response formatting
  • CORS configuration

Week 8: NestJS + Vue Integration (4 videos, ~120 min)​

Video 8.1: NestJS Introduction (30 min)

  • NestJS philosophy
  • Modules, Controllers, Providers
  • Dependency injection
  • CLI usage

Video 8.2: NestJS Features (30 min)

  • DTOs and validation (class-validator)
  • Pipes and transformations
  • Guards overview
  • Interceptors
  • Exception filters

Video 8.3: Database Integration (25 min)

  • TypeORM or Prisma setup
  • Entity definitions
  • Repository pattern
  • Migrations
  • Relations

Video 8.4: Frontend-Backend Integration (35 min)

  • Connecting Vue to NestJS API
  • Environment configuration (dev/prod URLs)
  • CORS setup and troubleshooting
  • API service architecture in Vue
  • Error handling patterns

Week 9: NestJS Auth + Frontend Auth (4 videos, ~120 min)​

Video 9.1: Authentication Concepts (25 min)

  • Authentication vs Authorization
  • Session-based vs Token-based auth
  • JWT structure: header, payload, signature
  • Access tokens vs Refresh tokens
  • Token lifetimes and security tradeoffs

Video 9.2: JWT Implementation (35 min)

  • Password hashing (bcrypt)
  • NestJS Passport integration
  • JWT strategy setup
  • AuthGuard implementation
  • Protected routes
  • Extracting user from token

Video 9.3: Refresh Token Flow (30 min)

  • Refresh token storage in DB
  • Token rotation strategy
  • Refresh endpoint implementation
  • Logout and token invalidation
  • Security: XSS, CSRF, token theft mitigation

Video 9.4: Vue Auth Integration (30 min)

  • Login/Register UI components
  • Token storage strategies
  • Axios interceptors for auth headers
  • Automatic token refresh on 401
  • Protected route guards in Vue Router
  • State management for auth

Week 10: Docker + CI/CD + VPS Deployment (4 videos, ~120 min)​

Video 10.1: Docker Fundamentals (30 min)

  • Docker concepts and architecture
  • Dockerfile for Node.js apps
  • Multi-stage builds for optimization
  • .dockerignore best practices
  • Development vs production images

Video 10.2: Docker Compose (25 min)

  • docker-compose.yml structure
  • Multi-container setup (frontend + backend + db)
  • Volumes, networking, dependencies
  • Environment variables and secrets
  • Local development workflow

Video 10.3: GitLab CI/CD (35 min)

  • .gitlab-ci.yml structure
  • Stages: lint, build, deploy
  • Variables and secrets management
  • Caching and artifacts
  • Docker image registry
  • Deployment triggers

Video 10.4: VPS Deployment (30 min)

  • SSH key configuration
  • Basic server hardening (ufw, fail2ban)
  • Nginx as reverse proxy
  • SSL with Let's Encrypt (certbot)
  • docker-compose in production
  • Health checks and monitoring basics

Week 11: Testing (4 videos, ~120 min)​

Video 11.1: Unit Testing (30 min)

  • Vitest setup and configuration
  • Test structure: describe, it, expect
  • Mocking functions and modules
  • Testing pure functions
  • Code coverage reports

Video 11.2: Component Testing (30 min)

  • Testing Vue components (@vue/test-utils)
  • Mounting strategies: mount vs shallowMount
  • Testing composables
  • User event simulation
  • Async testing patterns

Video 11.3: API Testing (25 min)

  • Testing NestJS controllers
  • Testing services with mocked repos
  • Supertest for integration tests
  • Test database setup
  • Testing auth flows

Video 11.4: E2E Testing with Playwright (35 min)

  • Playwright setup and configuration
  • Page object pattern
  • Selectors and assertions
  • Testing full auth flow E2E
  • Visual regression testing basics
  • Debugging failed tests

Extended Curriculum​

Week 12: React Fundamentals (3 videos, ~90 min)​

Video 12.1: React Setup and JSX (30 min)

  • Vite + React + TypeScript setup
  • JSX syntax and rules
  • Function components
  • Props and children
  • Conditional rendering
  • Lists and keys

Video 12.2: State with useState (35 min)

  • useState hook in depth
  • State updates and batching
  • Immutable update patterns
  • Event handling
  • Controlled vs uncontrolled components
  • Lifting state up

Video 12.3: React Router (25 min)

  • React Router v6 setup
  • Route configuration
  • useParams, useNavigate, useLocation
  • Nested routes
  • Protected routes pattern

Week 13: React Advanced (3 videos, ~90 min)​

Video 13.1: useEffect and Side Effects (30 min)

  • useEffect hook in depth
  • Dependency array rules
  • Cleanup functions
  • Common pitfalls
  • Data fetching patterns

Video 13.2: Advanced Hooks (35 min)

  • useContext for state sharing
  • useReducer for complex state
  • useMemo and useCallback
  • Custom hooks creation
  • When to use which hook

Video 13.3: React State Management (25 min)

  • Context API patterns and limitations
  • Zustand introduction
  • Comparison with Vue/Pinia
  • Auth integration in React
  • Patterns that transfer from Vue

Week 14: Angular Fundamentals (3 videos, ~90 min)​

Video 14.1: Angular Setup (30 min)

  • Angular CLI and project structure
  • Standalone components (modern Angular)
  • Templates and data binding
  • Directives: ngIf, ngFor, ngClass, ngStyle
  • Event binding and two-way binding

Video 14.2: Components and Communication (35 min)

  • Component lifecycle hooks
  • @Input() and @Output() decorators
  • Content projection (ng-content)
  • ViewChild and ContentChild
  • Component architecture patterns

Video 14.3: Angular Routing (25 min)

  • Router configuration
  • Route parameters and query params
  • Child routes
  • Lazy loading modules
  • Route guards (canActivate, canDeactivate)

Week 15: Angular Advanced (3 videos, ~90 min)​

Video 15.1: Services and Dependency Injection (30 min)

  • Angular DI system
  • Creating and providing services
  • providedIn options
  • HttpClient setup
  • HTTP interceptors for auth

Video 15.2: RxJS Essentials (35 min)

  • Observables vs Promises
  • Core operators: map, filter, tap, catchError
  • Higher-order operators: switchMap, mergeMap, concatMap
  • Subject types (Subject, BehaviorSubject, ReplaySubject)
  • Subscription management and memory leaks

Video 15.3: Forms and Comparison (25 min)

  • Reactive forms with FormBuilder
  • Validators and custom validators
  • Form arrays for dynamic forms
  • Framework comparison: Vue vs React vs Angular
  • Choosing the right tool for the job

Weekly Assignments​

Every assignment is graded out of 100 points and later recalculated into course points with correct weighting per defense.
Grading is done by TA and/or teacher, in case of a dispute - the decision of the teacher is final.
Min 50+ points are required to pass the assignment.

Assignment 1: JavaScript Fundamentals (Weeks 1-2)​

Objective: Build a browser-based task management utility.

Requirements:

  • No frameworks, pure JS
  • CRUD operations for tasks (stored in browser storage - localStorage or IndexedDB)
  • Task properties: id, title, description, status, priority, dueDate, tags[]
  • Commands: add, list, update, delete, filter, search
  • Async operations with proper error handling
  • Input validation

Deliverables:

  • Git repository with commit history showing progression
  • README with usage instructions
  • Evidence of AI-assisted development (specs, prompts used)

Grading (100 points):

  • Functionality: 40 pts
  • Code quality: 25 pts
  • Error handling: 15 pts
  • Git usage: 10 pts
  • Documentation: 10 pts

Assignment 2: TypeScript Migration + Enhancement (Weeks 3-4)​

Objective: Migrate A1 to TypeScript and add features.

Requirements:

  • Full TypeScript conversion with strict mode
  • Custom type definitions for all entities
  • Generic utility functions (at least 3)
  • Add: recurring tasks, task dependencies, statistics
  • Zod schemas for runtime validation
  • Unit tests for core functions (Vitest, >70% coverage)

Deliverables:

  • TypeScript source with tsconfig.json
  • Test suite with coverage report
  • Type documentation
  • AI usage log: what worked, what didn't

Grading (100 points):

  • Type safety: 30 pts
  • New features: 25 pts
  • Tests: 25 pts
  • Code quality: 10 pts
  • AI reflection: 10 pts

Assignment 3: Vue.js Application (Weeks 5-6)​

Objective: Build a web application with Vue 3.

Requirements:

  • Vite + Vue 3 + TypeScript + Pinia
  • Features: CRUD, filtering, sorting, search, drag-drop reorder
  • Responsive design (mobile-first)
  • Local storage persistence (API integration comes later)
  • At least 5 reusable components
  • Vue Router with at least 3 routes
  • Form validation

Full Application Option: If Vue is your chosen framework for full complexity (see course requirements), expand beyond basic CRUD:

  • Dashboard/summary views with aggregated data
  • Complex workflows (multi-step processes, wizards)
  • Advanced UX (bulk operations, keyboard shortcuts, etc.)

Deliverables:

  • Source code with clear component structure
  • Deployed to VPS
  • Component documentation
  • Lighthouse score > 80 (performance, accessibility)

Grading (100 points):

  • Functionality: 35 pts
  • Component design: 25 pts
  • State management: 15 pts
  • UI/UX: 15 pts
  • Code quality: 10 pts

Assignment 4: Backend + Full-Stack Integration (Weeks 7-9)​

Objective: Build a REST API with NestJS, implement JWT authentication, and integrate with Vue frontend.

Backend Requirements:

  • NestJS + TypeScript + PostgreSQL (or SQLite)
  • Prisma or TypeORM
  • Input validation (class-validator)
  • Error handling with proper HTTP codes
  • API documentation (Swagger)
  • Database migrations

Domain Complexity Requirements:

  • Minimum 10 domain entities (e.g., Task, Project, Category, Tag, Comment, Attachment, etc.)
  • Identity entities: User, Role, UserRole, RefreshToken
  • At least 3 entities with full CRUD operations
  • Meaningful relationships (one-to-many, many-to-many)

Authentication Requirements:

  • User registration with email/password
  • Password hashing with bcrypt (min 10 rounds)
  • Login endpoint returning access + refresh tokens
  • Access token: JWT, 15 min expiry, contains userId and email
  • Refresh token: opaque or JWT, 7 day expiry, stored in DB
  • Refresh endpoint: validates refresh token, issues new token pair
  • Refresh token rotation: old token invalidated on use
  • Logout endpoint: invalidates refresh token in DB
  • Protected routes using AuthGuard
  • Users can only access their own data

Frontend Integration Requirements:

  • Connect A3 (Vue) to NestJS backend
  • Frontend must support all 10+ backend entities (list views, detail views for main entities)
  • Login/Register pages
  • Token storage (httpOnly cookies recommended, localStorage acceptable)
  • Axios/fetch interceptor for attaching access token
  • Automatic token refresh on 401 response
  • Redirect to login on auth failure
  • Protected routes (Vue Router guards)
  • Logout functionality (clear tokens, redirect)
  • Display current user info

Deliverables:

  • Source code (backend + integrated frontend)
  • Postman/Insomnia collection with auth flow examples
  • Database schema diagram (include all entities and relationships)
  • API documentation
  • Auth flow diagram (registration, login, refresh, logout)

Grading (100 points):

  • API design + domain complexity: 20 pts
  • JWT implementation: 15 pts
  • Refresh token flow: 10 pts
  • Database schema + relationships: 15 pts
  • Frontend-backend integration: 15 pts
  • Frontend auth integration: 15 pts
  • Documentation: 10 pts

Assignment 5: DevOps + Testing (Weeks 10-11)​

Objective: Containerize, deploy, and test the full-stack application.

Docker Requirements (Week 10):

  • Multi-stage Dockerfiles (frontend + backend)
  • docker-compose for local dev (frontend + backend + db)
  • Production compose file
  • Optimized image sizes

CI/CD Requirements (Week 10):

  • GitLab CI pipeline
  • Stages: lint → test → build → deploy
  • Variables and secrets management
  • Docker image registry integration
  • Automated deployment to VPS

VPS Deployment (Week 10):

  • Nginx reverse proxy configuration
  • SSL with Let's Encrypt
  • Environment management (dev/staging/prod)
  • Health checks

Testing Requirements (Week 11):

  • Unit tests (>60% coverage)
  • Component tests for key Vue components
  • API integration tests (Supertest)
  • E2E tests with Playwright (at least 8 scenarios)
  • Auth flow E2E tests: register, login, refresh, logout

Deliverables:

  • Dockerfiles and docker-compose files
  • .gitlab-ci.yml with working pipeline
  • Working production URL
  • Test reports with coverage
  • Deployment documentation

Grading (100 points):

  • Docker setup: 20 pts
  • CI/CD pipeline: 20 pts
  • VPS deployment: 20 pts
  • Unit + component tests: 15 pts
  • E2E tests: 15 pts
  • Documentation: 5 pts
  • Uptime during grading: 5 pts

Assignment 6: React Application (Weeks 12-13)​

Objective: Build a React frontend integrated with your backend.

Backend Options:

  • Option A (recommended for concurrent C# course students): Use your ASP.NET Core backend from "Web Applications with C#" course
  • Option B: Use your NestJS backend from A4

Backend Complexity Requirements (both options):

  • Minimum 10 domain entities + identity entities (User, Role, UserRole, RefreshToken, etc.)
  • Full CRUD for at least 3 main entities
  • JWT authentication with refresh token rotation

Implementation Scope:

  • If React is your full application framework: Implement complete domain complexity with dashboard views, complex workflows, advanced UX patterns. This will be your deployed demo for D3.
  • If React is your comparison framework: CRUD-focused implementation covering core entities and auth flow is sufficient.

Requirements:

  • Vite + React + TypeScript
  • State management: Zustand or Context + useReducer
  • Complete auth flow (login, register, refresh, logout)
  • React Router with protected routes
  • Custom hooks (at least 3)

React-Specific Requirements:

  • Proper use of useState, useEffect, useContext
  • Memoization where appropriate (useMemo, useCallback)
  • Error boundaries for graceful error handling
  • Loading states and optimistic updates

Deliverables:

  • Source code
  • Deployed version
  • Framework comparison document: Vue vs React
    • Development experience
    • State management patterns
    • Tooling and ecosystem
    • Personal preference and reasoning
  • If using C# backend: notes on integrating React with ASP.NET Core vs NestJS

Grading (100 points):

  • Functionality: 25 pts
  • React patterns and hooks: 25 pts
  • Auth integration: 15 pts
  • Custom hooks: 15 pts
  • Comparison document: 20 pts

Assignment 7: Angular Application (Weeks 14-15)​

Objective: Build an Angular frontend integrated with your backend.

Backend Options:

  • Option A (recommended for concurrent C# course students): Use your ASP.NET Core backend from "Web Applications with C#" course
  • Option B: Use your NestJS backend from A4

Backend Complexity Requirements (both options):

  • Minimum 10 domain entities + identity entities (User, Role, UserRole, RefreshToken, etc.)
  • Full CRUD for at least 3 main entities
  • JWT authentication with refresh token rotation

Implementation Scope:

  • If Angular is your full application framework: Implement complete domain complexity with dashboard views, complex workflows, advanced UX patterns. This will be your deployed demo for D3.
  • If Angular is your comparison framework: CRUD-focused implementation covering core entities and auth flow is sufficient.

Requirements:

  • Angular 17+ with standalone components
  • RxJS for HTTP and reactive patterns
  • Complete auth flow with HTTP interceptor
  • Angular Router with guards
  • Reactive forms with validation

Angular-Specific Requirements:

  • Proper service architecture
  • Observable-based data flow
  • HTTP interceptor for token attachment
  • Subscription cleanup (takeUntilDestroyed or async pipe)
  • At least one custom validator

Deliverables:

  • Source code
  • Deployed version
  • Three-framework comparison document: Vue vs React vs Angular
    • Architecture and mental models
    • State management approaches
    • Learning curve assessment
    • Use case recommendations
    • AI assistance effectiveness per framework
  • If using C# backend: reflection on Angular architecture vs ASP.NET Core patterns

Grading (100 points):

  • Functionality: 25 pts
  • Angular patterns: 20 pts
  • RxJS usage: 15 pts
  • Auth + interceptor: 15 pts
  • Comparison document: 25 pts

Learning Outcomes ↔ Assessment mapping​

  • LO1 “solve problems in JS” → A1–A2 + D1
  • LO2 “JS programming model” → D1 questioning focus
  • LO3 “SPA framework” → A3/A6/A7 + D2/D3
  • LO4 “build script” → A3–A7 tooling + CI/CD in A5
  • LO5 “transpiles to JS” → TypeScript A2, A3, A6, A7