March 2020

Sunday, March 22, 2020

Simple REST API using Express, & MongoDB -Project Setup




decided to build a simple REST API using Express & MongoDB. This simple application is built on the following points.

  • A simple program to observe subscriber details.
  • A User schema is built using MongoDB to store user details in the database.
  • HTTP requests are sent from the REST API that will allow to work with this simple program.
Let's Dive into the project

(Codes and Terminal commands will be written in italic)

  1. As the very first step it is necessary to set up a new npm package - npm init
  2. Some dependencies are needed to be installed 
- npm i express mongoose (install express and MongoDB)

-npm i --save -dev dotenv nodemon (install the developer dependencies)


After the required dependencies are installed , let's move on to the project structure.






  • users.js contains the user schema for the user to be created in the DB.

  • Within the routes folder route.rest is implemented to check the REST APIs and the users.js contains all the routes.

  • .env file contains all the environment variables.






After creating your project as above , a simple change must be done in the package.json to activate the nodemon dependecy.

Under scripts change the test name to any word you prefer and the value it denotes to be nodemon server.js

Next we will be moving on to the .env file where the environment variables are stored.

  • I have given a variable inside the .env file to declare the url to the database,
DB_URL=mongodb://localhost/(dbName)



That is all for the project setup, I will be implementing the code in the next blog















Wednesday, March 18, 2020

React Components


React components are independent and reusable bits of code. They are similar to JavaScript functions as they both serve the same purpose, but react components work in isolation and returns HTML through a render function.




Reacts lets you define 2 types of components.

  1. Class - based components.
  2. Functional components
With these components it is important have an understanding as to which kind of component can do what , what their history is and what the future holds for them.


Class-Based Components Functional Components
Class A extends Component const A = props => {...}
Access to state With react hooks able to access state
Ability to use life cycle hooks No support for life cycle hooks
Ability State and Props via "this" Access props via "props"
Ability to use life cycle hooks No support for life cycle hooks



Important :  Use class-based components if you need to manage state or access the Life cycle Hooks and if you cannot or do not want to use React Hooks.




Tuesday, March 10, 2020

Build a simple Quiz App with ReactJS


 A simple quiz app which will be built using both class and functional components.

Outline of the Quiz App


The quiz app QuizMe will produce 5 general knowledge questions. For each question there will be four answer buttons. An answer should be selected , once an answer is selected the other 3 answers will be removed. Once all the questions have been answered you will be prompted to the score. And if needed you will be able to play the quiz app again with another set of different questions.

Important factors to consider

Background : You will need to install create-react-app tool and create the application , you also will need to delete the unnecessary files in the src folder since we will be developing from the beginning and start the development server.

Important   : To obtain the questions and answers we need to build an API. For that i have built an offline API. Also i have built a specific style sheet to style the components.


File Structure


Inside the src folder i have created 3 directories and 1 file.

  • The assets directory consists of the style sheet that styles the components. 
  • The components directory contains the components for the questions and the final result these will be explained in due time. 
  • The quizService directory contains the manual API we create to obtain the questions and the answers. 
  • The index. js file is the root component. This will act as the root of our application.








Specialty : Normally by using functional components react does not allow the state management features, this is because functional components mainly focuses on displaying data and not state management. But in a situation if you need to use state in functional components react provides a plug in  play API named React Hooks. Such a scenario has been used in this app.


To check the git hub deployed app click here

To check the git hub repository click here













Saturday, March 7, 2020

The Top Node.js Frameworks in 2020



A large number of developers have moved towards to the usage of JavaScript to build their applications specifically in web development. This has lead to a need to build and maintain frameworks for the JavaScript community to be able to develop application easily and efficiently.
The most important reason for Node to become more famous and accepted by every developer was the ability to use the same language both for the client-side and server-side scripting.  Through the past few years there have been a large amount of frameworks built around Node.js due to the demand from the developers. I will be discussing about some of the most popular and in demand Node.js frameworks that should be considered in developing we applications.


Before spilling out the frameworks it is necessary to understand what a Node framework is.

A Node.js framework is just an abstract design , built of Node.js, which follows the control flow of a given framework's design. 

Simply it it the skeleton of an application , the customized code that a developer writes provides the body to function as one and thereby complete the application. Every framework is unique and there is a path for every user to follow depending on the framework. The most important aspects of a framework are - its architecture and features

Selecting a Node Framework


Before randomly selecting a framework there are certain issues that is needed to be addressed. This is a bit tricky and it is mainly based on the way you want to develop your application. In a more technical manner , there are mainly 2 things to consider,

  1.  The scalability and the validity of the framework.
  2. If you as a developer is capable of dealing with the development process.
Now it is time to discuss about the reason why i decided to write this post

Express.Js

Express.Js is a framework that every developer has heard of, even if you are not JavaScript die hard fan, you still would have come across this framework , due to its popularity. Most of the developers primary selection is considered as Express.Js. Express.Js is very well known for it's speed, flexibility and minimalism. It possess a large number of dynamic set of features, and it is suitable for both web and mobile applications. 

It is simply a technology which is built on Node.js , which acts as a middleware that helps to manage our application servers and routes.

Features of Express.Js

  • Ability to develop both single and multi-page applications in relationship with different web applications.
  • Possess a view system supporting many template engines, providing the ability to create quick and quality applications.
  • The framework comes with the MVC (Model-View-Controller), one of the most popular and sought out architectural patterns in development.
  • Simply Express.Js is a routing table, performing many web actions based on HTTP methods.
  • With extremely fast I/0 and robust API to make routing faster and easier, developers possess a big advantage.
  • The learning curve is very low.
  • Fully customisable.
  • Express.Js always focuses on the performance.

Hapi.Js

Hapu.Js framework is a commercial centered server framework. It is both an Open Source Framework and a server framework. 

 It is simple yet rich , stable and reliable MVC framework for building applications and services.

It is best used to develop REST (Representational State Transfer) APIs. The framework is superb in configuration , stable and reliable. 
Hapi.Js is same as Express.Js , where the framework helps to serve data by being the intermediate between the server side and client. It can be considered as a good substitute for Express. Unique feature of Hapi.Js is the ability to create a server on a specific IP, with features like the 'onPreHandler', we are able to do something with a request before it is completing by intercepting it and doing some pre-processing on the request.

Features of Hapi.Js

  • Fixing bugs and adding new features is quick and smart. There is a built in powerful plugin network to ease this process.
  • It provides users with routing , I/O validation and caching. This is why Hapi.Js powerfully compatible with REST APIs.
  • Since the users can use it with MySQL, MongoDB and Postgres ,Hapi,Js can be considered as the most usable framework with flexible features.
  • Hapi.Js comes with a plugin - nes . It gives the developers the ability to use real-time chat applications and other social applications.
  • Hapi.js provides a JavaScript Templating Engine which gives the ability to render dynamic contents easily.
  • Detailed API reference and a good support for document generation.