---
title: "frontend-development"
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/blog/categories/frontend-development
---

[Home](/)›[All Posts](/blog)›[All Categories](/blog/categories)›[Frontend development](/blog/categories/frontend-development)

Category

# frontend-development

4Articles

[![Unlocking the Power of React Context API: Demystifying State Management](/_astro/hero.Dv7VXd7h_Z4sE61.webp)](/blog/post/react-context-api-state-management)

## [Unlocking the Power of React Context API: Demystifying State Management](/blog/post/react-context-api-state-management)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [ReactJS](/blog/categories/reactjs)
-   [State Management](/blog/categories/state-management)
-   [Frontend Development](/blog/categories/frontend-development)
-   [Next.js](/blog/categories/nextjs)
-   [JavaScript](/blog/categories/javascript)
-   Published: 14 Oct, 2023

Introduction In the ever-evolving realm of web development, the effective management of application state is a pivotal aspect that can either elevate or hinder your project's success. In this cont

[#React Context API](/blog/tags/react-context-api)[#State Management](/blog/tags/state-management)[#Redux](/blog/tags/redux)+7 tags

[read more](/blog/post/react-context-api-state-management)

[![Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/_astro/hero.CMtyRpHA_ZF7JrL.webp)](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript)

## [Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [ReactJS](/blog/categories/reactjs)
-   [TypeScript](/blog/categories/typescript)
-   [SCSS](/blog/categories/scss)
-   [Frontend Development](/blog/categories/frontend-development)
-   [UI Components](/blog/categories/ui-components)
-   Published: 17 Feb, 2023

Introduction In this tutorial, we will be building a customizable image slider in React using hooks, SCSS, and TypeScript. An image slider is a common UI element used in web applications to displa

[#React Hooks](/blog/tags/react-hooks)[#TypeScript](/blog/tags/typescript)[#SCSS](/blog/tags/scss)+7 tags

[read more](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript)

[![React With Redux Toolkit](/_astro/hero.DS6Oq_Cn_153Dmu.webp)](/blog/post/react-with-redux-toolkit)

## [React With Redux Toolkit](/blog/post/react-with-redux-toolkit)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [ReactJS](/blog/categories/reactjs)
-   [Redux](/blog/categories/redux)
-   [State Management](/blog/categories/state-management)
-   [Frontend Development](/blog/categories/frontend-development)
-   Published: 02 Dec, 2022

Prerequisites This post assumes that you have a basic understanding of React and Redux. and it will be better if you have some experience with React Hooks like useReducer. Introduction Nowa

[#ReactJS](/blog/tags/reactjs)[#Redux Toolkit](/blog/tags/redux-toolkit)[#State Management](/blog/tags/state-management)+5 tags

[read more](/blog/post/react-with-redux-toolkit)

[![Setup Nextjs Tailwind CSS Styled Components with TypeScript](/_astro/hero.BP7GbA0g_O8bl1.webp)](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript)

## [Setup Nextjs Tailwind CSS Styled Components with TypeScript](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript)

-   [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)
-   [Next.js](/blog/categories/nextjs)
-   [Tailwind CSS](/blog/categories/tailwind-css)
-   [Styled Components](/blog/categories/styled-components)
-   [TypeScript](/blog/categories/typescript)
-   [Frontend Development](/blog/categories/frontend-development)
-   Published: 08 Nov, 2022

Introduction In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript, and we will use the following tools:Nextjs Tailwind CSS Styled Components TypeScriptP

[#Next.js Setup](/blog/tags/nextjs-setup)[#Tailwind CSS Integration](/blog/tags/tailwind-css-integration)[#Styled Components with Next.js](/blog/tags/styled-components-with-nextjs)+4 tags

[read more](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript)