This repository contains all of my submissions for Full Stack Open 2020, an online course offered by the University of Helsinki.
Touted as a 'deep dive into modern web development', this course aims to take those with general programming knowledge and skill and equip them with the latest and greatest methods in web development. Using these methods, we focus on building single page applications with ReactJS with REST APIs built with NodeJS (though GraphQL is taught as well).
The course consists of 11 parts, each with their own exercises to be completed. These exercises require 'perserverance and the ability for independent problem solving and information seeking', which I would say is definitely true!
- Part 0 - Fundamentals of Web apps
- Part 1 - Introduction to React
- Part 2 - Communicating with server
- Part 3 - Programming a server with NodeJS and Express
- Part 4 - Testing Express servers, user administration
- Part 5 - Testing React apps
- Part 6 - State management with Redux
- Part 7 - React router, custom hooks, styling app with CSS and webpack
- Part 8 - GraphQL
- Part 9 - TypeScript
- Part 10 - React Native
The repository for Part 10, React Native can be found here
This course is very dense and teaches a lot of skills. In fact, it acknowledges that those who take it will end up with the dreaded 'JavaScript fatigue'. The reward for their efforts is a skillset that consists of:
In depth knowledge of JavaScript is not a prerequisite. Instead, it is to be learned alongside everything else as the course progresses. The course covers the basics (variables, arrays, objects, functions) first, and points users to the Mozilla JavaScript Guide in order to learn more.
From there, more and more modern JavaScript is taught. This includes: destructuring, arrow functions, promises, async/await, spread syntax, and array methods such as Array.map() and Array.filter().
React is the main library used to create the front end. This starts with components, props, component state and event handlers. React is then built on with a variety of new technologies and techniques. These include hooks (and custom hooks), debugging, adding styling, as well as more influential technologies.
Axios is the main library used to consume REST APIs. This is taught in tandem with promises.
The course teaches full-stack JavaScript, meaning Node is used for the back-end. Express is taught as the go-to framework, and everything is built on top of these two. Postman/Visual Studio Code REST client is taught to be used to build out and test how your server is behaving. Other aspects such as middleware are also touched upon.
MongoDB is the database of choice. We used Mongoose in order to set up a connection with our remote database (in MongoDB Atlas) and configure it to work with our server. Topics taught include references across collections, population, general CRUD usage and creating Mongoose schemas.
Testing is taught for both the backend and the whole application. Jest is used for testing the Express server, and Cypress is used for E2E testing.
As full-stack applications, most of the applications built during the course require some sort of user authentication. This is done through JSON Web Tokens, bcrypt password encryption and also local storage to persist the authentication.
Moving away from useState() hooks for basic state management, Redux is taught as a more organised way to manage state. Redux thunk is added to make asynchronous actions easy.
In order to make a more functional single page application that actually appears to have different pages, React router is taught. This is when the applications start feeling more complete!
CSS-in-JS is taught initially, but later on UI Libraries such as React-Bootstrap and Material UI are touched upon for quick, consistent UI components. I like Material UI, personally.
Though the course mainly uses REST APIs, GraphQL gets its own section. This part teaches how to get a GraphQL server running with Apollo Server, how to make queries and mutations and resolve them, and how to integrate this with both React and Express/MongoDB. More complicated topics in this section are relying on the cache for state management and updating it, and using Apollo's WebSocket based solution for subscriptions within GraphQL to relay information to multiple systems at once.
After honing our JavaScript skills throughout, we learn TypeScript in the penultimate section. The course teaches why TypeScript can be beneficial, and adds typing to both the front-end and back-end.
A final section on React Native is offered as a way of using all the skills we've learned throughout the course to create a hybrid mobile application
As well as general skills, the course teaches various best practices. These include how to structure a file tree, using ESLint for consistent code, using npm scripts to automate certain things and (perhaps most importantly) how to use the power of console.log()!
The step by step approach naturally lends itself to many refactors taking place over the duration of the course. Also there are multiple times where code is revisited and refactored, including a complete refactor from component state management to a Redux state management system.
I believe this course is fantastic, and I will be recommending it to many people. I feel like I have completely levelled up my knowledge of JavaScript, web development and programming as a whole. I plan on putting the vast majority of what I've learned into the next personal project I build!