sid-web6306 / javascript-developer-roadmap

Full-Stack JavaScript Developer Roadmap

Hello! I've created this list to help you to get started with JavaScript development. The list below contains a collection of links that have helped me out along the way (and can hopefully help you).

Table of Contents

1. Basic Concepts
2. HTML
3. CSS
4. JavaScript
5. ES6
6. TypeScript
7. React.js
8. Node.js
9. Databases
10. Apollo GraphQL
11. Message Brokers
12. Coding Standards
13. Knowledge Base

---

Basic Concepts

1. IDE (Integrated Development Environment)
   1. VS Code https://code.visualstudio.com/
   2. Sublime Text https://www.sublimetext.com/
2. Version Control
   1. GitHub - https://guides.github.com/activities/hello-world/
3. Concept of Web Server - https://en.wikipedia.org/wiki/Web_server
4. You can simply find out video tutorials for the below web servers:
   1. XAMPP/WAMP/LAMP
   2. IIS (Internet Information Services)
   3. Nginx
5. Web Dev Tools
   1. Ngrok (Expose a local web server to the internet) - https://ngrok.com/docs
   2. Postman (API testing) - https://learning.postman.com/docs/postman/launching-postman/introduction/

HTML

1. https://www.w3schools.com/html/

CSS

1. https://www.w3schools.com/css/

JavaScript

1. https://javascript.info/
2. https://www.learn-js.org/
3. https://www.w3schools.com/js/

ES6

1. https://www.tutorialspoint.com/es6/
2. Features - http://es6-features.org/

TypeScript

1. https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

React.js

1. Basic Concepts - https://reactjs.org/

   1. Components
   2. Code Splitting
   3. Lazy Loading
   4. State
   5. Props
   6. Handlers
   7. Hooks
   8. Lifting State Up
   9. Contexts
      1. Providers
      2. Consumers
   10. HOC (High Order Components)
   11. Synthetic Events
   12. Useful Stuff
       1. Styling
          1. Atomic UX Design - https://atomicdesign.bradfrost.com/chapter-2/
          2. SASS/SCSS/LESS - SASS / LESS
          3. BEM (Block, Element, and Modifiers) - http://getbem.com/introduction/
          4. Styled Component >> NPM Package - https://styled-components.com/docs/
       2. Testing
          1. Enzyme - https://enzymejs.github.io/enzyme/
       3. Utils
          1. Penpal - https://www.npmjs.com/package/penpal

2. Useful React UI Components

   1. Story Book (Build bulletproof UI components faster) - https://storybook.js.org/
   2. Blueprint.js React UI Components - https://blueprintjs.com/docs/
   3. Reflexbox - https://rebassjs.org/reflexbox/
   4. Atlas Kit Dynamic Table - https://atlaskit.atlassian.com/packages/core/dynamic-table/
   5. Spreadsheets - https://handsontable.com/
   6. Nivo Charts - https://nivo.rocks/area-bump/

Node.js

1. Node.js Overview - https://nodejs.org/docs/

2. Express.js - https://expressjs.com/ >> Select Guide Menu

   1. Introduction
   2. API Standards
   3. Controllers
   4. Middlewares
   5. Error Handlers
   6. HATEOAS (Hypermedia As The Engine Of Application State) - https://restfulapi.net/hateoas/

3. Nest.js - https://docs.nestjs.com/

   1. Controllers
   2. Providers
   3. Modules
   4. Middlewares
   5. Exception Filters
   6. Pipes
   7. Guards
   8. Interceptors
   9. Decorators
   10. Swagger

4. Useful Libraries with NPM Links

   1. CORS (Cross Origin Resource Sharing) - https://www.npmjs.com/package/cors
   2. Morgan - https://www.npmjs.com/package/morgan
   3. Body Parser - https://www.npmjs.com/package/body-parser
   4. JWT - https://www.npmjs.com/package/jsonwebtoken
   5. Passport - https://www.npmjs.com/package/passport
   6. Lodash - https://www.npmjs.com/package/lodash
   7. Moment - https://www.npmjs.com/package/moment
   8. Dotenv - https://www.npmjs.com/package/dotenv
   9. PM2 - https://www.npmjs.com/package/pm2
   10. Axios - https://www.npmjs.com/package/axios

Databases

1. MongoDB - https://docs.mongodb.com/manual/crud/
2. MySQL - https://www.w3schools.com/sql/
3. MSSQL - https://www.sqlservertutorial.net/

Apollo GraphQL

1. Full-Stack Developer Tutorial - https://www.apollographql.com/docs/tutorial/introduction/

Message Brokers

1. RabbitMQ - https://www.rabbitmq.com/

Coding Standards

1. Clean Coding - https://github.com/airbnb/javascript
2. The Twelve-Factor App Methodology - https://12factor.net/
3. S.O.L.I.D. Principles - https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design/

Knowledge Base

1. Monolithic & Microservice Structures - https://articles.microservices.com/
   1. Uses
   2. Pros & Cons.
2. Concepts of ABAC and RBAC - ABAC / RBAC
3. Difference Between Library and Framework - https://www.programcreek.com/