DEV Community: Al Amin Rifat

Free Claude Code Guide: Commands, Subagents, Skills, Hooks — All in 26 Pages

Al Amin Rifat — Sun, 01 Mar 2026 16:33:08 +0000

Hey devs 👋

For the past 2 months, I've been using Claude Code every day for my development workflow. Every time I discovered something useful — a command, a trick, a workflow — I wrote it down.

Those notes eventually turned into a 26-page structured guide covering Claude Code from zero to advanced.

What's covered

Module 1: Claude Code

Setup (Mac/Windows), all slash commands, session management, CLAUDE.md, MCP servers, subagents, skills, plugins, hooks, sandboxing, headless mode

Module 2: Fundamental Techniques

Prompting strategies, context management, planning workflows, project scaling, debugging

Module 3: Advanced Techniques

Model selection, using external resources, complex problem solving, refactoring with subagents, automation

Module 4: Advanced Context Engineering

Signal-to-noise optimization, cognitive inertia, progressive disclosure, context layers

Bonus: Quick Reference Card

All essential commands, keyboard shortcuts, and key file locations in one place.

Get the guide (Free)

🔗 Download here → alaminrifat.gumroad.com/l/claude_guide

It's completely free. I made this to help others get productive with Claude Code faster than I did.

If you find it useful, feel free to share it with others. Feedback is always welcome!

PropTypes in React.js: Unleashing Type Safety for Enhanced Development

Al Amin Rifat — Thu, 01 Feb 2024 11:11:58 +0000

PropTypes serves as a mechanism to enforce the expected data types for each prop in React components. By utilising PropTypes, we can ensure that the data passed to our components aligns with the intended types, promoting correctness and preventing potential issues in the rendered output. It act as a kind of "gatekeeper" ensuring the component receives the correct type of data for each prop, which leads to several benefits.

Here are the key reasons behind why should we use PropTypes in React JSX:

Early Error Detection:
PropTypes catch type errors during development, preventing them from reaching production where they could cause unexpected behavior or crashes.
They provide clear warnings in the console when a prop is passed with an incompatible type, making it easier to identify and fix issues early on.
Code Clarity and Documentation:
PropTypes explicitly define the expected types of props a component accepts, acting as a form of self-documentation.
This makes the component's interface more explicit and easier for other developers to understand and use correctly.
Refactoring Safety:
When refactoring code, PropTypes can help ensure changes don't inadvertently break component usage by alerting you to potential type mismatches.
This reduces the risk of introducing errors during refactoring and helps maintain code integrity.
Debugging Assistance:
PropTypes can provide helpful clues when debugging issues related to prop usage.
By knowing the expected types of props, you can more quickly pinpoint where type-related errors might be occurring.
IDE Integration:
Many code editors and IDEs can leverage PropTypes to provide better code completion, type checking, and linting features for React components.

Example:

import PropTypes from 'prop-types';

function MyComponent(props) {
  return(  
<h1>{props.name}</h1>
<button onClick={props.handleClick}> Click Me </button>

);
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  handleClick: PropTypes.func.isRequired, 
};

🚀 5 Essential Tools Every MERN Stack Developer Should Use 🚀

Al Amin Rifat — Sat, 08 Jul 2023 21:00:52 +0000

MERN stack development has gained significant popularity for its ability to build robust and scalable web applications. Comprising MongoDB, Express, React, and Node.js, this technology stack offers numerous advantages, such as high performance, modularity, and flexibility. However, leveraging the full potential of the MERN stack requires the right set of tools. As a MERN Stack Developer, equipping yourself with the best tools is essential to save time, reduce errors, and enhance the overall code quality.

In this post, we will delve into the top 5 tools that can empower MERN stack developers in 2023. We will explore their key features, benefits, and specific use cases, enabling you to make informed decisions about incorporating these tools into your development toolkit. Let's dive in and discover the tools that will turbocharge your MERN stack development journey!

🔧 Tool Name: VS Code

Key Features:
✅ Robust code editor with powerful features
✅ Built-in Git integration for seamless version control
✅ Extensive extension ecosystem for customization and enhanced functionality

Benefits:
💡 Boosts productivity with its intuitive interface and intelligent code suggestions
💡 Simplifies collaboration through live sharing and real-time code editing
💡 Supports a wide range of programming languages and frameworks, including MERN stack development

🔧 Tool Name: Studio 3T

Key Features:
✅ GUI-based MongoDB IDE for convenient database management
✅ Advanced query builder and aggregation pipeline editor
✅ Import/export data, visualize query results, and analyze database performance

Benefits:
💡 Streamlines MongoDB development tasks with its intuitive interface and query building capabilities
💡 Simplifies complex queries and data transformations through its visual tools
💡 Enhances productivity by providing a comprehensive set of features for MongoDB administration

🔧 Tool Name: React Developer Tools (Browser extension)

Key Features:
✅ Browser extension for inspecting React component hierarchies
✅ Real-time component state inspection and debugging
✅ Performance profiling to identify bottlenecks in React applications

Benefits:
💡 Facilitates debugging and troubleshooting by providing insights into React component structures and their state
💡 Helps optimize React application performance through performance profiling and identifying inefficient rendering patterns
💡 Enables a better understanding of React applications' inner workings for more efficient development

🔧 Tool Name: Thunder Client (VS Code extension)

Key Features:
✅ REST client for testing API endpoints
✅ Intuitive interface for building and sending HTTP requests
✅ Supports environment variables, request chaining, and response validation

Benefits:
💡 Simplifies API testing and debugging with its user-friendly interface and request/response visualization
💡 Enables efficient development by saving and reusing API requests and managing multiple environments
💡 Facilitates collaboration with its ability to export and share API collections among team members

🔧 Tool Name: ES Lint (VS Code extension)

Key Features:
✅ JavaScript linter for identifying and fixing code issues
✅ Highly customizable with support for various coding style guides
✅ Integrates with VS Code to provide real-time linting and automatic fixes

Benefits:
💡 Improves code quality and maintainability by detecting errors, enforcing coding conventions, and highlighting potential issues
💡 Saves time by automating code formatting and enforcing consistent coding standards
💡 Enhances collaboration by ensuring a unified code style across the development team

💡 Pro Tip: Explore these tools and customize them based on your workflow and preferences to maximize your productivity and efficiency in MERN stack development.

Let's discuss in the comments! 🗣️

⚡️ Hashtags: #MERNStackTools, #ProductivityHacks, #DevelopmentToolkit, #CodeQualityMatters, #WebDevTools, #DeveloperProductivity, #EfficientCoding, #MERNStackCommunity, #CodeDebugging, #TechStackEssentials, #ModernWebDevelopment, #OptimizeWorkflow, #ErrorFreeCode, #CodeEfficiency, #WebAppFrameworks, #CodingProductivity, #MERNStackGems, #CodingSolutions, #DevTools2023, #CodingLifestyle, #TechToolbox

Beautiful Count down timer in React for (sales/promotional countdown)

Al Amin Rifat — Tue, 23 May 2023 01:39:46 +0000

🧑‍💻 Today present a remarkable React countdown timer that will leave your visitors spellbound. Whether you're running a flash sale, promoting a limited-time offer, or counting down to a grand product launch, this beautiful timer is the secret weapon to captivate, engage, and convert.

Let's dive into the enchanting world of our React countdown timer and discover how it can transform your promotional campaigns into unforgettable experiences.

So first of all setup the project. We will create a react project using vite.

npm create vite@latest countdown-time -- --template react
cd countdown-time
npm install
npm install react-countdown
npm run dev

No remove all the unnecessary code from the app.jsx file -

Now on app.jsx file I wrote this code -

import './App.css';
import Countdown from 'react-countdown';

function App() {
  return (
    <div>
      <Countdown date={Date.now() + 10000000} />
    </div>
  );
}

export default App;

And the output (screenshot) is -

Custom & Conditional Rendering
In case you want to change the output of the component or want to signal that the countdown's work is done, you can do this by either using the onComplete callback, a custom renderer, or by specifying a React child within <Countdown></Countdown>, which will only be shown once the countdown is complete.
Example -

import './App.css';
import Countdown from 'react-countdown';

const Completionist = () => <span>Time Finish!! You are good to go!</span>;

function App() {
  return (
    <div>
      <Countdown date={Date.now() + 5000}>
        <Completionist />
      </Countdown>
    </div>
  );
}

export default App;

And after the time is finish , it will hide the timer and show a message like this -

You can add style as you like. For example for one of my project I have make this countdown timer below using tailwind CSS.

See? This react-countdown package is awesome and it has more awesome use case. Like Sales, Marketing, Exam Scheduling, Ticket Selling and many more.

You can read more details about this on their official documentation..

Thank you so much for reading.❤️