Mohammad Faisal

In this video, we talk about maintaining a single responsibility principle in a ReactJS project. 

We take a real-life example and analyze why this is bad and how we can improve it.

Visit my blog
https://www.mohammadfaisal.dev/blog

Single responsibility Principle in ReactJS

Today, we will install Google Analytics in the NextJS App router project. 

To do that, we are going to create a new property on Google Analytics and then integrate it with the NextJS app router project in the layout file.

This is a quick demonstration of the easiest installation process for a NextJS website.

My website:
https://www.mohammadfaisal.dev/blog/add-google-analytics-to-nextjs

Install Google Analytics in NextJS  (App router)

In this video I talk about how to do state management in URL for NextJS applications.

This is an easy way of doing state management and help reduce the number of re-renders in your application.

Visit my blog
https://www.mohammadfaisal.dev/blog

URL state management in NextJS

In this video, I discuss the different parts of a full-stack application that uses artificial intelligence to create custom chatbots.

Visit my blog
https://www.mohammadfaisal.dev/blog

Architecture of a full-stack AI project

Today I am showing you how you can design your personal projects as a developer.

I am using a tool called Excalidraw, which is really nice and enables me to create fast mockups.

How to design your personal projects as a deveoper.

In this video, we see how we can create a next app router application with redux and redux persist. 

Here we are creating a simple application that demonstrates how we can add redux with a nextjs application.

GitHub repo
https://github.com/Mohammad-Faisal/nextjs-app-router-redux-toolkit-persist-integration

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

How to integrate Redux toolkit + Redux persist with NextJS app router

In this video, I discuss how to implement multiple language support in the ReactJS and NextJS websites. 

To achieve this, we can take advantage of multiple libraries.

- Lokalise
- i18next

etc.

Multiple language support in Reactjs and Nextjs

In this video, I try to explain my thought process to plan a project.

On a high level
- First, create the requirements and write those down.
- Identify the critical user flow. 
- Create the database tables.
- Create the API's
- Move on to the front-end.

How to plan fullstack projects

In this video, we will see how we can send emails in NextJS easily using a service named EmailJS. 

This service helps us to just capture the contents of the email and call a function to get the emails we desire.

The main benefit of this is
- It's easy to use
- Has generous free limit.

Sending email in NextJS using Emailjs

In this video, we see how to solve the performance and SEO problems of a NextJS website. 

The first step is to understand what problems are there in a website and then solve them one by one.

How to fix poerformance problems of nextjs websites

Today, we discuss how to get remote software engineering jobs through we work remotely.

Website:
https://weworkremotely.com/

My Blog:
https://www.mohammadfaisal.dev/projects

Remote jobs through we-work-remotely

In this video, we talk about the different salary ranges for a software engineer. We divide it by region and discuss how much you can expect.

I know this can be very subjective and depends on many factors, so I tried to take a generic approach here.

https://www.mohammadfaisal.dev/blog

Salary range as remote software engineer

In this video, we discuss how to find remote jobs on LinkedIn. I show you how to search and apply for jobs.

https://www.mohammadfaisal.dev/blog

Remote Jobs on Linkedin

In this video, we talk about how to give a good pull request. Especially working as a remote software engineer. 

This guide will help you if you are working professionally as a remote software engineer. 

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

A Good PR

Today I will talk about a tool that is called v0.dev. 
This tool can generate UI from text prompts. In fact, it will produce nice ReactJS code. 

You can generate ui ux with ai using this tool.

Tool
https://v0.dev/

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

Automatic UI+Code generation from Prompts for React

In this video, we talk about some nice terminal applications.

1 .thefuck
2. btop
3. fzf
4. tldr

You can read the actual article here.
https://www.mohammadfaisal.dev/blog/awesome-terminal-applications

Awesome Terminal Applications

In this video, we discuss the Strapi and Sanity CMS.

We compare,
- Their cost.
- Pros and Cons.
- Data model.
- Storage options.

And finally we discuss which one to use for which kind of projects.

Strapi vs Sanity CMS

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

Videos that I made on Youtube!