neogcamp https://neog.

camp/roadmap

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.

1 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/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

2 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

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

3 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

�� 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

4 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

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

5 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

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
Red, Green, Refactor
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

6 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

�� 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)
queue
stack
hashmap
tree
�� DSA in JavaScript

7 of 8 04-06-2021, 16:30
neogcamp https://neog.camp/roadmap

Terms of Use Privacy Policy Refund Policy Community Guidelines

All materials at this website are © 2020 Kanak Krea (OPC� Pvt. Ltd., All Rights Reserved.

8 of 8 04-06-2021, 16:30