Full Stack Open 2023

This repository includes my projects and solutions for the Full Stack Open course from the prestigious University of Helsinki.

This comprehensive course is known for its exceptional quality and rigorous curriculum, covering essential web development skills and modern technologies such as:

• React
• Redux
• Node.js
• Express
• REST APIs
• GraphQL
• MongoDB
• Relational Databases
• TypeScript
• React Native
• Unit testing, integration testing, and end-to-end testing
• CI/CD

Course Contents and Projects Summary

Part 0 - Fundamentals of Web Apps

Topics:

• HTML/CSS
• HTTP requests
• JSON
• The Document Object Model (DOM)
• JavaScript libraries

Projects:

Sequence diagrams - Diagrams to illustrate the chain of events during network communication for single page apps and for traditional apps

Part 1 - Introduction to React

Topics:

• React
• Props
• Event handlers
• State management using hooks

Projects:

• Course Info - A simple page to display course information.
• Unicafe - A feedback page and statistics page to demonstrate state using React hooks.
• Anecdotes - A page that shows the user random anecdotes that can be voted upon.

Part 2 - Communicating with the Server

Topics:

• HTTP requests using axios
• 3rd party APIs
• Forms
• Rendering collections of data from the server

Projects:

• Course Info 2 - A continuation of the project from the part 1 that has been refactored into a more maintainable structure
• Countries - A page that pulls country and weather data from 3rd party APIs as the user searches for country names.
• Phonebook Front End - A phonebook front end that displays and filters phonebook entries. New entries can be added, deleted, or modified. JSON server is used as a mock REST API.

Part 3- Programming a Server with Node.js and Express

Topics:

• REST APIs using Node.js and Express
• MongoDB with Mongoose
• Express middleware for logging, error handling, etc.
• ESlint

Projects

• Phonebook back End - A RESTful back end in Express for the phonebook front end from the previous part. Uses Mongoose and a MongoDB database. Backend deployed here with fly

Part 4- Testing Express Servers, User Administration

Topics:

• Unit testing and integration testing Express back ends with Jest and SuperTest
• User entication using using JSON web tokens
• Password hashing using bcrypt

Projects

• Blog List back End - A RESTful back end in Express for creating, reading, and updating blog post data. Certain endpoints are limited to authenticated users only. Unit and integration tests were done using Jest and SuperTest.

Part 5- Testing React Apps

Topics:

• Unit testing of React components using Jest and React Testing Library
• End-to-end testing of full stack applications using Cypress
• Handling login on the front end using JSON web tokens
• Defining props using PropTypes

Projects

• Blog List front End - A React front end for the blog list back end from the previous part. Users can add or like their favourite blog posts. Unit testing of React components using Jest and React Testing Library. End-to-End testing of the full stack application using Cypress.

Part 6- State Management with Redux

Topics:

• Redux for state management (using both hooks and connect)
• Redux Thunk middleware for asynchronous actions
• React Query for fetching and updating server state (using useQuery and useMutation hooks).
• React's useReducer and useContext for global notification state management and access across components.

Projects

• Unicafe Redux - The unicafe app from part 1 revisited with Redux for state management. Tests for the reducer implemented using Jest.
• Redux Anecdotes - The anecdotes app from part 1 revisited with Redux for state management. Uses reducers for notifications, filtering data, and initializing/adding/voting for anecodtes. Uses Redux Thunk middleware for for asynchronous actions.
• Query Anecdotes - The anecdotes app enhanced with React Query for fetching and mutating data, and React's context and reducer for notifications. Implements useQuery and useMutation hooks for handling anecdotes and votes, alongside global notifications managed through custom hooks.

Part 7- React Router, Custom Hooks, Styling Apps with CSS and webpack

Topics:

• React Router
• Custom React hooks
• React class components
• UI libraries including React-Bootstrap and Material-UI
• Styled-Components
• Webpack

Part 8- GraphQL

Topics:

• GraphQL
• Apollo

Projects:

• Library Front End / Library Back End - A full-stack application that offers comprehensive book and author information, enabling users to add new books to the database. It leverages Apollo Server on the backend to manage GraphQL queries and Apollo Client on the frontend for sending queries and caching results. The app utilizes subscriptions to keep the frontend in sync with updates from the MongoDB database.