This repository contains my work (lectures and assignments) for the University of Helsinki's Full Stack Open curriculum.
These are some preliminary diagrams to understand how web applications work under the hood
In Part 1, I made some React apps which interactively render information on the browser.
What I learned: Event handling, component handling, state handling (useState, useEffect), conditional rendering.
In Part 2, I made some React apps which communicate with JSON objects/servers.
What I learned: Array handling, forms handling, server communication (GET, PUT, POST, DELETE), error handling, exception handling, API fetching.
Note: Part 2's CourseInfo is an improvement of Part 1's CourseInfo
In Part 3, I made some backend servers using Node and Express.
What I learned: Node JS, Express JS, morgan, cors, nodemon, Postman, middleware, deployment, MongoDB, validation, linting.
Note: Part 3's Notes is a slightly modified version of Part 2's Notes for integration purposes.
-
The site is deployed here (add
/api/notesto the end of the url to see the backend resource): https://notes-backend-autumn-cloud-5066.fly.dev/ -
The site is deployed here (add
/api/personsto the end of the url to see the backend resource): https://phonebook-backend-black-meadow-4882.fly.dev/
In Part 4, I made some backend applications, wrote unit tests for them, and integrated user administration and token authentication.
What I learned: Project structuring, lodash, supertest, backend unit testing, asynchronous operation (async/await), user administration, bcrypt, token authentication (jsonwebtoken), populate.
Note: Part 4's Notes project is a vastly extended version of Part 3's Notes project.
In Part 5, I integrated user administration and token authentication into the frontend of some applications, wrote unit tests for them, and wrote end-to-end tests using Playwright.
What I learned: Login on frontend (with token authentication), local storage, props.children, proptypes, useRef, forwardRef, useImperativeHandle, state lifting, frontend unit testing (vitest), render, screen, mock functions, end-to-end testing (Playwright).
Note: Part 5's Notes project is a vastly extended version of Part 4's Notes project.
In Part 6, I created several front-end applications using Redux, React Query, and the Context API, and made them communicate with json-servers.
What I learned: Redux, Redux Toolkit, Redux Thunk, React Query, Context API (useReducer, createContext, useContext).
In Part 7, I created several front-end applications, integrated routing with React Router, created custom hooks, integrated Redux and React Query to two frontend applications and styled them with Material UI. I also practiced manually bundling a simple app with Webpack.
What I learned: React Router, custom hooks, React Bootstrap, Material UI, styled-components, Webpack.
Note: ReduxBloglist is the most advanced project I've worked on so far. It builds on the bloglist project from Part 5 by incorporating advanced state management with Redux, adding a comments feature, and utilizing Material UI for styling.