University of Helsinki - Full Stack Open - 2021/22

About the course

The course introduce 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. This course covers: React, Redux, Node.js, MongoDB, GraphQL and TypeScript.

About this repository

This repository contains my own exercise solutions to the 2021/22 edition of the Full Stack Open course from the University of Helsinki.

Certificates

Certificate of completion GraphQL part of the course

Certificate of completion CI/CD part of the course

Part 0 - Fundamentals of Web apps

An overall introduction to the course. It introduces to some concepts like HTTP requests, how traditional web apps work, DOM, CSS and Single Page Applications.

• new note - The diagram shows how communicate the browser and the server when user added a note to a page containing JavaScript.
• single page app - The diagram shows the communication between the browser and the server when user opened single page app on the browser.
• new note (single page app) - The diagram shows how communicate the browser and the server when user added a note to a single page app.

View solutions folder

Part 1 - Introduction to React

This part introduces to React concepts. It covers the basics: components, props, JSX and more advanced concepts: Javascript functionalities that are used a lot in React (.map(), .filter(), .reduce()), destructuring, event handlers in React and passing state to child components, spread operator, hooks and their rules and conditional rendering.

• courseinfo - Simple course information page which counts total number of exercises of the course.
• unicafe - This app gathers feedbacks and makes statistic.
• anecdotes - This app provides to vote for a random anecdote, also shows the most voted anecdote.

View solutions folder

Part 2 - Communicating with server

This part covers how to display list items in React and how to handle forms. Introduces JSON server and fetching data from it, axios for sending GET, PUT, POST and DELETE requests and how to style your React app (CSS).

• courseinfo - Extended Course info app from part 1.
• phonebook - Phonebook, add/delete contacts with numbers, edit numbers.
• dataforcountries - A react app that fetches and displays information form the REST Countries and Weatcher Stack API's.

Part 3 - Programming a server with NodeJS and Express

This part is focused on the backend. How to: implement a simple REST API in Node.js using Express, connect to a database (MongoDB) to store and retrieve data, deploy your app.

• phonebook - The app source backend code.
• phonebook - The app deployed on Heroku. Frontend from part 2 and Backend from part 3 works together.

Part 4 - Testing Express servers, user administration

This part is focused on testing Node.js applications, async/await, user administration, references across collections, token based authentication.

• bloglist - Allows users to save information (blog author, title, url, and amount of upvotes from users) about interesting blogs they have stumbled across on the internet.

Part 5 - Testing React apps

This part is focused on token based authentication and testing the React components using Jest, React Testing Library and Cypress.

• bloglist-frontend - The app frontend code.

Part 6 - State management with Redux

This part is focused on Redux, which can be used for more complex state management of your React app (covers concepts like immutability, global store, actions and reducers). Also this chapter covers how to use Redux with hooks, and how to use the old connect higher order component when you work on older code bases, and redux thunk for asynchronous code.

• unicafe-redux - The app source code.
• redux-anecdotes - The app source code.

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

This part handles a lot of different subjects. Such as React router (with hooks) which used to navigate in React apps, how to create custom hooks, ways to style an app and which UI libraries can be used. This part also covers how to use Webpack instead of Create-React-App to setup an app, and gives a short overview of class components.

• routed-anecdotes - The app source code.
• ultimate-hooks - The app source code.
• country-hook - The app source code.
• bloglist-frontend - The app source code.
• bloglist-backend - The app source code.

Part 8 - GraphQL

This part is about GraphQL, Facebook's alternative to REST API for communication between browser and server. In this parts covered basic GraphQL concepts like schema, queries and resolver also how to setup and use Apollo's ApolloServer and ApolloClient.

• library-backend - The app source code.
• library-frontend - The app source code.

Part 9 - TypeScript

// I will study this part a little bit later.

Part 10 - React Native

This part is about how to build native Android and iOS mobile applications with JavaScript and React using the React Native framework. By developing an entire mobile application from scratch this part gives a good dive into the React Native ecosystem. It covers concepts such as how to render native user interface components with React Native, how to create beautiful user interfaces, how to communicate with a server, and how to test a React Native application.

• rate-repository-app - The app source code.

Part 11 - CI/CD

This part shows and esplains of why you should use Continuous Integration / Continuous Delivery (CI/CD) system and what can it do for you. And how to get started with GitHub Actions.

• full-stack-open-pokedex - Exercise repository.
• full-stack-open-pokedex - Deployed app.
• phonebook-cicd - Exercice repository. Pipeline for another project.
• phonebook-cicd - Deployed app.