Full Stack Open 2021

This repository contains my projects and solutions for the Full Stack Open course from the University of Helsinki. Parts 0 to 9 are contained within this repository. Parts 10 to 13 are contained in separate repositories (links are in the associated sections below).

The course covers many topics of full stack web development 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

The course was estimated to take about 20 hours per part to complete. However, to maximize my learning potential I generally spent anywhere from 25 to 40 hours per part. I found this extra time to be very beneficial. I was able to review my code and refator it for better readablity and ease of maintenance.

Summary of Course Contents and Projects

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 - An RESTful back end in Express for the phonebook front end from the previous part. Uses Mongoose and a MongoDB database.

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 was done using Jest and React Testing Library. End-to-End testing of the full stack application was done using Cypress.

Part 6 - State Management with Redux

Topics:

• Redux for state management (using both hooks and connect)
• Redux Thunk middleware for asynchronous actions

Projects:

• Unicafe Redux - A revisiting of the unicafe app from part 1 with Redux for state management. Tests for the reducer were implemented using Jest.
• Redux Anecdotes - A revisiting of the anecdotes app from part 1 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.

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

Projects:

• Routed Anecdotes - A revisiting of the anecdotes app from part 1 with React Router and custom hooks. Routes were implemented for viewing each anecdote and for the anecdote creation form. Notifications were also implemented. A custom hook was created for handling form fields.
• Country Hook - A revisiting of the country app from part 2 with a custom hook for getting country information from a 3rd party API.
• Ultimate Hooks - Created a custom hook for communicating with the back end and maintaining the state of retrieved resources
• Extended Blog List Front End / Extended Blog List Back End - A full stack application that was extended from the blog app from parts 4 and 5. It is used to share blog post with friends who can then like or comment on them. Redux is used for state management and React Router for routing. Improved styling is accomplished with Material-UI. There is a RESTful back end made with Express. Data is stored using MongoDB. Users are authenticated with JSON web tokens and only authenticated users can comment on or like posts. Screenshots

Part 8 - GraphQL

Topics:

• GraphQL
• Apollo
• DataLoader

Projects:

• Library Front End / Library Back End - A full stack app that provides book and author information and allows users to post new books to the database. Uses Apollo Server in the back end to handle GraphQL queries, and uses Apollo Client in the front end for sending GraphQL queries and to cache results. Uses DataLoader to batch GraphQL queries together, and subscriptions to ensure the front end stays up to date as the MongoDB database is updated.

Part 9 - TypeScript

Topics:

• TypeScript
• Formik
• Yup
• Semantic UI React

Projects:

• BMI - A simple Express back end to demonstrate the utility of TypeScript. Provides some simple BMI and exercise calculators.
• Course Info Typescript - A simple app to demonstrate the use of TypeScript with React. It is an extension of the course info app from part 1.
• Patientor Front End / Patientor Back End - A medical record app that provides and updates patient details and medical records. The front end and back end were coded using TypeScript to ensure proper handling of widely varying data types for the medical records. There is a RESTful back end with endpoints for fetching and updating medical records. The provided front end was expanded to add pages for displaying patient details and medical records. Formik and Yup were used to create a maintainable form for adding medical records. Semantic UI React was also used. Screenshots.

Part 10 - React Native

Topics:

• React Native
• Expo

Projects:

• Rate Repository App - A React Native frontend for a pre-made GraphQL back end. The app displays a list of GitHub repositories that users have rated and reviewed. The list can be filtered and sorted, and it can be infinitely scrolled. Signed-in users can create reviews for any public GitHub repository. They can see a list of all repositories they've reviewed and delete any of their reviews. The app utilized Formik and Yup for forms and form data validation. Screenshots

Part 11 - CI/CD

Topics:

• CI/CD using GitHub Actions

Projects:

• CI/CD pipeline for a Pokedex App - Created a CI/CD pipeline using GitHub actions for a pre-built Pokedex app. The pipeline includes linting, building, unit tests, end-to-end tests, deployment to Heroku, version tagging, and Slack notifications.
• CI/CD pipeline for the Redux Anecdotes App - Created a CI/CD pipeline using GitHub actions for a the Redux Anecdotes app from part 6. The pipeline includes linting, building, unit tests, end-to-end tests, deployment to Heroku, and version tagging.

Part 12 - Containers

Topics:

• Using Docker

Part 13 - Using Relational Databases

Topics:

• Sequelize ORM
• PostgreSQL
• Database migrations

Projects:

• Blog List Back End (SQL) - A recreation and extension of the previously created RESTful back end from Parts 4 and 7, but using PostgreSQL instead of MongoDB. The application is used for creating, reading, updating or deleting blog post and author data. Users can also create reading lists and mark blogs posts as read. User authentication is accomplished using JSON web tokens. Tokens can also be blacklisted to prevent further use and users can be disabled entirely. Complex data are returned using table joins, query strings to specify data subsets, and aggregate SQL functions to provide data summaries. Sequelize migrations are used to make database changes and to keep a log of those changes.