Mohammad Faisal

Today we will learn how we can find out unnecessary packages in a NextJS application using Next bundle analyzer. 

This is a nice tool that can help use achieve better performance for our nextjs application. It will improve the SEO results for our application and reduce load time for users.

How to Find Unnecesary Packages in NextJS

In this video, we are showing how to use chrome dev tools to find out unused javascript codes of a website and how we can improve the performance of a website.

Personal website:
https://www.mohammadfaisal.dev/

Pagespeed Insights:
https://pagespeed.web.dev/

Remove Unused Javascript Code in NextJS

in this video we learn about a new tool called docusaurus which can be used to create static documentation/personal websites in minutes.

This tool is built on top of ReactJS.

Documentation:
https://docusaurus.io/

Personal Blog:
https://www.mohammadfaisal.dev/blog

Create Documentation Websites Easily with Docusaurus

Today we will learn how we can use ThreeJS with ReactJS. We will use special package called react-three-fiber to render a 3d model to the React Application. We will also learn how to optimize the performance.

Blog post: https://www.mohammadfaisal.dev/blog/3d-graphics-in-reactjs-and-threejs
Github code: https://github.com/Mohammad-Faisal/react-threejs-demo
Demo: https://react-threejs-demo.vercel.app/
3D model: https://sketchfab.com/3d-models/radio-shack-trs-80-model-1-9e3277cd95274f248d12b91dff3ea1cb

How to use ThreeJS with ReactJS

In this video, we will see how we can use NestJS to implement a Websocket server. 

We will show how to add WebSockets into an existing server. We will see how the dependency version is important. 

We will cover emitting events and listening to events using websocket in NestJS.

Implement Websockets in NestJS

This video shows different ways to manage multiple environments for a CDK application.

Github Repo:
https://github.com/Mohammad-Faisal/cdk-v2-template-project

Website:
https://www.mohammadfaisal.dev/

Multiple environment setup in AWS CDK

This video shows why Toptal is the best platform to find Remote Jobs.

- Why Toptal is best remote job platform
- How to apply to Toptal
- Vetting process on Toptal
- How to find a Job

My referral link:
https://www.toptal.com/NEo5v8/worlds-top-talent

How to get a Remote Job through Toptal

This video shows how to use a custom structure for a CDK application.

Github Repo:
https://github.com/Mohammad-Faisal/cdk-v2-template-project

Website:
https://www.mohammadfaisal.dev/

AWS CDK Project Structure

This video shows you how to get started with StackOverflow

- Why you should answer questions on StackOverflow.
- How to Create the profile
- How to find the relevant questions to answer
- How to answer

My StackOverflow profile:
https://stackoverflow.com/users/5379437/mohammad-faisal

How to answer questions on Stackoverflow

This video shows how to create a beautiful GitHub profile and shares some resources.

My Github profile:
https://github.com/Mohammad-Faisal

Additional resources:
https://rahuldkjain.github.io/gh-profile-readme-generator/
https://gprm.itsvg.in/
https://profilinator.rishav.dev/
https://github.com/topics/github-readme-generator

How to create a Beautiful Github Profile

This video shows how to automatically upload a docker image to the docker hub using Github actions.

- How to set up a GitHub action from scratch.
- How to set up the secrets in Github Repository.
- Running the job every time anything is pushed to the master branch.
- Testing the updated image

Workflow file:
https://gist.github.com/Mohammad-Faisal/ed09ef3d46cd4a771a40e3f75361a732

Example Project:
https://github.com/Mohammad-Faisal/express-typescript-docker/actions

Publish Docker Image to Dockerhub using Github Actions

This video shows how to structure a NodeJS project.

- File type-based structuring: If your project is small
- Feature-based structuring: If your project is large

This video discusses the benefits of using one over the other.

File type-based project:
https://github.com/Mohammad-Faisal/professional-express-sequelize-docker-boilerplate.

Feature-based project:
https://github.com/Mohammad-Faisal/nestjs-template-app

How to structure a NodeJS project

This video shows how to use Docker for local development.

- How to set up a development docker file
- How to use docker-compose for local development
- Demonstrates hot reloading in the local environment for docker.

Github Repo:
https://github.com/Mohammad-Faisal/express-typescript-docker

Article:
https://levelup.gitconnected.com/use-docker-with-nodejs-projects-like-a-pro-a9e7504e1308

Using Docker for Local Development in NodeJS projects

This video shows how we can use Docker with NodeJS projects. 
- We will see how a Dockerfile is created and understand different parts of it.
- We will build the docker image.
- We will run the docker image
- We will also test the endpoint

Article:
https://levelup.gitconnected.com/use-docker-with-nodejs-projects-like-a-pro-a9e7504e1308

Github Repo:
https://github.com/Mohammad-Faisal/express-typescript-docker

How to use Docker with NodeJS/ExpressJS Projects

In a previous video, we discussed how we can use the Blog template created by me.
You can find the video here.
https://www.youtube.com/watch?v=lEljvKRtU4c

In this video, we are talking about the various technical aspects of this blog. How we can use it and how different features are integrated.

Template:
https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template

Live Demo:
https://www.mohammadfaisal.dev/blog

Previous Video:
https://www.youtube.com/watch?v=lEljvKRtU4c

Technical Breakdown of the NextJS blog template

Today we will show how you can use a NextJS blog template and make your own blog which will be deployed in Github Pages directly without you doing anything.

Github Template:
https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template

Live Demo: (On my personal website)
https://www.mohammadfaisal.dev/blog

Get Your Personal Blog in 5 minutes

In this video, I show you how to achieve dependency injection in a NodeJS application.

We will be using TypeDI for this purpose.

Github Repo:
https://github.com/Mohammad-Faisal/dependency-injection-nodejs

Blog:
https://www.mohammadfaisal.dev/blog/dependency-injection-in-nodejs

TypeDI:
https://github.com/typestack/typedi

Dependency Injection in NodeJS

In today's video, we will see how we can integrate the Buy me a coffee button into a ReactJS application.

Github Repo:
https://github.com/Mohammad-Faisal/reactjs-buy-me-a-coffee

Assets for button:
https://www.dropbox.com/sh/ouq313p1mqfxyb4/AAB3a1-YX9rI_og8sbShRGGUa/Buttons%20%26%20Icons?dl=0&subfolder_nav_tracking=1

My page:
https://www.buymeacoffee.com/mohammadfaisal

My Website:
https://www.mohammadfaisal.dev/

Buy me a coffee button in ReactJS

Today we will see how we can upload files to google drive from ReactJS using ReactJS and NodeJS.

We are not using Oauth2 here. we are using a service account to achieve this.

Blog post:
https://www.mohammadfaisal.dev/blog/google-drive-nodejs-react

Upload files to Google Drive using ReactJS+NodeJS.

In this video, I am showing how to highlight code for any NextJS or ReactJS application. We are using PrismJS to do that.

PrismJS:
https://www.npmjs.com/package/prismjs

Prism Themes:
https://github.com/PrismJS/prism-themes

Demo:
https://www.mohammadfaisal.dev/blog

Code Highlight with PrismJS

In this video, we show how we can integrate google analytics to a NextJS website very easily.


Medium Article:
https://enlear.academy/add-google-analytics-to-a-next-js-application-5525892844db

Github Repo:
https://github.com/Mohammad-Faisal/nextjs-google-analytics-demo

Google Analytics
https://analytics.google.com/analytics/web/

NextJS Scripts:
https://nextjs.org/docs/basic-features/script

Add Google Analytics with NextJS

In this video, we see how we can generate a favicon of our own and use it inside a NextJS project. 

Github Repo:
https://github.com/Mohammad-Faisal/personal-portfolio-frontend

Add Favicon to NextJS Website

In this video, we will show how we can add any google font to your nextjs website.
We will see 2 ways to do this. 

1. Using custom document
2. Using CSS Import

Google Fonts:
https://fonts.google.com/

Custom Document:
https://nextjs.org/docs/advanced-features/custom-document

Github Repo:
https://github.com/Mohammad-Faisal/nextjs-fonts-demo

Medium Article:
https://enlear.academy/how-to-add-google-fonts-to-your-next-js-website-e62272a0ff57

Add Google Fonts to NextJS

In this video, we show how we can make a blog post look better without any code with tailwind CSS. 
Here we are using a particular plugin named @tailwind/typography to do this.

Install Tailwind in NextJS: 
https://tailwindcss.com/docs/guides/nextjs

Typography Plugin:
https://www.npmjs.com/package/@tailwindcss/typography

Github Repository
https://github.com/Mohammad-Faisal/personal-portfolio-frontend

Make Your NextJS Blog Beautiful with Tailwind Typography

In this video we are designing a lambda that will get triggered automatically when we upload a file to was s3 bucket.

We will download the file inside the lamba function and do some operation on it.

The complete code for this video can be found at
https://github.com/Mohammad-Faisal/aws-sam-lambda-trigger-s3-upload

How to Download file from AWS S3 to Lambda function automatically

In this video, we will use the material table in a React project. This is one of the most powerful table components for the ReactJS application. 

The Github Repo: 
https://github.com/Mohammad-Faisal/material-table-demo

Material Table Documentation:
https://material-table.com/#/docs/get-started

Material Table: The most powerful table component for ReactJS

In this tutorial, I have shown a powerful yet simple to use and lightweight library named SWR. This library can help us to manage remote data fetching easily. 

Github Repo: https://github.com/Mohammad-Faisal/learn-swr

Eliminate Data Fetching Pain with React SWR

In this video, I have shown how we can use React Hook Form with Material UI to create re-usable forms.

All the codes are in this repo
https://github.com/Mohammad-Faisal/react-hook-form-material-ui

Material UI with React Hook Form

In this video, we will see how we can check the equality of 2 javascript objects. We will use a library named 'deep-equal'. This is a very popular npm package that is used for checking objects' equality!

Repository Link: https://github.com/Mohammad-Faisal/learning-react/tree/deep-equal

Library Link: https://www.npmjs.com/package/deep-equal

Deep equality check of javascript objects made easy

In this tutorial, we will see how we can identify and solve performance problems in a React application. We will use 'why-did-you-render' library which is used for this purpose. 

Project Code: 
https://github.com/Mohammad-Faisal/why-did-you-render-demo

Videos that I made on Youtube!