Full-stack Open by The University of Helsinki
The React, Node.js, and testing foundation behind my first complete applications
- HTML
- SASS
- JavaScript
- React
- Node.js
- JEST
Learning to connect the browser, server, and database
Full-stack Open was an important part of my foundation in React, Node.js, APIs, databases, and testing. I later used those ideas to build an e-commerce application from storefront to administration. This review records that learning stage and the connection between the course exercises and a complete project.
The Prerequisites
The Full-stack Open requires us to have good programming skills, a basic knowledge of web programming and databases, and familiarity with the basics of the Git version control system. Additionally, perseverance and the ability to solve problems and seek information independently are expected. That's why I highly recommend completing The Odin Project course before starting FSO, unless you already possess such skills, in which case you can begin with FSO directly.
The course content
The course content is exceptionally comprehensive and well-structured. It provides a robust foundation for web development. Though the journey is not a walk in the woods, the knowledge gained is undoubtedly worth the effort.
- PART 0 - Fundamentals of Web apps (a. General Info, b. Fundamentals of Web apps)
- PART 1 - Introduction to React (a. Introduction to React, b. JavaScript, c. Component state, event handlers, d. A more complex state, debugging React apps)
- PART 2 - Communicating with server (a. Rendering a collection, modules, b. Forms, c. Getting data from server, d. Altering data in server, e. Adding styles to React app)
- PART 3 - Programming a server with NodeJS and Express (a. Node.js and Express, b. Deploying app to the internet, c. Saving data to MongoDB, d. Validation and ESLint)
- PART 4 - Testing Express servers, user administration (a. Structure of backend application, introduction to testing, b. Testing the backend, c. User administration, d. Token authentication)
- PART 5 - Testing React apps (a. Login in frontend, b. props.children and PropTypes, c. Testing React apps, d. End-to-end testing)
- PART 6 - Advanced state management (a. Flux architecture and Redux, b. Many reducers, c. Communicating with the server in a Redux application, d. React Query, useReducer, and the context)
- PART 7 - React router, custom hooks, styling app with CSS and webpack (a. React Router, b. Custom hooks, c. More about styles, d. Webpack, e. Class components, Miscellaneous, f. Exercises: extending the bloglist)
The exercises
Each part of the course includes approximately 20 exercises (except for Part 0, which has only 6), which we solve in real-time. It's not a scenario where we read the theory and do exercises only at the end. Here, we solve exercises literally every few paragraphs. This approach allows us to reinforce the knowledge we acquire while reading by immediately applying it through exercises. The difficulty of the exercises is remarkably well-balanced; they are neither too easy nor too challenging. This balance is beneficial as it keeps us motivated without causing discouragement. The exercises differ sufficiently from the examples provided in the source material, requiring effort and allowing for better retention of knowledge. Some exercises are marked with an asterisk, indicating that they are optional. However, I recommend completing all of them.
The submission system
To submit exercise solutions, follow the specified process and submit them to a GitHub repository. After completing a specific number of exercises, mark your progress in the submission system, and remember, you can do this only once for each part. Be sure to use an appropriate naming system for directories when submitting exercises from different parts to the same repository. Plagiarism is monitored, and the University of Helsinki's policy on plagiarism is enforced if violations are detected
Quick Summary
The course doesn't particularly emphasize styling applications. The majority of time is dedicated to programming both the frontend and backend, as well as testing our code. It's not a drawback but an advantage. Contemporary CSS frameworks are introduced in a sufficient manner. However, if someone masters the main programming aspects of the course, they can refine styling on their own. If I could change something in the Core Course, I would prefer to learn SQL + PostgreSQL, instead of MongoDB. I would place MongoDB in the supplementary course. However, from a teaching perspective, using MongoDB in the Core Course was probably justified due to its ease of use. In that case, maybe it should stay that way.
As I mentioned at the beginning of this short review, the course is just great. It is probably the best online source for learning full-stack development. And if that wasn't enough, it is officially conducted by the University of Helsinki, it's free, and you receive ECTS points. Additionally, upon completion of each exercise, you will receive an accessible online certificate!
The Practice
I put the course into practice by building Ilustrografia, a MERN and TypeScript e-commerce application. That meant connecting the storefront, backend, user accounts, checkout, and administration rather than solving one exercise at a time. The work exposed the decisions that a course can introduce but cannot make for you: how the feature should behave, how its data should be modeled, and how to check the complete journey.
The project took about three months and became an important step from course exercises to independent full-stack work. The course gave me the foundations; building the application made me responsible for joining them together.
This is not the end
Completing the Core Course (Parts 0-7) is just the beginning of what Helsinki's Full-stack Open has to offer. Participants can also take part in many excellent supplementary courses, including:
- PART 8 - GraphQL (a. GraphQL-server, b. React and GraphQL, c. Database and user administration, d. Login and updating the cache, e. Fragments and subscriptions)
- PART 9 - TypeScript (a. Background and introduction, b. First steps with TypeScript, c. Typing an Express app, d. React with types, e. Grande finale: Patientor)
- PART 10 - React Native (a. Introduction to React Native, b. React Native basics, c. Communicating with server, d. Testing and extending our application)
- PART 11 - CI/CD (a. Introduction to CI/CD, b. Getting started with GitHub Actions, c. Deployment, d. Keeping green, e. Expanding Further)
- PART 12 - Containers (a. Introduction to Containers, b. Building and configuring environments, c. Basics of Orchestration)
- PART 13 - Using relational databases (a. Using relational databases with Sequelize, b. Join tables and queries, c. Migrations, many-to-many relationships)
I've completed two of them so far: PART 9 - TypeScript and PART 13 - Using relational databases. I'll share my experiences with them next time :)