University of Helsinki - Full Stack Open 2020

Deep Dive Into Modern Web Development

This course serves as an introduction to modern web application development with JavaScript. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js. The course also contains a section on GraphQL, a modern alternative to REST APIs.

The course covers testing, configuration and environment management, and the use of MongoDB for storing the application’s data.

This year's edition of the course contains a new part on TypeScript. Content for this part is provided by Terveystalo

The course is worth 3-9 credits, and the content is the same as in the Full stack course held at the Department of Computer Science at the University of Helsinki in Spring 2020. There is also an associated project that is worth 1-10 credits.

Participants are expected to have good programming skills, basic knowledge of web programming and databases, and to know the basics of working with the Git version-control system. You are also expected to have perseverance and the ability for independent problem solving and information seeking.

Course Website: https://fullstackopen.com/en

Certificate

Course Exercises

Part 0 - Fundamentals of Web apps

Traditional web applications, single page applications, HTTP forms, HTML & CSS review.

• Traditional web app & SPA sequence diagrams

Part 1 - Introduction to React

React, modern JavaScript, hooks vs "old react", debugging.

• Anecdotes
• Courseinfo
• Unicafe

Part 2 - Communicating with server

Modules, forms, getting data from server, effect hooks, sending data to server, inline styles.

• Countries
• Courseinfo
• Phonebook

Part 3 - Programming a server with NodeJS and Express

NodeJS and Express, REST, Express middleware, MongoDB, validation and ESLint.

• Build & deploy a simple REST Backend

Part 4 - Testing Express servers, user administration

Testing Node applications, async/await, user administration, references across collections, token based authentication.

• Bloglist app backend & tests

Part 5 - Testing React apps

PropTypes, testing React apps, Cypress E2E testing, frontend login auth.

• Bloglist app frontend & tests

Part 6 - State management with Redux

Flux architecture, Redux, asynchronus actions and Thunks, React-Redux.

• Redux Anecdotes
• Redux Unicafe

Part 7 - React router, custom hooks, styling app with CSS and webpack

React-Router, custom hooks, UI libraries, Webpack, current trends.

• Bloglist-Backend
• Bloglist-Frontend
• Country Hook
• Routed Anecdotes
• Ultimate Hooks

Part 8 - GraphQL

GraphQL, Apollo server and client, validation and cache.

• Library-Backend
• Library-Frontend

Part 9 - Typescript

TypeScript, configuration, typing the backend, React with types.

• First Steps
• Courseinfo
• Patientor-Backend
• Patientor-Frontend