Medicine, Software and everything in between.

Monkeypox has recently been the subject of several news reports. Monkeypox has been prevalent in Central and West Africa since the early 1970s, but in early May 2022, the illness began to spread outside of that region.

Monkeypox: A spreading danger

Monkeypox has recently been the subject of several news reports. It has been prevalent in Central and West Africa since the early 1970s, but in early May 2022, the illness began to spread outside of that region. Over 300 monkeypox cases have been confirmed in 20 non-African countries and six US states as of May 26, 2022. The scenario is still fast changing.

### Background
Monkeypox is an orthopoxvirus that has a clinical appearance similar to smallpox.  The first epidemic in humans was in the Democratic Republic of Congo (DRC) in the early 1970s, despite the fact that it was originally detected in monkeys in 1958.

![Monkeypox virus](/images/monkey-pox-virus.jpg "Monkeypox virus")
Image from the CDC Cynthia S Goldsmith, Russell Regnery. [Public domain]

During the 2003 US epidemic, monkeypox virion was recovered from a human skin sample, as shown in the electron microscope picture above. On the left are mature, oval-shaped viral particles, while on the right are immature, spherical virus particles.

### Transmission
Monkeypox is a zoonotic disease, meaning it may be transmitted to people by contact with or eating of small animals, especially rodents. Several dozen human cases of monkeypox were discovered in the United States in 2003, and the disease was traced back to pet prairie dogs and, eventually, rats imported from Ghana. Human-to-human transmission has also been documented, with the virus entering the body via damaged skin, respiratory droplets, or mucous membrane contact. A proposed transmission method is indirect contact with lesion material, such as through infected garments or linens. 

Several documented cases in the 2022 outbreak are in males who have intercourse with men, raising questions about the specific human-to-human transmission pathways. The transmission of monkeypox is still hampered by exposure to human bodily fluids, respiratory droplets, and direct contact with sores.

### Signs and Symptoms
Fever and lymphadenopathy are common early signs of monkeypox infection, which are commonly accompanied by headache, myalgias, chills, weariness, and cough. Lymphadenopathy, notably swollen submental, submandibular, cervical, and inguinal lymph nodes, is the most consistent clinical symptom that distinguishes monkeypox from smallpox and chickenpox.

![Monkeypox virus](/images/monkey-pox-pustules-face.jpg "Pustules on face")
Caucasian male with monkey pox pustules on his face (Source: nairobitimes.co.ke)

Monkeypox takes 7-14 days to incubate, although it can take anything from 5 to 21 days. The rash appears 1-3 days after the commencement of the fever, and it usually starts on the face/mouth before quickly spreading to the rest of the body, including the palms and soles. The rash resembles chickenpox in appearance. Before resolving, monkeypox lesions usually go through the macular, papular, vesicular, and pustular phases. The sickness lasts 2-4 weeks, including ulcerative lesions in some cases.

### Evaluation
Droplet precautions, such as a N95 mask, gown, gloves, and eye protection, should be used while examining a patient with probable monkeypox. Investigate your travel and exposure history: Maintain a track of all clinical teammates who have been exposed to patients after this has been established. After the patient has left, disinfect the patient room surfaces as needed.

![Clinicians wearing personal protective equipment](/images/monkey-pox-ppe.jpg "Clinicians wearing personal protective equipment")
Image of clinicians wearing personal protective equipment (PPE) from Wikimedia Commons | Javed Anees, District Hospital, Tirur.

Using an oropharyngeal or nasopharyngeal swab, get a viral culture. A vesiculopustular rash skin biopsy or a sample of the ceiling of an intact vesiculopustule should be examined. Polymerase chain reaction (PCR), electron microscope examination (in the absence of other orthopoxviruses), or immunohistochemistry testing can all be used to confirm monkeypox. 
In the differential diagnosis, a Tzanck smear can assist distinguish monkeypox from other nonviral illnesses. A Tzanck smear, on the other hand, cannot distinguish a monkeypox infection from smallpox or herpetic infections.

![Pustules on hand](/images/monkey-pox-pustules-hand.jpg "Pustules on the hand")
Image courtesy of Medscape. The dorsum of a patient's hand has a monkeypox vesiculopustular rash. Some lesions have a central umbilication.

### Treatment
Monkeypox infection is mostly treated with supportive and symptomatic medicine. To avoid the spread of the disease, it is critical to segregate patients and take proper measures. Until all scabs have dried and dropped off, the patient is infectious. Vaccines for monkeypox are available, and in certain circumstances, immunization after high-risk exposure has been demonstrated to prevent illness or reduce severity.

### Mortality and Complications
In Africa, mortality rates range from 1.0 percent to 10.6 percent, with high-risk individuals (such as those who are immunocompromised or malnourished) having the worst outcomes. Bacterial infections can also develop as a result of the initial infection.

I spent a lot of time researching the best combination of complementary frameworks to build this website.  I eventually settled on using NextJS to build the website and Netlify to host and deploy it....

How I built this website

I spent a lot of time researching the best combination of complementary frameworks to build this website. I eventually settled on using NextJS to build the website and Netlify to host and deploy it. 
 These are the steps I took in setting up the project.

 1. Start by creating a `next-js` app by running:
~~~js
 npx create-next-app YOUR-APP-NAME
~~~
You can find the <a href="https://nextjs.org/learn/basics/create-nextjs-app" target="_blank">official docs on how to create a next-js app</a> here.

### Taking a look at the package.json file
Here's a copy of my `package.json` file which we will be referring to throughout this post.
~~~js
{
 "name": "SamuelEdusaMD",
 "private": true,
 "scripts": {
 "dev": "next dev",
 "build": "next build && next export",
 "start": "next start",
 "lint": "next lint"
 },
 "dependencies": {
 "gray-matter": "^4.0.3",
 "next": "^12.1.0",
 "next-pwa": "^5.4.0",
 "raw-loader": "^4.0.2",
 "react": "17.0.2",
 "react-dom": "17.0.2",
 "react-highlight-words": "^0.17.0",
 "react-markdown": "8.0.1",
 "react-syntax-highlighter": "^15.5.0",
 "reading-time": "^1.5.0",
 "rehype-raw": "^6.1.1",
 "styled-components": "^5.3.3"
 },
 "devDependencies": {
 "@types/react": "^17.0.35",
 "@types/react-highlight-words": "^0.16.4",
 "@types/react-syntax-highlighter": "^13.5.2",
 "@types/styled-components": "^5.1.24",
 "@types/webpack-env": "^1.16.3",
 "babel-plugin-styled-components": "^2.0.6",
 "eslint": "7.32.0",
 "eslint-config-next": "12.0.4"
 }
}
~~~

### Adding Typescript to the project
Rename your files from `.js` to `.tsx`. When you restart your server you should see an error in your Command Line Input (CLI) that you're trying to use **typescript** but don't have the necessary packages. 
Run the following command to resolve this error:

~~~js
npm install --save-dev typescript @types/react @types/node
~~~

After restarting your server you will notice 2 new files added to the root of your project, i.e. `next-env.d.ts` and `tsconfig.json`.
- `next-env.d.ts`: Nextjs type declaration file referencing its types inside of your `node_modules/next/types/global`
~~~ts
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
~~~

- `tsconfig.json`: contains the compiler options required to compile the project and specifies the root.
~~~js
{
 "compilerOptions": {
 "target": "es5",
 "lib": [
 "dom",
 "dom.iterable",
 "esnext"
 ],
 "allowJs": true,
 "skipLibCheck": true,
 "strict": false,
 "forceConsistentCasingInFileNames": true,
 "noEmit": true,
 "incremental": true,
 "esModuleInterop": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve",
 "baseUrl": ".",
 "paths": {
 "@components/*": ["src/components/*"],
 "@styles/*": ["src/styles/*"],
 "@posts/*": ["src/posts/*"],
 "@pages/*": ["src/pages/*"],
 "@utils/*": ["src/utils/*"],
 }
 },
 "include": [
 "src",
 "src/**/*",
 "next-env.d.ts",
 "**/*.ts",
 "**/*.tsx"
, "pages/_document.js" ],
 "exclude": [
 "node_modules"
 ]
}
~~~

### Installing styled-components
~~~js
npm install --save styled-components
~~~
Check out the <a href='https://styled-components.com/' target='_blank'>offical docs for styled-components</a> here. 

### Installing the styled-components babel plugin
This plugin adds support for server-side rendering, minification of styles, a better debugging experience (improving the naming for `classNames`👇🏽), minification and dead code elimination.
~~~js
npm install --save-dev babel-plugin-styled-components
~~~
Check out the <a href='https://styled-components.com/docs/tooling#babel-plugin' target='_blank'>offical docs for styled-components babel plugin</a> here. 

<figure>
 <img src='/images/better-classnames.jpg' alt='Better classNames'>
 <figcaption>Screenshot showing an improvement in the className naming (specifically the prepending of the className with fpr example Layout__LayoutWrapper) after adding the plugin</figcaption>
</figure>

Create a file `.babelrc` at the root of your project and add the following code:
~~~js
{
 "presets": ["next/babel"],
 "plugins": [
 ["styled-components", {
 "ssr": true
 }]
 ]
}
~~~

Samuel Edusa

Latest Posts

Monkeypox: A spreading danger

How I built this website