Web Development and API Design

Summary

This repository contains all the material used in the PG6301 course on Web Development and API Design, taught at the university college Høyskolen Kristiania, Oslo, Norway.

The goal of this course is to teach the principles of Single-Page-Applications (SPA), the basics of web services (e.g., REST APIs) and web-sockets.

The programming language used in this course is JavaScript, with NodeJS as runtime. Some of the used technologies are: YARN, WebPack, Babel, React, React-Router, Jest, Express, and Passport.

This course puts particular emphasis on testing and security, but not on frontend design (i.e., UI/UX).

This course focuses on the frontend side of web development, albeit we will build full-stack applications (but no databases). To learn more about backend development (e.g., using Java/Kotlin), you can see this other repository: Testing, Security and Development of Enterprise Systems.

The course is divided in 12 lessons, each one lasting between 2 and 4 hours. Each lesson contains slides and full working code examples. Slides just give high level overviews: most of the explanations will be directly in the code as comments.

Lessons

• Lesson 01: Intro to JavaScript and basic HTML/CSS

  Code in the les01 folder. Slides here: PDF

  Exercise: quiz-game-part-01

• Lesson 02: Build Tools and Unit Testing

  Code in the les02 folder. Slides here: PDF

  Exercises: quiz-game-part-02

• Lesson 03: SPA Components

  Code in the les03 folder. Slides here: PDF

  Exercises: quiz-game-part-03

• Lesson 04: SPA State Handling

  Code in the les04 folder. Slides here: PDF

  Exercises: quiz-game-part-04

• Lesson 05: SPA Routing

  Code in the les05 folder. Slides here: PDF

  Exercises: quiz-game-part-05

• Lesson 06: Async Calls to Web Services

  Code in the les06 folder. Slides here: PDF

  Exercises: quiz-game-part-06

• Lesson 07: RESTful APIs Theory

  No code. Slides here: PDF

  Exercises: quiz-game-part-07

• Lesson 08: RESTful APIs Practice

  Code in the les08 folder. Slides here: PDF

  Exercises: quiz-game-part-08

• Lesson 09: Authentication and Authorization

  Code in the les09 folder. Slides here: PDF

  Exercises: quiz-game-part-09

• Lesson 10: CORS, CSRF and XSS

  Code in the les10 folder. Slides here: PDF

  Exercises: quiz-game-part-10

• Lesson 11: WebSockets

  Code in the les11 folder. Slides here: PDF

  Exercises: quiz-game-part-11

• Lesson 12: Online Multi-Player Game

  Code in the les12 folder. Slides here: PDF

  Exercises: quiz-game-part-12

• Extra: GraphQL APIs

  Code in the extra-graphql folder. Slides here: PDF

  Exercises: none

Useful Links

• You Don't Know JavaScript
• JavaScript Koans
• What the f*ck JavaScript?
• NodeJS
• YARN
• WebPack
• Babel
• Lodash
• React
• React-Router
• Jest
• Enzyme
• SuperTest
• CSS Selectors
• Express
• Passport
• ProgrammableWeb

Exam

A PDF of a mock exam for this course can be found here.

License & Copyright

The materials herein are all Copyright (c) of Andrea Arcuri and contributors. The material was/is produced while working at Westerdals Oslo ACT and Høyskolen Kristiania.

All the source code in this repository is released under LGPL version 3 license.

The documentation is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 Unported License.