Goal

• To qualify for the "Interview Promise"
  • Core course - 7 parts
  • Course exam - after completing parts 0-7
  • Extended course - 6 parts
  • Course project - Full stack project (10 ECTS)

Overview

• Exercises and Projects from Full Stack Development open course by University of Helsinki for learning MERN (MongoDB, Express.js, React, Node.js) stack
• This repository consists of Core and Extension parts of the course, i.e., Parts 0-7

Table of Contents

PART	Description
Part 0	Fundamentals of Web Apps
Part 1	Introduction to React
Part 2	Communicating with Server
Part 3 (in seperate repository)	Programming a server with Node.js and Express
Part 4 (in seperate repository)	Backend Testing and User administration
Part 5 (in seperate repository)	Frontend Testing (React Apps) and End-to-End Testing
Part 6 (in seperate repository)	Advanced State Management using Redux, Hooks (react-redux, useReducer) and React Query

---

---

Part 0 - Fundamentals of Web Apps

• Exercises to represent workflow in the application as a sequence diagram using Mermaid

  Exercises	Description
  Ex 0.4	Adding new note in old-school application
  Ex 0.5	Single Page Application (SPA)
  Ex 0.6	Adding new note in SPA

---

Part 1 - Introduction to React

• Exercises to build three applications bit-by-bit using React and JavaScript

  Exercises	Description
  Ex 1.1 to 1.5	Course Information
  Ex 1.6 to 1.11	Unicafe Feedback
  Ex 1.12 to 1.14	Anecdotes

---

Part 2 - Communicating with Server

• Exercises to advance into working with backend using HTTP Methods via json-server & axios

  Exercises	Description
  Ex 2.1 to 2.5	Refactor and enhance Course Information app
  Ex 2.6 to 2.10	Initiate Phonebook app
  Ex 2.11	Enhance Phonebook app - Setup json-server, axios library and useEffect hook for Phonebook contacts
  Ex 2.12 to 2.15	Setup HTTP Methods, update backend & frontend
  Ex 2.16, 2.17	Setup notifications for CRUD operations, Error handling using catch block

---

Part 3 - Programming a server with NodeJS and Express

• Implement functionality on server-side tech stack and understand Backend development and learn how to
  • build a REST API in Node.js using Express
  • deploy application to the Internet
  • setup and save application data to MongoDB
  • Follow along demo to understand theory
  • Exercises at FullStackOpen-core-part3

---

Part 4 - Testing and User Administration in Express

• Structure the backend based on Model-View-Controller (MVC) architecture
• Implement Testing of Node applications with supertest
• Implement User administration and Token authentication with jsonwebtoken or express-jwt
• Exercises at FullStackOpen-core-part4

---

Part 5 - Frontend Testing (React Apps) and End-to-End Testing

• Setup frontend relative to Backend (Blogs App)
• Test React apps using Vitest, jsdom and jest-dom from react-testing-library
• End-to-End Testing with either Playwright or Cypress
• Exercises at FullStackOpen-core-part5

---

Part 6 - Advanced State Management on Frontend and Backend

• Frontend State Management using Redux library on unicafe app from Part 1
• Frontend State Management using react-redux hooks on anecdotes app from Part 1
• Backend Server State Management using React Query library and useReducer hook on anecdotes app
• Exercises at FullStackOpen-core-part6

---