Hind In Tech

ADVANCED

1. E-commerce Website

2. Social Network

3. Online Learning Platform

4. Music Streaming Service

5. Real Estate Listing

6. Project Management Tool

7. Chatbot Interface

8. Job Board

9. Weather Forecast with Al

10. Stock Trading Platform

11. loT Dashboard

12. Voice Assistant Interface

13. Expense Report Generator

14. Augmented-Reality App

15. Interactive 3D Graphics

16. Blockchain Explorer

17. Machine-Learning Dashboard

18. Language Learning App

19. Financial Planning

INTERMEDIATE

1. Chat Application

2. Expense Tracker

3. Weather Dashboard

4. Portfolio CMS

5. Blog CMS

6. Interactive Maps Data

7. Weather-App

8. Geolocation

9. Task Management App

10. Online Quiz Platform

11. Calendar App

12. Social-Media Dashboard

13. Stock Market Tracker

14. Travel Planner

15. Online Code Editor

16. Movie Database

17. Recipe-Sharing Platform

18. Portfolio Generator

19. Interactive-Data Visualization

19..Pomodoro Timer

BEGINNER

1. Portfolio Website

2. To-Do List App

3. Weather App

4. Calculator

5. Blog Website

6. Timer/Stopwatch

7. Image Slider

8. Quote Generator

9. Countdown Timer

10. Responsive Nabar

11. Contact Form

12. Currency Converter

13. Login/Register Form

14.. Interactive Quiz

15. Card Memory Game

16. Interactive Maps

17. Recipe Finder

18. Music Player

19. Social Media Profile

Step 1:- Make a portfolio of a few standout projects.

Step 2:- Build projects and add them to GitHub.

Step 3:- Prepare for technical interviews.

Step 4:- Network with other developers.

Step 5:- Learn new and relevant skills.

Step 6:- Define what kind of company or role you want.

Step 7:- Stay organized and track everything.

Step 8:- Write a meaningful resume and cover letter.

Step 9:- Start job hunt.

Step 10:- Interview even if not sure you're ready.

Step 11:- Avoid settling for less, and negotiate.

Step 1:- Learn HTML and CSS.

Step 2:- Learn JavaScript.

Step 3:- Learn React, Node.js

Step 4:- MySQL

Step 5:- MongoDB

Step 6:- Git Commands.

Step 7:- Build Projects and Push on GitHub.

Step 8:- Practice, Practice and Practice.

Anyone can be cool, But Awesome takes practice.

1.Core:

• git init

• git clone

• git add

• git commit

• git status

• git diff

• git checkout

• git reset

• git log

• git show

• git tag

• git push

• git pull

2.Branching:

• git branch

• git checkout -b

• git merge

• git rebase

• git branch --set-upstream-to

• git branch --unset-upstream

• git cherry-pick

3.Merging:

• git merge

• git rebase

4.Stashing:

• git stash

• git stash pop

• git stash list

• git stash apply

• git stash drop

5.Remotes:

• git remote

• git remote

• add git

• remote remove

• git fetch

• git pull

• git push

• git clone --mirror

6.Configuration:

• git config

• git global config

• git reset config

7. Plumbing:

• git cat-file

• git checkout-index

• git commit-tree

• git diff-tree

• git for-each-ref

• git hash-object

• git Is-files

• git Is-remote

• git merge-tree

• git read-tree

• git rev-parse

• git show-branch

• git show-ref

• git symbolic-ref

• git tag --list

• git update-ref

8.Porcelain:

• git blame

• git bisect

• git checkout

• git commit

• git diff

• git fetch

• git grep

• git log

• git merge

• git push

• git rebase

• git reset

• git show

• git tag

9.Alias:

• git config --global alias.<alias> <command>

10.Hook:

• git config --local core.hooksPath <path>

11.Experimental: (May not be fully Supported)

• git annex

• git am

• git cherry-pick --upstream

• git describe

• git format-patch

• git fsck

• git gc

• git help

• git log --merges

• git log --oneline

• git log --pretty=

• git log --short-commit

• git log --stat

• git log --topo-order

• git merge-ours

• git merge-recursive

• git merge-subtree

• git mergetool

• git mktag

• git mv

• git patch-id

• git p4

• git prune

• git pull --rebase

• git push --mirror

• git push --tags

• git reflog

• git replace

• git reset --hard

• git reset --mixed

• git revert

• git rm

• git show-branch

• git show-ref

• git show-ref --heads

• git show-ref --tags

• git stash save

• git subtree

• git taq --delete

• git tag --force

• git tag --sign

• git tag -f

• git tag -I

• git tag --verify

• git unpack-file

• git update-index

• git verify-pack

1.Introduction to Node.js

• JavaScript Runtime for Server-Side Development

• Non-Blocking I/0

2.Setting Up Node.js

• Installing Node.js and NPM

• Package.json Configuration

• Node Version Manager (NVM)

3.Node.js Modules

• CommonJS Modules (require, module.exports)

• ES6 Modules (import, export)

• Built-in Modules (e.g., fs, http, events)

4.Core Concepts

• Event Loop

• Callbacks and Asynchronous Programming

• Streams and Buffers

5.Core Modules

• fs (File Svstem)

• http and https (HTTP Modules)

• events (Event Emitter)

• util (Utilities)

• os (Operating System)

• path (Path Module)

6.NPM (Node Package Manager)

• Installing Packages

• Creating and Managing package.json

• Semantic Versioning

• NPM Scripts

7.Asynchronous Programming in Node.js

• Callbacks

• Promises

• Async/Await

• Error-First Callbacks

8.Express.js Framework

• Routing

• Middleware

• Templating Engines (Pug, EJS)

• RESTful APIs

• Error Handling Middleware

9.Working with Databases

• Connecting to Databases (MongoDB, MySQL)

• Mongoose (for MongoDB)

• Sequelize (for MySQL)

• Database Migrations and Seeders

10.Authentication and Authorization

• JSON Web Tokens (JWT)

• Passport.js Middleware

• OAuth and OAuth2

11.Security

• Helmet.js (Security Middleware)

• Input Validation and Sanitization

• Secure Headers

• Cross-Origin Resource Sharing (CORS)

12.Testing and Debugging

• Unit Testing (Mocha, Chai)

• Debugging Tools (Node Inspector)

• Load Testing (Artillery, Apache Bench)

13.API Documentation

• Swagger

• API Blueprint

• Postman Documentation

14.Real-Time Applications

• WebSockets (Socket.io)

• Server-Sent Events (SSE)

• WebRTC for Video Calls

15.Performance Optimization

• Caching Strategies (in-memory, Redis)

• Load Balancing (Nginx, HAProxy)

• Profiling and Optimization Tools (Node Clinic, New Relic)

16.Deployment and Hosting

• Deploying Node.js Apps (PM2, Forever)

• Hosting Platforms (AWS, Heroku, DigitalOcean)

• Continuous Integration and Deployment-(Jenkins, Travis CI)

17.RESTful API Design

• Best Practices

• API Versioning

• HATEOAS (Hypermedia as the Engine-of Application State)

18.Middleware and Custom Modules

• Creating Custom Middleware

• Organizing Code into Modules

• Publish and Use Private NPM Packages

19.Logging

• Winston Logger

• Morgan Middleware

• Log Rotation Strategies

20.Streaming and Buffers

• Readable and Writable Streams

• Buffers

• Transform Streams

21.Error Handling and Monitoring

• Sentry and Error Tracking

• Health Checks and Monitoring Endpoints

22.Microservices Architecture

• Principles of Microservices

• Communication Patterns (REST, gRPC)

1.Components

• Functional Components

• Class Components

• JSX (JavaScript XML) Syntax

2.Props (Properties)

• Passing Props

• Default Props

• Prop Types

3.State

• useState Hook

• Class Component State

• Immutable State

4.Lifecycle Methods (Class Components)

• componentDidMount

• componentDidUpdate

• componentWillUnmount

5.Hooks (Functional Components)

• useState

• useEffect

• useContext

• useReducer

• useCallback

• UseMemo

• UseRef

• uselmperativeHandle

• useLayoutEffect

6.Event Handling

• Handling Events in Functional Components

• Handling Events in Class Components

7.Conditional Rendering

• it Statements

• Ternary Operators

• Logical && Operator

8.Lists and Keys

• Rendering Lists

• Keys in React Lists

9.Component Composition

• Reusing Components

• Children Props

• Composition vs Inheritance

10.Higher-Order Components (HOC)

• Creating HOCs

• Using HOCs for Reusability

11.Render Props

• Using Render Props Pattern

12.React Router

• <BrowserRouter>

• <Route>

• <Link>

• <Switch>

• Route Parameters

13. Navigation

• useHistory Hook

• useLocation Hook

State Management

14.Context API

• Creating Context

• useContext Hook

15.Redux

• Actions

• Reducers

• Store

• connect Function (React-Redux)

16.Forms

• Handling Form Data

• Controlled Components

• Uncontrolled Components

17.Side Effects

• useEffect for Data Fetching

• useEffect Cleanup

18.AJAX Requests

• Fetch AP

• Axios Library

Error Handling

19.Error Boundaries

• componentDidCatch (Class Components)

• ErrorBoundary Component (Functional

Components)

20.Testing

• Jest Testing Framework

• React Testing Library

21. Best Practices

• Code Splitting

• PureComponent and React.memo

• Avoiding Reconciliation

• Keys for Dynamic Lists

22.Optimization

• Memoization

• Profiling and Performance Monitoring

23. Build and Deployment

• Create React App (CRA)

• Production Builds

• Deployment Strategies

Frameworks and Libraries

24.Styling Libraries

• Styled-components

• CSS Modules

25.State Management Libraries

• Redux

• MobX

26.Routing Libraries

• React Router

1.Variables

• var

• let

• const

2.Data Types

• number

• string

• boolean

• nUll

• undefined

• symbol

3.Declaring variables

• var

• let

• const

4.Expressions

Primary expressions

• this

• Literals

• []

• {}

• function

• class

• function*

• async function

• async function*

• /ab+c/i

• 'string'

• ()

Left-hand-side expressions

• Property accessors

• ?.

• new

• new .target

• import.meta

• super

• import()

5.operators

• Arithmetic Operators: +, -, *, /, %

• Comparison Operators: ==, ===，!=,!==, <, >, <=, >=

• Logical Operators: &&, ||, !

6.Control Structures

• if

• else if

• else

• switch

• case

• default

7.Iterations/Loop

• do…..while

• for

• for...in

• for...of

• for await...of

• while

8.Functions

• Arrow Functions

• Default parameters

• Rest parameters

• arguments

• Method definitions

• getter

• setter

9.Objects and Arrays

• Object Literal: { key: value }

• Array Literal: [element1, element2, ...]

• Object Methods and Properties

• Array Methods: push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter()

10.Classes and Prototypes

• Class Declaration

• Constructor Functions

• Prototypal Inheritance

• extends keyword

• super keyword

• Private class features

• Public class fields

• static

• Static initialization blocks

11.Error Handling

• try,

• catch,

• finally (exception handling)

12.Closures

• Lexical Scope

• Function Scope

• Closure Use Cases

13.Asynchronous JavaScript

• Callback Functions

• Promises

• async/await Syntax

• Fetch API

• XMLHttpRequest

14.Modules

• import and export Statements (ES6 Modules)

• CommonJS Modules (require, module.exports)

15.Event Handling

• Event Listeners

• Event Obiect

• Bubbling and Capturing

16.DOM Manipulation

• Selecting DOM Elements

• Modifying Element Properties

• Creating and Appending Elements

17.Regular Expressions

• Pattern Matching

• RegExp Methods: test(), exec(), match(), replace()

18.Browser APIs

• localStorage and sessionStorage

• navigator Obiect

• Geolocation API

• Canvas API

19.Web APIs

• setTimeout(), setlnterval()

• XMLHttpRequest

• Fetch API

• WebSockets

20. Functional Programming

• Higher-Order Functions

• map(), reduce(), filter()

• Pure Functions and Immutability

21.Promises and Asynchronous Patterns

• Promise Chaining

• Error Handling with Promises

• Async/Await

22.ES6+ Features

• Template Literals

• Destructuring Assignment

• Rest and Spread Operators

• Arrow Functions

• Classes and Inheritance

• Default Parameters

• let, const Block Scoping

23.Browser Object Model (BOM)

• window Object

• history Object

• location Obiect

• navigator Object

24.Node.js Specific Concepts

• require()

• Node.js Modules (module.exports)

• File System Module (fs)

• pm (Node Package Manager)

25.Testing Frameworks

• Jasmine

• Mocha

1. Box Model

• width

• height

• margin

• padding

• border

• box-sizing

2. Positioning

• position

• top

• right

• bottom

• left

• float

• clear

• z-index

3. Typography

• font-family

• font-size

• font-weight

• font-style

• color

• line-height

• letter-spacing

• text-align

• text-decoration

• text-transform

4. Visual Formatting

• background-color

• background-image

• background-repeat

• background-position

• background-size

• color

• display

• visibility

• overflow

• opacity

5. Flexbox

• display: flex;

• flex-direction

•justify-content

• align-items

• align-self

• flex

6. Grid Layout

• display: grid;

• grid-template-columns

• grid-template-rows

• grid-column

• grid-row

• grid-gap

• grid-area

7. Transforms and Animations

• transform

• transition

• animation

8. Others

• cursor

• list-style

• outline

• user-select

1. Document Structure

• <!DOCTYPE>

• <html>

• <head>

• <title>

• <meta>

• <link>

• <script>

• <noscript>

• <base>

2. Text Content

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

• <p>

• <span>

• <strong>

• <em>

• <br>

• <hr>

• <!-- Comment text here -- >

3. Lists

• <ul>

• <ol>

• <li>

• <dl>

• <dt>

• <dd>

4. Links and Navigation

• <a>

• <nav>

• <link>

5. Embedded Content

• <img>

• <audio>

• <video>

• <iframe>

• <canvas>

• <svg>

• <map>

• <area>

6. Forms

• <form>

• <input>

• <textarea>

• <button>

• <select>

• <option>

• <label>

• <fieldset>

• <legend>

• <datalist>

• <output>

7. Tables

• <table>

• <tr>

• <th>

• <td>

• <caption>

8. Semantic Elements

• <article>

• <section>

• <header>

• <footer>

• <aside>

• <main>

• <figure>

• <figcaption>

• <mark>

• <progress>

• <time>

• <details>

• <summary>

9. Deprecated Elements (Avoid Using)

• <center>

• <font>

1. Refine

React CRM App Template (GraphQL).

Fully-functional CRM App built with refine(React framework) and GraphQL.

It's completely open-source. Check out the source code here:

2. 50 Projects 50 Days

50+ mini web projects using HTML, CSS & JavaScript.

3. Clean Code JavaScript

Guide to producing readable, reusable, and refactorable software in JavaScript.

4. Public APIs

A collective list of free APIs for use in software and web development

5. React bits

React patterns, techniques, tips, and tricks.