• Apply the Single Responsibility Principle to all components, services and other symbols. Do one thing services or component per file limiting 400 lines of code to avoid bugs, maintain & reuse code.
  • Define Small functions limiting 75–100 lines.
    Smaller the function, easier to read, test and promote reusability of function.
  • Make use of Generic Naming Conventions.
    Use consistency while naming components, services, pipes etc. It make easy to identify what is the file or folder all about and easy to understand while working in large team.
    Giving file convention like this helps a lot — .component.ts, .service.ts, .module.ts, .pipe.ts, .directive.ts


Basic knowledge of reactjs, redux and asynchronous api call is required.
Go through these official documentations for more information : reactjs, redux, react-routing, redux-saga.

NodeJS & npm Installed on local system.
Any IDE to make the changes in code. (I Prefer VSCode.)
Postman to call/ensure the API response

Dependencies :

  • react
  • react-DOM
  • redux
  • redux-saga
  • react-Redux
  • react-Router
  • react-Router-dom
  • redux-form
  • reactstrap
  • styled-components


I have tried to build the basic application to fetch the data using redux-saga and pass the data to another component.
Showing the data to the users for better visualization, I have used reactstrap library which is basically…


While we want to request across the network, there are few API consuming libraries available on open-source platform.

  • fetch
  • axios


Basically, it provides the object of Request and Response and other objects asynchronously across the network. It returns the Promise for the Request we make with the Response object.


All about Best Practises, Guidelines and Styling.

Look Beyond !! Picture by Me.

This article is all about what are best practises to follow while you’re using JavaScript in daily life. There are multiple frameworks available to make applications and all has few similarities as well differences. We’ll go through the basic code standards which EVERY developer should follow/use/do.

All of the functions/files/applications run , But clean code and few best practises followed will make your code more readable, maintainable and easily understandable.

Content of the Article

Variables — Make your variable name meaningful, that way you’ll know what this variable consists of after years as well. If multiple variables…

GraphQL is a query language for your API, and a server-side run-time for executing queries by using a type system you define for your data.

Why should we use it ?
It isn’t bind to any specific database or storage engine. You can easily use it for your existing or new application with any kind of database.

There are also few problems with REST-full API solved by GraphQL.
1. REST-full nested routing
2. Over fetching data while nesting routes and queries.
When there is nesting of routes & multiple requests/queries are getting executed, you will get all data that is useful…

React has come up with new advanced features and solutions to the existing problems.

Last year, they announced all of the features in React Conf 2018. Also, detailed documentation is on their website.
Here you can watch the React Conf 2018.

We’ll cover few points with examples which are useful to solve few problems created by react itself.
I have also made a Github Repository for all the examples.

  • React Fragments
  • Stateless Components
  • Stateful Components
  • Hooks
  • redux-form Integration

Let’t start by creating application through create-react-app — Modern build setup. If you’re unaware of this, go through this.

create-react-app advanced-react
cd advanced-react

Till now, we have seen how to structure front-end and popular framework for it. Now, Let’s start to make api, how will we manage database and to do all these, we need to dive into back-end.

NodeJS is web framework for event-driven programming and it is designed to build network applications.


NodeJS can be installed using two ways:
1. You can go the official website and download it according to your OS.
2. You can install it using command line by running following commands:

 sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

You can check whether it…

Let’s sail together !!

Sails is Web Framework.
Till now, when we hear the word, Framework- we think as front-end web framework, But sails is Back end-Web Framework. Sails helps you build APIs, server HTML files and handle simultaneous users.


In market, there are lots of frameworks available, Hence before setting up environment for sails, let’s see what it offers and why should we use this framework.

Sails is a lightweight framework that sits on top of Express. Its ensemble of small modules work together to provide simplicity, maintainability, and structural conventions to Node.js apps.

This is what sails official website says.

Key features…

Yes, you’re seeing nail-paint :D


There are very few libraries available for styling in react and I have found one amazing and after looking at features they provide, you’ll also use it in your next project.
It’s styled-components and they have very neat documentation for each feature they provide.
Hence, main objective of this blog is how to style components using styled-components and how you can achieve almost everything with it.


Let’s start with creating React JS App and how we can structure code inside our application.

npm install -g create-react-app

This will install create-react-app globally in your system and it can be used for…

ECMAScript is standard for JavaScript and along with the specification of its own, It publish version with more features each year and recent are ES6, ES7, and ES8.

Now, as it’s for additional features JavaScript developer must know some of common features which are very helpful to simplify your code.

Arrow Functions

The arrow functions has a shorter syntax and it does not have it’s own this or arguments. They can never be used as constructor.

That’s all about arrow functions. But it has made a big impact as there are ways it is useful and let’s catch on them.

Basic Syntax…

Krina Soni

Passionate about places, photos and coding! Food is love !!

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