Roadmap for Mastering Full Stack JavaScript in 2023

JavaScript is one of the most popular programming languages ​​today. It is used to build everything from simple interactive websites to complex enterprise-grade web applications. Mastering JavaScript is essential for developers who want to improve their skills and stay relevant in the tech industry. However, with so many frameworks, libraries, and tools to choose from, it can be difficult to know where to start. This comprehensive guide covers everything you need to know to master the entire JavaScript roadmap in 2023.

Level 0. Getting Started

• ● How Internet work

• ● HTTP / HTTPS

• ● JSON / SOAP

• ● Clients, Web servers

• ● What happens when (We type a URL and press Enter in the browser)

• ● How Javascript executes on the client side vs the server side

• ● Git, Github, Gitlab

  • ○ Creating repo

  • ○ Cloning a repo

  • ○ Creating branch

  • ○ Creating a pull request

  • ○ Resolving conflicts

  • ○ Merging code

  • ○ Creating a fork of a repo

  • ○ Commands to learn

■ git push, git pull, git commit, git fetch, git remote, git add, git branch, git status

Level 1. Core Javascript

Material that you’ll love reading: Javascript.info, You don’t know JS

• ● Operators

• ● Variable and Types

  • ○ Primitive vs Non-primitive

  • ○ Mutable vs Immutable

• ● Objects, Prototypes and classes

  • ○ Ways to create objects

  • ○ Iterating objects

  • ○ Manipulating objects

  • ○ Merging objects

  • ○ Creating copies of objects

• ● Functions

  • ○ Simple function

  • ○ Fat arrow function

  • ○ Anonymous functions

  • ○ IIFE

  • ○ High-order functions

  • ○ Passing functions as arguments

• ● Arrays

• ● Creation

• ● Ways to iterate arrays

• ● Manipulating arrays

• ● Loops

  • ○ Different types of loops (for, for in, for of, forEach)

  • ○ Their usage

  • ○ Pros & Cons

• ● Asynchronous programming

  • ○ Async await syntax

  • ○ Creating Promises

  • ○ Callback hells

• ● Implementing OOP concepts in JS

• ● Familiarize yourself with ES6 & Beyond syntax

• ● workshopper/javascripting

• ● JS Design patterns

• ● Advance stuff

  • ○ Generators & iterators

  • ○ Modules

  • ○ Unit Testing

  • ○ Dynamic programming

Level 2. The Basics

• ● HTML, CSS, Tailwind, Bootstrap, Material UI, Chakra UI

  • ○ Learn HTML5 semantic and non-semantic elements

  • ○ HTML crash course

  • ○ Design a simple layout using HTML & CSS

  • ○ Design a modern website homepage using Bootstrap to make it responsive

  • ○ Get to know the material-UI design system principles / behind the scenes.

• ● MySQL

  • ○ Intro to Vertical scaling and horizontal scaling

  • ○ Create a simple form in HTML and onSubmit it should save values to MySQL

    DB

  • ○ DB Keys (Primary, Foreign)

  • ○ Learn SQL JOINS (INNER, OUTER, LEFT, RIGHT)

  • ○ DB Normalization

• ● Hosting a website

  • ○ Explore different freeware options to host websites (Heroku, netlify, GitHub pages) etc.

  • ○ Learn FTP and SSH for transferring files over the server.

Level 3. Frontend (React)

• Basics

  • ○ State

  • ○ Props

  • ○ How to react updates state

  • ○ How to render works

• ● Components

  • ○ Pure components

  • ○ Functional components

  • ○ Memoized components

  • ○ Class components

● States
● Try practising all these, as much as you can (useState + Redux + Context API)

• ● Forms

  • ○ Form handling with and without 3rd party libraries (react-hooks-form)

  • ○ Forms validations and error handling with and without 3rd party libraries

• ● Styling (Styled Components)

  • ○ Using .css and .scss in react files

  • ○ Applying custom fonts

  • ○ Building responsive UIs

• ● Hooks

  • ○ useState, useEffect, useCallback, useRef, useMemo

  • ○ Learn the implementation and differences between the above

• ● Axios

  • ○ Creating a new instance of Axios

  • ○ Modifying headers

  • ○ Default headers

  • ○ Axios interceptors

• ● Advanced

  • ○ Typescript (Interfaces, Types, Enums, Generics, UtilityFunctions)

  • ○ Performance and Profiling

  • ○ Server side rendering (Next.js, Nuxt.js)

  • ○ Sagas

  • ○ Lazy Loading

• ● Real-world projects to build

  • ○ Blogs

  • ○ Online shop

  • ○ Social media platform

Level 4. Backend

Learn REST APIs development In the core node.js environment

• ● An intro to Node.js via a set of self-guided workshops.

• ● Express.js

  • ○ Develop APIs to perform CRUD operations from React app

  • ○ Session handling

  • ○ Learn JWT implementation

• ● Mongoose

  • ○ Get to know Mongoose UI

  • ○ Querying data from Mongo DB

  • ○ Perform CRUD operations with Mongoose

• ● File uploads | Create an API and try

● Explore **sockets
**○ Socket.io implementation in React/RN app

Level 5. Frontend (React Native)

• ● Differences between React and React Native

• ● Differences between react native cli and expo

• ● Familiarize yourself with the directory structure and best practices to create one

• ● Explore native Android/xcode projects

• ● Watch a few RN crash courses on youtube

• ● React navigation

  • ○ Explore all navigators (Stack, Tab, Drawer)

  • ○ Authentication flows

• ● Firebase integration in RN

● Social auth, Analytics, Crashlytics

• ● Animations

  • ○ Animating layouts

  • ○ Navigation animations

  • ○ Implementing gestures

  • ○ Shared element transitions (Hero animation)

  • ○ Limitations in RN

• ● Real-world applications to build

  • ○ Crypto currency portfolio app

  • ○ Travel app

  • ○ Chat app

Conclusion: By 2023, anyone who wants to be a successful developer must master JavaScript. By following this comprehensive roadmap, you'll learn everything you need to know to become fluent in the language. Keep learning and keep abreast of the latest JavaScript advancements. With dedication and perseverance, you can master the entire JavaScript roadmap.