Sign in


Firebase is one of my favorite user authentication tools to use in any application. It is so fast and simple to implement

Today I am going to take you through the firebase authentication method and how to apply them to your application

When it comes to working with an array in javascript these methods are the backbone of everything. Today I am going to implement these methods on an array of string and array of objects.

What are these methods anyway?

Map() method that allows to loop through an array and creates a new array with the results of calling a function for every array element

ForEach() method calls a function once for each element in an array, in order. Note: the function is not executed for array elements without values.

Filter() method creates an array filled with all array elements that pass a test (provided as…

Quick Introduction to hooks

React Hooks are introduced to the world in 2018 by React team

Hooks let you use state and other react features without having to define a javascript class. They allow cleaner and less clunky code

Check out the React Hooks documentation:

What we are going to cover

  1. create react app
  2. implement increment and decrement buttons
  3. prevent the counter from going below 0 and above 20
  4. turn the counter red when its 10 and above and change it to its original color when below 10
  5. set the initial counter value and if not set the initial…

What is Context API

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

Difference between Context API and Redux

Context API prompts a re-render on each update of the state and re-renders all components regardless. Redux, however, only re-renders the updated components. This can be monitored on the console as there’s a log in each component.

Context API Example

Getting Started

  1. Create react app using npx create-react-app.
  • I am going to use font-awesome for icons:

<link rel=”stylesheet” href=”" integrity=”sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p” crossorigin=”anonymous”/>

  • CSS I am going to use bootstrap and react-bootstrap

npm i react-bootstrap

  1. create context API component

D3 graph gif

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. It is a powerful library for data visualization in programming.

Today I just want to share with you what I have learned from using D3.js.

Firstly use the lasted D3 because you are going to run into some problems if you use the old versions. As for now, the latest version is this one

If you are a beginner I recommend you follow this youtube tutorial This man is good at explaining…

Redux is very complex for a beginner to understand. I remember when I first started, it was a complete disaster. Today I just want to take you through the steps to get started with Redux in your app

Redux is a state management tool mostly used with React. It is similar to Vuex for Vue.js

First things first, Why use Redux

In an app where data is shared among components, it might be confusing to actually know where a state should live. …

I just want to share with you guys what I learned about CSS. I have been struggling to master CSS especially to design a responsive layout. Here are some of the tips I found to be useful and some resources.

  1. Have a complete design
  • I used to think about designing as a waste of time. I designed whilst writing my code and it was chaotic. It took me more time than it really does when you design. Please save yourself time by drafting a design. There are many design prototypes tools out there and my favorite is Adobe XD



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