Full Stack Open 2021

Exercises

---

Part 0 - Fundamentals of Web apps

• 0.1 HTML
• 0.2 CSS
• 0.3 HTML Forms
• 0.4 New note
• 0.5 Single page app
• 0.6 New note

---

Part 1 - Introduction to React

a) Introduction to React

• 1.1 Course information, step 1
• 1.1 Course information, step 2

b) JavaScript

• 1.3 Course information, step 3
• 1.4 Course information, step 4
• 1.5 Course information, step 5

c) Component state, event handlers

d) A more complex state, debugging React apps

• 1.6 Unicafe, step 1
• 1.7 Unicafe, step 2
• 1.8 Unicafe, step 3
• 1.9 Unicafe, step 4
• 1.10 Unicafe, step 5
• 1.11 Unicafe, step 6
• 1.12 Anecdotes, step 1
• 1.13 Anecdotes, step 2
• 1.14 Anecdotes, step 3

---

Part 2 - Communicating with server

a) Rendering a collection, modules

• 2.1 Course information, step 6
• 2.2 Course information, step 7
• 2.3 Course information, step 8
• 2.4 Course information, step 9
• 2.5 Separate module

b) Forms

• 2.6 Phonebook, step 1
• 2.7 Phonebook, step 2
• 2.8 Phonebook, step 3
• 2.9 Phonebook, step 4
• 2.10 Phonebook, step 5

c) Getting data from server

• 2.11 The phonebook, step 6
• 2.12 Data for countries, step 1
• 2.13 Data for countries, step 2
• 2.14 Data for countries, step 3

d) Altering data in server

• 2.15 Phonebook, step 7
• 2.16 Phonebook, step 8
• 2.17 Phonebook, step 9
• 2.18 Phonebook, step 10

e) Adding styles to React app

• 2.19 Phonebook, step 11
• 2.20 Phonebook, step 12

---

Part 3 - Programming a server with NodeJS and Express

a) Node.js and Express

• 3.1 Phonebook backend, step 1
• 3.2 Phonebook backend, step 2
• 3.3 Phonebook backend, step 3
• 3.4 Phonebook backend, step 4
• 3.5 Phonebook backend, step 5
• 3.6 Phonebook backend, step 6
• 3.7 Phonebook backend, step 7
• 3.8 Phonebook backend, step 8

b) Deploying app to internet

• 3.9 Phonebook backend, step 9
• 3.10 Phonebook backend, step 10
• 3.11 Phonebook full stack

c) Saving data to MongoDB

• 3.12 Command-line database
• 3.13 Phonebook database, step 1
• 3.14 Phonebook database, step 2
• 3.15 Phonebook database, step 3
• 3.16 Phonebook database, step 4
• 3.17 Phonebook database, step 5
• 3.18 Phonebook database, step 6

d) Validation and ESLint

• 3.19 Phonebook database, step 7
• 3.20 Phonebook database, step 8
• 3.21 Deploying the database backend to production
• 3.22 Lint configuration

---

Part 4 - Testing Express servers, user administration

a) Structure of backend application, introduction to testing

• 4.1 Blog list, step 1
• 4.2 Blog list, step 2
• 4.3 Helper functions and unit tests, step 1
• 4.4 Helper functions and unit tests, step 2
• 4.5 Helper functions and unit tests, step 3
• 4.6 Helper functions and unit tests, step 4
• 4.7 Helper functions and unit tests, step 5

b) Testing the backend

• 4.8 Blog list tests, step 1
• 4.9 Blog list tests, step 2
• 4.10 Blog list tests, step 3
• 4.11 Blog list tests, step 4
• 4.12 Blog list tests, step 5
• 4.13 Blog list expansion, step 1
• 4.14 Blog list expansion, step 2

c) User administration

d) Token authentication

• 4.15 Blog list expansion, step 3
• 4.16 Blog list expansion, step 4
• 4.17 Blog list expansion, step 5
• 4.18 Blog list expansion, step 6
• 4.19 Blog list expansion, step 7
• 4.20 Blog list expansion, step 8
• 4.21 Blog list expansion, step 9
• 4.22 Blog list expansion, step 10
• 4.23 Blog list expansion, step 11

---

Part 5 - Testing React apps

a) Login in frontend

• 5.1 Blog list frontend, step 1
• 5.2 Blog list frontend, step 2
• 5.3 Blog list frontend, step 3
• 5.4 Blog list frontend, step 4

b) Props.children and prototypes

• 5.5 Blog list frontend, step 5
• 5.6 Blog list frontend, step 6
• 5.7 Blog list frontend, step 7
• 5.8 Blog list frontend, step 8
• 5.9 Blog list frontend, step 9
• 5.10 Blog list frontend, step 10
• 5.11 Blog list frontend, step 11
• 5.12 Blog list frontend, step 12

c) Testing React apps

• 5.13 Blog list tests, step 1
• 5.14 Blog list tests, step 2
• 5.15 Blog list tests, step 3
• 5.16 Blog list tests, step 4

d) End to end testing

• 5.17
• 5.18
• 5.19
• 5.20
• 5.21
• 5.22

---

Part 6 - State management with Redux

a) Flux-architecture and Redux

b) Many reducers

c) Communicating with server in a redux application

d) Connect

---

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

a) React-router

b) Custom hooks

c) More about styles

d) Webpack

e) Class components, Miscellaneous

f) Exercises: extending the bloglist

---

Part 8 - GraphQL

a) GraphQL-server

b) React and GraphQL

c) Database and user administration

d) Login and updating the cache

e) Fragments and subscriptions

---

Part 9 - TypeScript

a) Background and introduction

b) First steps witsh TypeScript

c) Typing the express app

d) React with types

---

Part 10 React Native

a) Introduction to React Native

b) React Native basics

c) Communicating with server

d) Testing and extending our application

---

Part 11 CI/CD

a) Introduction to CI/CD

b) Getting started with GitHub Actions

c) Deployment

d) Keeping green

e) Expanding further