Deep Dive Into Modern Web Development

Full Stack Open

Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go! This course will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js.

Notes:

This repository contains the answers to the Full Stack Open version 2024 course from the University of Helsinki. Throughout the repository I made an effort to treat each exercise as a commit with the # of the exercise, this was complicated in some cases but I did it this way so that those who review the answers do not have to work.During part 0 and 1 I was studying and solving the exercises from the Spanish version. But from part 2 onwards I started using the English version because it is more updated in some details from what I could see. During the course I made several "auxiliary repos", you can find some of the exercises solved with some of my notes about the course in: this repo. Also the repos I made to deal with specific modules of this course are the urls in the readme of the specific module.

Modules

Part 0 - Fundamentals of Web apps

• General Info
• Fundamentals of Web apps

See the answers

Part 1 - Introduction to React

• Introduction to React
• JavaScript
• Component State, event handlers
• A more complex state, debugging React apps

See the answers

Part 2 - Communicating with server

• Rendering a collection, modules
• Forms
• Getting data from server
• Altering data in server
• Adding style to React apps

See the answers

Part 3 - Programming a server with NodeJS and Express

• Node.js and Express
• Deploying app to internet
• Saving data to MongoDB
• Validation and ESLint

See the answers

Part 4 - Testing Express servers, user administration

• Structure of backend application, introduction to testing
• Testing the backend
• User administration
• Token authentication
• Legacy: Testing with Jest

See the answers

Part 5 - Testing React apps

• Login in frontend
• props.children and proptypes
• Testing React apps
• End to end testing: Playwright
• End to end testing: Cypress

See the answers

Part 6 - Advanced state management

• Flux-architecture and Redux
• Many reducers
• Communicating with server in a Redux application
• React Query, useReducer and the context

See the answers

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

• React Router
• Custom hooks
• More about styles
• Webpack
• Class components, Miscellaneous
• Exercises: extending the bloglist

See the answers