full stack roadmap

Welcome to the 16-week course of levelOne. Even if you're not part of neogcamp you can still use this 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 ElevateLabs.

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.

week One: 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.

week two: Getting ready for React

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

week three: React I

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

week four: React II

  1. useRef and refs in general
  2. useContext
    • using it for sharing global state
  3. React Debugger

week five: React III

  1. React Perf

    • useMemo
    • useCallback
    • code splitting using React Suspense
  2. Code clarity with useReducer

  3. Writing your own hooks

  4. Error Boundaries

week six: Redux

  1. Redux Toolkit
  2. Redux Devtool

week seven: 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

week eight: deconstructing CRA

Learn what makes Create React App. Understand what constitutes the tooling layer in the React ecosystem.

  1. npm scripts, task runner, knowing gulp, grunt, and some history.
  2. Webpack
    • what's bundling?
    • why do we even need bundling?
    • entry/output
    • loaders
    • plugins
    • mode
  3. Babel
  4. ESLint

Configure webpack for a simple vanillaJS project with Babel and ESLint to understand the flow better.

week nine: 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

week ten: 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

week eleven: 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

week twelve: coding practices I

  1. Linter
  2. Prettier
  3. Clean Coding Practices
  4. Unit testing
    • why unit testing?
    • how it makes us a better programmer?
    • how to think about testing?
    • TDD
      • Red, Green, Refactor
    • jest
      • basics
      • matchers
      • setup and teardown
      • async
      • mocks

week thirteen: 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

week fourteen: CSS Advanced II

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

week fifteen: JS for Interviews I

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. prototype
  4. performance
    • debounce and throttle
    • setTimeout
    • requestAnimationFrame

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.

week sixteen: JS for Interview II

  1. Topics left from week fifteen
  2. Introduction to DSA (Data Structures and Algorithms)
    • queue
    • stack
    • hashmap
    • tree
  3. DSA in JavaScript