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:
- Personal experience.
- Opinions from thought leaders.
- Feedback from startup CEOs who hire from ElevateLabs.
principles
Below are the principles, in order, used in making decisions while curating this roadmap.
- Focus on building basics. Basics go long term. They don't change every year.
- Less magic. When choosing between multiple frameworks, choose which does less so that you understand the basics more.
- Understand why you're using something. More than the APIs concentrate on concepts. APIs can be looked up online.
- Should be in the industry for the long term. Whatever is there from long will stay for long. New should be learned later.
- Choose libraries or concepts which can be used across platforms.
- Follow best practices from the beginning to build the right foundation.
- Learn as little as possible. Learn to build full-stack apps. Don't try everything now.
- 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:
- responsive design
- flex
- grid
- 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
- functional programming in JS
- Async JS
- ES6+
- mock server for API calls
week three: React I
- useEffect
- understanding side effects
- setup and teardown
- dependency array
- doing AJAX calls
- gotchas
- rules to follow
week four: React II
- useRef and refs in general
- useContext
- using it for sharing global state
- React Debugger
week five: React III
React Perf
- useMemo
- useCallback
- code splitting using React Suspense
Code clarity with useReducer
Writing your own hooks
Error Boundaries
week six: Redux
- Redux Toolkit
- Redux Devtool
week seven: React Router
- SPAs and routing
- Setting up Router
- Using links
- URL Parameters/Query Parameters
- Redirects
- "active" link
- 404
- programmatic navigation
week eight: deconstructing CRA
Learn what makes Create React App. Understand what constitutes the tooling layer in the React ecosystem.
- npm scripts, task runner, knowing gulp, grunt, and some history.
- Webpack
- what's bundling?
- why do we even need bundling?
- entry/output
- loaders
- plugins
- mode
- Babel
- 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 :)
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
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
- Understanding data modeling.
- ORM (Object Relational Mapper)
- intro to mongo and sequelize
- Hosting a MongoDB instance on cloud
- Mongoose
- basics
- schema
- relationships
- CRUD
- mongoose promises
- integration with Express
week eleven: user authentication
- how login works
- login with React + React Router on FE
- JWT, handling token with Express
- Writing your own middleware
- Authenticated routes on the backend
week twelve: coding practices I
- Linter
- Prettier
- Clean Coding Practices
- Unit testing
- why unit testing?
- how it makes us a better programmer?
- how to think about testing?
- TDD
- jest
- basics
- matchers
- setup and teardown
- async
- mocks
week thirteen: coding practices II
- What are types?
- Why Typescript and how it helps at scale?
- Setting up TS in your app
- Introduction to Typescript
- Using Typescript with React
week fourteen: CSS Advanced II
- specificity, cascade
- animation
- transitions
- 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:
- scope
- closures
- prototype
- 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
- Topics left from week fifteen
- Introduction to DSA (Data Structures and Algorithms)
- DSA in JavaScript