University of Helsinki - Full Stack Open - WIP

This course, which is a deep dive into modern web development, introduces modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js, Redux, MongoDB, GraphQL and Typescript. This is the repository where I store my submissions.

This repository serves as a collection of my submitted solutions for the course exercises.

Certificate

I have successfully completed Parts 0 to 7 of the course.

Link to certificate: Link

Parts 8 to 13 are WIP.

Part 0 - Fundamentals of Web Apps!

This part is an overall introduction to the course, focussing on HTTP requests, the DOM and how web apps generally work.

Exercises

1. New Note Diagram: A sequence diagram depicting the chain of events caused by adding a note to a page
2. SPA: A sequence diagram depicting the chain of events caused by opening a SPA
3. New Note: A sequence diagram depicting the chain of events caused by adding a note to a SPA

Solution folder: Link

Part 1 - Introduction to React

This part focuses on the React library and some JavaScript Features.

Exercises

1. courseinfo: A simple React Application displaying information
2. unicafe: A React Application using States
3. anecdotes: A React Application using multiple States

Solution folder: Link

Part 2 - Communicating with Server

This part focuses on how to render data collections, submitting data using React forms, and communicating with a server through JavaScript using API calls.

Exercises

1. courseinfo: Updating the exercise from Part 2 with better data collections
2. countries: A React Application that accesses an API to display information and weather data about different countries
3. phonebook: A phonebook application connected to a json-server with dynamic styling for notifications

Solution folder: Link

Part 3 - Programming a server with NodeJS and Express

This part focuses on the backend with a simple REST API in Node.js using the Express library and MongoDB.

• Solution Repository for Part 3: GitHub
• Solution App for Part 3: Link

Part 4 - Testing Express servers, user administration

This part focuses on writing unit and integration tests using the Jest library. It also looks at implementing user authentication and authorization using JWT.

Exercises

• bloglist: A backend application with the functionality of adding, updating and deleting blogs. Each functionality requires user authentication using JWT.

Solution folder: Link

Part 5 - Testing React Apps

This part focuses on connecting the Frontend with the Backend, as well as testing React Apps with Jest and Cypress.

Exercises

• bloglist: A React Frontend application connected to the backend application of Part 4, completed with tests.

Solution folder: Link

Part 6 - State management with Redux

This part focuses on moving state management to the Redux library. It looks into react-redux as well as Redux toolkit, focuses on the useSelector and useDispatch hook and also takes a quick look at the older connect system.

Exercises

• unicafe-redux: A simple React app with a vanilla Redux State Management system
• redux-anecdotes: A React app using Redux Toolkit as a state management system. One of the components uses the older connect system.

Solution folder: Link

Part 7 - React Router, Custom Hooks, Styling App with CSS and Webpack

This part focuses on working with React Router v6, creating Custom Hooks and some theoretical details about styling a React App and working with Webpack

Exercises

• routed-anecdotes: React Router v6 implementation in a simple React App
• country-hook: Implementation of a custom hook into one of the previous exercises
• ultimate-hook: Implementation of a custom hook to handle HTTP requests
• bloglist: Reworked application from Part 5, now using Redux and React Router

Solution folder: Link