Build secure apps

Man raising his glasses and looking suprized
Man raising his glasses and looking suprized

Which is smarter? Breaking a lock or stealing the key?

Sure you can build a strong lock but if you can’t protect the key then it’s of no use!

Passwords are like keys to your system. So, If you are a sincere web developer, it’s your responsibility to ensure its strength!

Today we will talk about some best practices to follow regarding passwords. Lots of examples are on the way. So buckle up!

1. Favor Long Passwords Over Difficult Ones

Encourage users to pick a password that is longer, instead of making it more difficult to remember.

Easy+Long > Difficult + Short

This is because most hacking…

Practical advice for improving code quality

Woman with index finger over mouth
Woman with index finger over mouth

React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.

Today, we will talk about some best practices to follow to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.

Everything will be shown with code, so buckle up!

1. Use JSX ShortHand

Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.



2. Use Ternary Operators

Let’s say you want to show a particular user’s details based on role.



3. Take Advantage of Object Literals

Practical advice for designing REST APIs

Rest API Design Best Practices
Rest API Design Best Practices

Ever got frustrated with a horrible API where everything’s a guessing game? Well, I have.

In this world of microservices, a consistent design for your backend API is imperative.

Today, we’ll talk about some best practices to follow. We’ll keep it short and sweet — so buckle up!

First, Some Terminology

Any API design follows something called Resource Oriented Design It consists of three key concepts

  • Resource: A resource is a piece of data, For example, a User.
  • Collection: A group of resources is called a collection. Example: A list of users
  • URL: Identifies the location of resource or collection. Example: /user

1. Use kebab-case for URLs


Habits that make the difference

A man sits at a laptop coding.
A man sits at a laptop coding.

Getting the job done is the most important thing in software development. But how do you separate yourself from others? Well, from my experience, I can say the difference is in the approach.

Over the years, I’ve worked with a number of React developers. Here are some things that separate a great developer from an average one.

1. They Don’t Use Index as the Key

When we render a list, usually we get a warning saying that we need to provide a key for each list item. We lazy people often use the index as the key.

Something like this:

But in the React documentation, they…

If you’re writing enterprise-level code, you need to know this

Over the years I have had the privilege to work on some large-scale react projects. Today I am gathering some essential things to keep in mind when building a new project or enhancing the functionality of any large scale application.

We will start from the absolute basics and then go deeper. So buckle up!

1. Project Structure

When I started with React it was intuitive for me to keep files by their types. Bus as I had the privilege to work on some larger projects I understood how difficult it can be to navigate through your files as any project grows bigger


Let’s try to access DynamoDB from a React application

Red lights at night
Red lights at night

Having some cloud knowledge is getting more important by the day. If you are primarily a frontend developer, then having AWS knowledge can keep you ahead of the competition.

Today, we will learn how to use AWS DynamoDB from a React application. This is one of the most popular services of AWS and definitely worth learning.

To follow along, you should have:

  • An AWS account
  • Basic knowledge of React

Let’s get started!

1. Create a DynamoDB Table

Head over to the AWS management console and search for DynamoDB. Then hit the “Create new table” button and you will be presented with this screen.

  • Give a…

Your React component knows too much. Let’s fix that

Apple products on desk
Apple products on desk

The dependency inversion principle is one of the famous SOLID principles. Also, it is one of the most important ones.

Today, we will see how to solve a very common mistake that novice React developers make using this principle.

I will try to keep it very simple. Let’s get started!

What Does This Principle Tell Us?

In terms of object-oriented programming, the main idea behind this principle is to always have a high-level code interface with abstraction rather than an implementation detail.

Hold on! I know what you are thinking: “I am a simple frontend developer. Why are you bothering me with these complex terms?”


You’re about to love create-react-app even more

man with his mouth open and eyebrows raised peering at a laptop screen
man with his mouth open and eyebrows raised peering at a laptop screen

Going inside any framework has two benefits. It makes you a better developer and improves your understanding of the job that you are doing.

It also helps you appreciate the things that these frameworks do under the hood that we take for granted.

I wanted to go deep inside React to see how an application really works under the hood by replicating it locally.

Today, I will take you with me on this journey. I will try to keep the concepts beginner-friendly for you. You don’t need to code with me. But if you do, that will be awesome!


Is it going to replace Redux? Let’s find out!

State management is a big part of our modern web applications. The need for a global state manager was felt since the beginning of React.

Then Redux came into the picture and won it. It has become the go-to state management solution for most large-scale applications.

But redux is far from perfect. And recently it seems that the popularity of redux is declining. Many new players have joined the game of state management and Recoil is one of them.

So what’s Recoil anyway?

Simply speaking Recoil is yet another state management solution for React. React community has jumped up after the introduction of RecoilJS…

SOLID principles in action

SOLID is a set of principles that are not specific to any framework or language. These principles help us to understand how to write beautiful applications for our customers.

Today we will talk about the fourth principle of SOLID:

I: Interface Segregation Principle

We will try to understand the underlying concept of this principle and implement it in the context of ReactJS.

Previous Articles in this Series

  1. Single Responsibility Principle
  2. Open Closed Principle
  3. Liskov Substitution Principle
  4. Dependency Inversion Principle

What’s This Principle All About?

According to Stackify, the Interface Segregation Principle says

Clients should not be forced to depend upon interfaces that they do not use

In ReactJS we don’t…

Mohammad Faisal

Passionate about Clean code and SOLID Architecture

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store