
## Description

This is a MERN Fullstack project with authentication and CRUD functionality.

## Key takeaways

Context

#### Code Example

Combines all reducers and apply thunk (middleware that allows
you to return functions).

<details>

  <summary>
    <ins>View code</ins>
    <span>
      <i class="fa-solid fa-angle-right"></i>
    </span>
  </summary>

```js
const reducer = combineReducers({
  productList: productListReducer,
});
```

</details>
<br />


This is a MERN Fullstack project with authentication and CRUD functionality.

Homepage. Carousel with 3 top-rated products and general product listing.

Example 1


## Description

User searching app using Github API and context.

## Key takeaways

Github API and Context


Search for github users with Github API and React Context.

Example 2


# Using Markdown as a blog format

![Image ...](/portfolio/images/posts/first-post/first-post.jpg)

```text
---
title: 'Using Markdown as a blog format'
date: '2022-04-03'
image: first-post.jpg
excerpt: 'How to build a blog using react-markdown to render posts written in markdown'
isFeatured: true
---

```

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos minima optio omnis commodi atque modi, dolores saepe nostrum vero sunt obcaecati recusandae animi delectus veritatis ut nam dolore magnam.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, explicabo necessitatibus cumque quis, labore incidunt facere dolor impedit odio fugit totam, praesentium blanditiis consequatur deleniti repellat reprehenderit modi aut enim.


Lorem Ipsum


# Using Markdown as a blog format

![Image ...](/portfolio/images/posts/first-post/markdown.jpg)

```text
---
title: 'Using Markdown as a blog format'
date: '2022-04-03'
image: first-post.jpg
excerpt: 'How to build a blog using react-markdown to render posts written in markdown'
isFeatured: true
---

```

```jsx
import ReactMarkdown from 'react-markdown';
import Image from 'next/image';
import classes from './postContent.module.scss';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

const PostContent = (props) => {
  const { post } = props;

  const title = post.title;
  const content = post.content;
  const imagePath = `/portfolio/images/posts/${post.slug}/${post.image}`;

  const customRenderers = {
    p(paragraph) {
      const { node } = paragraph;

      if (node.children[0].tagName === 'img') {
        const image = node.children[0];

        return (
          <div>
            <Image src={imagePath} alt={image.alt} width={450} height={450} />
          </div>
        );
      }

      return <p>{paragraph.children}</p>;
    },

    code(code) {
      const { className, children } = code;
      const language = className.split('-')[1]; // className is something like language-js => We need the "js" part here

      return (
        <SyntaxHighlighter
          language={language}
          style={atomDark}
          // eslint-disable-next-line react/no-children-prop
          children={children}
        />
      );
    },
  };

  return (
    <div className={classes.postContent}>
      <div className={classes.container}>
        <article>
          <ReactMarkdown components={customRenderers}>{content}</ReactMarkdown>
        </article>
      </div>
    </div>
  );
};

export default PostContent;
```


Hi, my name is Lorem Ipsum.

I'm a Web Developer.

Featured projects

Example 1

Example 2

Featured posts

Lorem Ipsum

Using Markdown as a blog format

About me

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi molestiae libero eius adipisci reprehenderit, cumque illum atque provident ullam placeat harum veritatis odit perferendis ipsum aperiam mollitia voluptates temporibus nulla?