FullOpenStack2023

Courses developed for Web Development from Helsinki University focusing on building single page applications

Full Stack Open 2023
Part 0 Fundamentals of Web apps	Part 1 Introduction to React	Part 2 Communicating with server	Part 3 Programming a server with NodeJS and Express
Part 4 Testing Express servers, user administration	Part 5 Testing React apps	Part 6 Advanced state management	Part 7 React router, custom hooks, styling app with CSS and webpack
Part 8 GraphQL	Part 9 TypeScript

Learn

1. React
2. Redux
3. Node.js
4. MongoDB
5. GraphQL
6. TypeScript

over several interactive courses and examples

Table of Contents

• Funtamentals of WebApps
• Introduction to React
• Communicating with server
• Programming a server with Node.js
• Testing server User administration
• Testing React App
• Advanced state management
• React router
• GraphQL
• Typescript

Funtamentals

Basics of web development here

• 4
• 5
• 6

Introduction to React

1. Introduction to React
2. JavaScript
3. Component state, event handlers
4. Debugging React apps

There are four main topics to study in this part. First thing is familiarization with React-library for browser display using functions. Javascript mechanisms and event handlers contribute to app development

• courseinfo - Course information web page with react basics

• unicafe - Statistic App demonstating event handling

• anecdotes - Anecdote generator with complex components/functions

Solutions

Communication with React

1. Rendering a collection, modules
2. Forms
3. Getting data from server
4. Altering data in server
5. Adding styles to React

React code structured apps using styles and communication with a backend api (REST)

• courseinfo - Extension of part 1 with modifications and new features
• phonebook - Phonebook app with design mechanisms in React
• countries - React app displaying information from REST countries API

Solutions

Programming a server with Node

1. Node.js and Express
2. Deploying App to Internet
3. Saving data to MongoDB
4. Validation and ESLint

Simple REST API in Node.js using the Express library. The application's data is stored in a MongoDB database. The application is deployed to the internet.

• phonebook - Full stack App Phonebook

Solutions

Testing server User administration

1. Structure of backend application, introduction to testing
2. Testing the backend
3. User administration
4. Token authentication

Extended REST API in Node.js using the Express library for user authentication-authorization from server side (backend). The application's data is stored in a MongoDB database. Integrated test for functionality verification. The application is deployed to the internet.

• bloglist - Backend App bloglist

Solutions

Testing React App

1. Login in frontend
2. props.children and proptypes
3. Testing React apps
4. End to end testing

User authentication-authorization from client side (frontend). The application's data is stored in a MongoDB database. Integrated test for functionality verification and real-time tests with component rendering.

• frontend - Front App bloglist

Solutions

Advanced state management

1. Flux-architecture and Redux
2. Many Reducers
3. Communicating with server in Redux application
4. React Query, useReducer and the context

Redux library and React Query, for managing the state of React applications.

• redux anecdote - Redux App anecdote
• redux unicafe - Redux App unicafe
• react query anecdote - React query App anecdote

Solutions

React Router

1. React Router
2. Custom hooks
3. More about styles
4. Webpack
5. Class components, Miscellaneous

React Router, CSS styles, Webpack configuration & Hook functions for React applications.

• bloglist - React query App anecdote

Solutions

GraphQL

1. GraphQL-server
2. React and GraphQL
3. Database and User Administration
4. Login and Updating Cache
5. Fragments and Subscriptions

TypeScript

1. Background and Introduction
2. First steps with TypeScript
3. Typing an Express App
4. React with types
5. Grande finale: Patientor

Typescript, JavaScript open-source superset.

• Calculators
• CourseInfo
• Ilari's diary
• Patientor

Solutions

Exercises per part

Exercises per round
Part 0	6/6	Part 4	23/23	Part 8	22/26
Part 1	14/14	Part 5	23/23	Part 9	24/29
Part 2	20/20	Part 6	23/23
Part 3	22/22	Part 7	21/21
Total							198/207