Image for post
Image for post

In this article, I will go step by step in creating two Micro Frontend React Components and render a Button component from one into the other. This hands-on example is a continuation to the following two articles where I explained how Micro Frontends work with Webpack5 and Module Federation. I wanted to give clean steps on React components without all the explanations. Please, refer to those articles for explanations

The final project can be found at https://github.com/ranyelhousieny/react-microfrontends

1. Create two React apps and install dependencies

npx create-react-app mfe1cd mfe1yarn add webpack webpack-cli webpack-server html-webpack-plugin babel-loader webpack-dev-server
npx create-react-app mfe2
cd mfe2
yarn add webpack webpack-cli…


Image for post
Image for post

In this article and the attached video, I will go through a real-world experience that I have done to migrate from Monolithic architecture to Microservices. This will be a hands-on video

What is a Monolith?

Monolith” You might have been hearing this word a lot, recently, or its other synonym “Monolithic Architecture”. It is a scenario when a company depends on one service or database and it becomes a bottleneck. At this time, the need to decompose this monolith into microservices becomes a necessity. In the following short clip, I explained what is a Monolithic Architecture:


You might have heard the word Redux multiple times and you wonder What is Redux? In the following short video and article, I will explain in less than a minute What is Redux

Image for post
Image for post

Redux is simply a store to store the state of the variables in your app. Redux creates a process and procedures to interact with the store so that components will not just update or read the store randomly. Similar to the bank. It does not mean because you have money in the bank that you can go anytime, open the vault, and take money. …


Image for post
Image for post

In this Article we will start using a middleware called Thunk to help us fetch data async from servers.

This article is a part of a series (It builds on previous steps)

What is Redux?

  1. 𝑪𝒓𝒆𝒂𝒕𝒆 𝒂 𝑹𝒆𝒅𝒖𝒙 (𝑯𝒆𝒍𝒍𝒐 𝑾𝒐𝒓𝒍𝒅): https://lnkd.in/guBuBVP

2. Create React Native App here https://lnkd.in/gDWG7AC

3. Redux with React Native: 1-Reading State:

4. Redux with React Native: 2-Updating State https://lnkd.in/gPcUcMx

5. Understanding Middleware in Redux: https://lnkd.in/g5tVFn8

6. Understanding REST [Optional]

6. …


Image for post
Image for post

I will assume you have a vanilla machine with nothing installed related to AWS CLI. To make this easier, I will use the command-line instead of navigating through sites

First: Create A Free tier Amazon Account

We will need this to deploy to AWS. It is easy and straightforward. Just follow the instructions here https://aws.amazon.com/premiumsupport/knowledge-center/create-and-activate-aws-account/

Here is the Sign-Up page https://portal.aws.amazon.com/billing/signup#/start

1. Download AWS CLI V2

curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"

2. Install awscli

sudo installer -pkg AWSCLIV2.pkg -target /

3. Verify the installation

aws --versionOutput will be close but not exact to the following:aws-cli/2.1.28 Python/3.8.8 Darwin/20.3.0 exe/x86_64 prompt/off

4. Install XCode command-line tools

xcode-select --install

Configure AWS CLI

1. Get Credentials

To be able to work with AWS CLI, you need to create a new user and get…


Image for post
Image for post

In this article, I will explain one of the most important components that you will use over and over. It is a component that you will use to list items on the device. We will build on the app we created on step/article 7 https://lnkd.in/gVJspwG and list the items we received from the REST endpoint

This article is a part of a series (It builds on previous steps)

  1. 𝑪𝒓𝒆𝒂𝒕𝒆 𝒂 𝑹𝒆𝒅𝒖𝒙 (𝑯𝒆𝒍𝒍𝒐 𝑾𝒐𝒓𝒍𝒅): https://lnkd.in/guBuBVP

2. Create React Native App here https://lnkd.in/gDWG7AC

3. Redux with React Native: 1-Reading State: https://lnkd.in/gUbBRs8

4. Redux with React Native: 2-Updating State https://lnkd.in/gPcUcMx

5. Understanding Middleware…


Image for post
Image for post

In this article and short videos, I will explain how to create the famous burger-menu on your site. I will explain it through a hands-on implementation.

Here is the final result that will show on the page


Image for post
Image for post

I enjoy designing systems with all their challenges. I have designing systems for the past 25+ years. System design has been evolving, quickly, from on-premises design to the cloud and from Monolith systems to Microservices. Building systems in the cloud made it a lot easier to try new concepts and learn from them. It allows me to change and build systems, quickly. However, building systems takes time. With someone like myself, who enjoys the challenges of building systems and improving current systems, it was hard to find new systems to design every day. I enjoy the discussions and the debates…


Image for post
Image for post

Sass stands for “Syntactically awesome style sheets”. It is an extension to CSS. Before I talk about Sass, let me go back a little bit to understand what Frontend development is. Browsers understand three concepts HTML, CSS, and JavaScript(ES5). If you write static websites, you use HTML. Pure HTML will create websites, similar to a document. You bring HTML websites to life using CSS (Cascading Style Sheets). This is where you add a background, tables, animations … If you want to make your site dynamic, you may use JavaScript (specifically ES5). So, if you only know those three languages (HTML…

Rany ElHousieny

https://rany.tk Commercial software development manager offering 25+ years’ of technical experience. Certified Solutions Architect

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