Full Stack Open — University of Helsinki

Course exercises and projects from Full Stack Open, the University of Helsinki's open full-stack web development curriculum.

Certificate: 85 exercises completed, grade 2/5 (FSO scale) · View public certificate

Stack across this repository: JavaScript · React · Vite · Node.js · Express · MongoDB · Mongoose · JWT · bcrypt

---

---

Overview

Part	Content	Technologies	Status
0	Web fundamentals — sequence diagrams (traditional vs SPA)	Mermaid, Markdown	Complete
1	Introductory React apps (components, state, events)	React, Vite	Complete
2	React with data fetching, forms, and external APIs	React, Vite, axios, json-server	Complete
3	Phonebook REST API and full-stack deployment	Node.js, Express, MongoDB, Mongoose	Complete
4	Blog list REST API with authentication and tests	Node.js, Express, MongoDB, JWT, bcrypt, supertest	Complete

---

Part 0 — Fundamentals of Web Apps

Three sequence diagrams document how browser–server communication differs between traditional multi-page applications and single-page applications (SPA), including the flow for creating a new note in each model. Diagram annotations are in Spanish.

Technologies: Markdown, Mermaid

Location: part0/

---

Part 1 — Introduction to React

Three small React applications covering core frontend concepts: component composition and props, component state with useState, and conditional rendering with user interaction.

Project	Description
courseinfo	Course catalog built from reusable components (Header, Content, Total)
unicafe	Customer feedback collector with live statistics
anecdotes	Anecdote browser with random selection and voting

Technologies: React 19, Vite, JavaScript

Location: part1/

---

Part 2 — Communicating with Server

React applications that fetch data from servers and third-party APIs, manage forms, and handle asynchronous updates.

Project	Description
courseinfo	Course list rendered with .map(), using a reusable Course component
phonebook	Contact manager with search filter, CRUD operations, and user notifications
countries	Country search using the REST Countries API, with weather data from OpenWeatherMap

Technologies: React 19, Vite, axios, json-server (phonebook local development)

Location: part2/

---

Part 3 — Node.js and Express

A REST API for the phonebook application, backed by MongoDB. The server exposes CRUD endpoints for contacts, validates input with Mongoose schemas, and serves the production build of the Part 2 phonebook frontend as static files.

Includes a CLI script (mongo.js) for listing and adding entries directly to the database.

Technologies: Node.js, Express 5, MongoDB, Mongoose, Morgan, CORS, dotenv

Location: part3/phonebook-backend/

Live demo: https://fullstackopen-9laj.onrender.com/

---

Part 4 — Testing and User Authentication

A REST API for managing blog posts with user registration, login, and JWT-protected routes. Passwords are hashed with bcrypt. Includes unit tests for pure helper functions and integration tests for the API using Node.js's built-in test runner and supertest.

Technologies: Node.js, Express 5, MongoDB, Mongoose, JWT, bcrypt, supertest, Node.js node:test

Location: part4/bloglist-backend/

API routes: /api/blogs, /api/users, /api/login

---

Running locally

Each subproject is independent. Clone the repository and work inside the relevant directory.

git clone https://github.com/Donovan-Nudrak/FullStackOpen.git
cd FullStackOpen

Frontend apps (Part 1 & 2)

cd part<N>/<project>   # e.g. part2/phonebook
npm install
npm run dev

For part2/countries, create a .env file (see .env.example):

VITE_WEATHER_KEY=YOUR_VALUE_HERE

For part2/phonebook during local development without the Part 3 backend, start the mock server in a separate terminal:

npm run server   # json-server on port 3001

Phonebook backend (Part 3)

Requires a running MongoDB instance. Create a .env file in part3/phonebook-backend/:

MONGODB_URI=YOUR_VALUE_HERE
PORT=YOUR_VALUE_HERE

cd part3/phonebook-backend
npm install
npm run dev        # development with nodemon
# or
npm start          # production mode

To rebuild and copy the Part 2 frontend into the backend:

npm run build:ui

Blog list backend (Part 4)

Create a .env file in part4/bloglist-backend/:

MONGODB_URI=YOUR_VALUE_HERE
TEST_MONGODB_URI=YOUR_VALUE_HERE
SECRET=YOUR_VALUE_HERE
PORT=YOUR_VALUE_HERE

cd part4/bloglist-backend
npm install
npm run dev        # development
npm test           # runs tests (uses TEST_MONGODB_URI)

---

About this project

This repository collects the exercises completed while working through Full Stack Open at my own pace. Each part builds on the previous one — from React fundamentals through backend APIs, database integration, authentication, and automated testing.