How Would I Design a Fullstack Course in 2024

The entire learning process takes too long, it often takes weeks, sometimes months for them to deliver outcomes.

My mantees first took two days to learn the basics of HTML and CSS, then a few days basic Javascripts, then ES6 syntaxes, then react, then node, then...and what's worse it that they have to setup different enviornment for different languages. All those tedious and boarding setups make them less proactive.

The course materials focused on mastering specific libraries or modules, rather than providing a generic abstraction about what is going on.

Once my mantee was learning how to develop RESTful APIs, he might have to first learn how to organise the files in Express, and how to create, then understand how to setup schema and models in Mongoose. Wait, but before that, the tutorial didn't even explain what is point of setting all those up, it's like "Hey, you just do this and to that, and the programme will magically works! it's called CRUD operation in database, that's all you need tou know"

Some courses do not provide solid hands-on experiences on fullstack development.

Silly and useless coding ecercises reduce the passion of the mantee, as the rewarding of completing such tiny projects is not enough. Just imagine tutorials that keep telling you to create static HTML files to understand flex box, let's to duplicate that layout, then that layout and when one day you finally step into the world of React, Next...you found out everyone is using tailwind...

Some courses do provide step-to-step fullstack development demonstrations, but they either skip too much details or those tools literally stacks on each other.

In order to follow the tutorial, you have to know Next, TypeScript, Tailwind, AuthJS, Prisma, ZOD etc... and what if you do not know one of the tools in the stack the tutorial is using? Well, then you bascially have to find another tutorial or learn that tool specifically for that tutorial. What's even worse it the finally product are often only for a particular use case, if you want to slightly modify the application for other usecase, the application crashed, and you have no idea what went wrong because again, the tutorial didn't explain what is going on under the hood.

Case Study: Fullstackopen

Fullstackopen is an ambious course that tried to teach their students how to become a fullstack developmer, they are known as one of the best online fullstack courses on the internet. With that being said, there are still some space for improvements.

Although the author did provide an abstract view about web application in the beginning of the course by explaining how HTTP requests are being sent to the backend, what does the backend do to handle those requests, how it interacts with the database,and eventually send a reponse back to the frontend. The situation soon become worse starting from part 3.

After following a step-by-step tutorial to build a frontend with React and learning how to fetch data with axios in the first two parts. The third part of the course teaches the student how to build Node.JS backend, how to use Mongoose ORM to interact with the database, how to deploy to the internet, and how to validate the codes ESlint

The learning curve literally is like:

1. We will use 4 sections to teach you how to build the UI, easy right?
2. We will use 4 more sections to teach you what is API and how can you consume it, noice.
3. Okay maybe that's a bit slow, so let's use 4 more sections to teach you about Node.JS, Express, middleware, cors, form validation, mongoose, schema, model, MVC, cloud depolyment, and ESLint...

The first problem you may notice is about the pace, all the tools and stacks above are indeed the core of modern webdev, so there is nothing wrong with directly diving into them. As a matter of fact, fullstacopen is already better than lots of the online course which never discuss about some of those topics. However, a typical student of fullstackopen is lack of the theoretical fundations needed to fully understand what is going on, which makes it very hard of them to even grasp some of the concepts behind these tools.

The author of Fullstackopen uses Mongoose to interact with MongoDB, but didn't go in deep to questions like:

• What is a non-relational database?
• Why don't we use a rational database like MySQL or Postgresql?
• What is the ralationship between Mongoose and MongoDB?
• What's the benefit of using an ORM instead of directly interacting with the database?
• What is a Schema and Model in Mongoose?

This leads to the second problem, the tutorial hugely focus on teahcing the students how to use specific tools.

Good tutorials are not only about how to do it, it should also explain:

1. What is the problem we are trying to solve?
2. What are the options do we have to solve such problem?
3. Why are we solving it this way, and
4. What alternatives can we use to get the same result if we decided not do it this way?

The third problem is also the problem which eventually made me decided to withdraw from the course. After introduing ESLint, the course soon introduce NodeJS Test Runner and the Test-driven-development approach in part 4. I totally agree ESLint, MVC, and TDD are all very important for better code in larger coding projects.

The author put too much tedious contents in such a early stage, imagine you just spent hours after hours learning the basics of all these frameworks, libraries, paradigms and you finally completed your first fullstack todo list, and what's waiting for you is writing test cases for all of your API endpoints...does that sound fun to you?

The Goal

The goal of my course is to teach any high-school level students to understand what is going on behind the web applications, and how to build it by their own.

I created this course for my family and friends, especially for my brother, Franklin.

The Difference

• Consider fullstack as a whole, from the web application to the wires on the ground.
• Focus on the mechanism rather than the syntax and nature of the tools.
• Any modules, tools, libraries, and frameworks should be replacable.
• Before coding, there should be comprehensive theories and explanations about the code.
• After theories, there should be followed with projects that being used in real life.
• The entire course shouldn't take more than 2 weeks to complete.
• It must be fun to learn.

The Contents

1. What is Applicaton All about? - Managing Information, that's it.
2. Where and How is the Data Being Stored - Understand and build your own database
3. How is The Data Being Delivered to the Users? - The Story Behind HTTP, TCP and IP
4. How Do We Allow Users to Interact With the Data? - From Frontend Button to the Backend API it Tiggers
5. How Can We Provide Better Experience to the Users? - The Theory Beind UX and UI
6. How Can We Make Our Web Application More Efficient - The Propuse of Using Data Strucuture and Algorithms