full stack roadmap (for self-study)

Welcome to the 16-week course to fullstack development. Even if you're not part of neogcamp you can still use this extensive roadmap as a signpost to learn individual items listed.

opinions

This is an opinionated guide. I have spent 8+ years in this industry and worked in the ReactJS ecosystem. This guide favors React, favors hooks over classes (doesn't even mention classes), favors what I think is good to learn, and thus, is opinionated. It doesn't give you the choice.

I have made this entire course structure from three things:

1. Personal experience.
2. Opinions from thought leaders.
3. Feedback from startup CEOs who hire from roc8.careers.

principles

Below are the principles, in order, used in making decisions while curating this roadmap.

1. Focus on building basics. Basics go long term. They don't change every year.
2. Less magic. When choosing between multiple frameworks, choose which does less so that you understand the basics more.
3. Understand why you're using something. More than the APIs concentrate on concepts. APIs can be looked up online.
4. Should be in the industry for the long term. Whatever is there from long will stay for long. New should be learned later.
5. Choose libraries or concepts which can be used across platforms.
6. Follow best practices from the beginning to build the right foundation.
7. Learn as little as possible. Learn to build full-stack apps. Don't try everything now.
8. Get ready for interviews. Interviews are a tad bit different than day to day programming, I can't change that, so accepting that and getting ready for it is part of the roadmap.

prerequisite

You should follow this 16-week roadmap only after you have done the 5-week course of levelZero which covers the basics of

• HTML5,
• CSS
• Basic JS Programming
• vanillaJS in browser
• Git, Github, VSCode
• React Basics

The videos are up on youtube and are free to consume. 500+ students have completed and made their portfolios within 5 weeks. Please see the levelZero guide to get started.

CSS Advanced I

We will continue where we left in levelZero and learn some more CSS to make your apps better:

1. responsive design
2. flex
3. grid
4. positioning

Philosophy for learning CSS: Don't learn any library, any framework. First, learn and practice the basics as much as possible. Once you have made 5 full apps with pure CSS you will never have problems with CSS. Most of the devs, including me, have made the mistake of jumping to a framework and then lacking in the basics.

Stretch goal for CSS learning: Publish your component library after this camp.

Getting ready for React

1. functional programming in JS
2. Async JS
3. ES6+
4. mock server for API calls

React I

1. useEffect
   • understanding side effects
   • setup and teardown
   • dependency array
   • doing AJAX calls
   • gotchas
   • rules to follow

React II

1. useContext
   • using it for sharing global state
2. React Debugger

React III

1. Code clarity with useReducer
2. Error Boundaries

React Router

1. SPAs and routing
2. Setting up Router
3. Using links
4. URL Parameters/Query Parameters
5. Redirects
6. "active" link
7. 404
8. programmatic navigation

Backend server

Philosophy for backend: Learn only for making APIs. CDN takes care of the file serving.JSX and React takes care of the templating. Don't learn what is not needed in full-stack dev flow anymore.

Note: This one is going to be a long weekend :)

1. Writing RESTful API

   • what's REST?
   • HTTP methods for REST services
   • Organising API endpoints
   • Good naming convention for RESTful services
   • HTTP Status codes
     • 2xx: Success
     • 3xx: Redirection
     • 4xx: Client Error
     • 5xx: Server Error
   • versioning in REST

2. ExpressJS

   • Hello world!
   • basic routing
   • response types
   • handling POST data
   • advanced routing
     • arranging by routes
     • parameters
   • middleware
   • hosting an app in prod
   • exception handling
   • cors

Database

1. Understanding data modeling.
2. ORM (Object Relational Mapper)
   • intro to mongo and sequelize
3. Hosting a MongoDB instance on cloud
4. Mongoose
   • basics
   • schema
   • relationships
   • CRUD
   • mongoose promises
   • integration with Express

User authentication

1. how login works
2. login with React + React Router on FE
3. JWT, handling token with Express
4. Writing your own middleware
5. Authenticated routes on the backend

Coding practices II

1. What are types?
2. Why Typescript and how it helps at scale?
3. Setting up TS in your app
4. Introduction to Typescript
5. Using Typescript with React

CSS Advanced II

1. specificity, cascade
2. animation
3. transitions
4. floats

JS for Interviews

We will have a detailed curriculum here which will go deep into how JS works. Questions which are asked in interviews test the understanding of language:

1. scope
2. closures
3. performance
   • debounce and throttle
   • setTimeout
4. DSA in javaScript

This part is still in the works. This is going to be comprehensive. But you get the idea, we prepare you for interviews from here.