
## Description

Fully functional and fullstack calendar App.

- Includes Login page for Auth, React-big-calendar- React-date-picker- Middlewares- Form Auth
- Authentication handled with JWT.
- Redux for state management.
- MongoDB

## Key takeaways

This is a complex project both in the backend and frontend.
Besides all route and controller logic with authentication, CRUD
and so on in the backend, my main takeaway for this project is the
state management with Redux in the frontend which is depicted in the diagram below.

#### Store

Combines all reducers and apply async-await fuction in replace of Thunks (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
export const calendarSlice = createSlice({
  name: "calendar",
  initialState: {
    isLoadingEvents: true,
    events: [
      //tempEvent
    ],
    activeEvent: null,
  },
  reducers: {
    onSetActiveEvent: (state, { payload }) => {
      state.activeEvent = payload;
    },
    onAddNewEvent: (state, { payload }) => {
      state.events.push(payload);
      state.activeEvent = null;
    },
    onUpdateEvent: (state, { payload }) => {
      state.events = state.events.map((event) => {
        if (event.id === payload.id) {
          return payload;
        }
        return event;
      });
    },
    onDeleteEvent: (state) => {
      if (state.activeEvent) {
        state.events = state.events.filter(
          (event) => event.id !== state.activeEvent.id
        );
        state.activeEvent = null;
      }
    },

    onLoadEvents: (state, { payload = [] }) => {
      state.isLoadingEvents = false;
      //state.events = payload;
      payload.forEach((event) => {
        const exists = state.events.some((dbEvent) => dbEvent.id === event.id);
        if (!exists) {
          state.events.push(event);
        }
      });
    },
    onLogoutCalendar: (state) => {
      (state.isLoadingEvents = true), (state.events = []);
      state.activeEvent = null;
    },
  },
});

export const {
  onSetActiveEvent,
  onAddNewEvent,
  onUpdateEvent,
  onDeleteEvent,
  onLoadEvents,
  onLogoutCalendar,
} = calendarSlice.actions;
```

</details>
<br />

#### Components

This is the look of the composition of the calendar App.

<details>

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

```jsx
export const CalendarPage = () => {

  const { user } = useAuthStore();
  const { openDateModal } = useUiStore ();
  const { events, setActiveEvent, startLoadingEvents } = useCalendarStore();

  const[lastView, setLastView] = useState(localStorage.getItem('lastView') || 'week');

  const eventStyleGetter = ( event, start, end, isSelected ) => {

    //console.log(event);

    const isMyEvent = ( user.uid === event.user._id ) || ( user.uid === event.user._id);

    const style = {
      backgroundColor: isMyEvent ? '#347CF7' : '#465660',
      borderRadius: '0px',
      opacity: 0.8,
      color: 'white'
    }

    return {
      style
    }
  }

  const onDoubleClick = ( event ) => {
   // console.log( {doubleClick: event });
   openDateModal();
  }

  const onSelect = ( event ) => {
    //console.log( {click: event });
    setActiveEvent( event );
  }

  const onViewChanged = ( event ) => {
    localStorage.setItem('lastView', event );
    setLastView( event )
  }

  useEffect(() => {
    startLoadingEvents()
  }, [])

  return (
    <>
      <Navbar />

      <Calendar
      culture='es'
      localizer={localizer}
      events={events}
      formats
      defaultView= { lastView }
      startAccessor="start"
      endAccessor="end"
      style={{ height: 'calc( 100vh - 80px )' }}
      messages={ getMessagesES() }
      eventPropGetter= { eventStyleGetter }
      components= {{
        event: CalendarEvent
      }}
      onDoubleClickEvent = { onDoubleClick }
      onSelectEvent = { onSelect}
      onView = {onViewChanged}

    />

    <CalendarModal />
    <FabAddNew />
    <FabDelete />

    </>
  )
```

</details>
<br />

#### Server

The heart of the backend application. Connects to the DB via
config/db and uses all routes made available by routes  
and error handling directly from the
middleware.

#### Config/db

Makes the connection to the database.

#### Routes

Best regarded as Endpoints. Route methods (get, post, put,
delete) are defined for the specified route and used in
conjunction with a controller and middleware functions, which
hold the logic. (e.g. router.post(&apos;/login&apos;,
authUser))

#### Controllers

Best regarded as the application logic. The functions defined
here will be requested when hitting the defined
routes/endpoints. It is the place where the logic for a given
route is applied.

#### Models

Defines the DB schema for a given model. also
uses bcrypt to compare and hash passwords.


Fullstack Calendar App with login using the MERN stack and Redux, deploy in Heroku, can see an test the demo, there are a Login Page, en Register Page, authentication is done through JWT json web token, also use bcrypt for send the encrypted info, JWT have also the payload encrypt.

Navbar component, Fab icons (add+ , delete-), react-big-calendar.

into the react-modal component, there are handle date-picker component.

Calendar App


## Description

In this project i use TailwindCSS, because need more customization in the UI, is fast and also very flexible.

- Includes Login page for Auth, React-big-calendar- React-table
- Redux-toolkit for state management.

## Key takeaways

There are multiple purposes of this project is can connect this front end crm with an e-commerce, backend, apis, services

#### Store

Combines all reducers and apply async-await fuction in replace of Thunks.

<details>

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

```js
export const storeSlice = createSlice({
  name: "storeData",
  initialState: {
    // Pages
    actualPage: "dashboard",

    // Modals
    isProductModalOpen: false,
    isModalActionOpen: false,
    isNeWProduct: false,
    isModalFeatureOpen: false,

    // Tables
    infoData: [],
    infoColumns: [],
    selectedRecord: [],
    showSelectedrow: false,
    dataList: [],
  },
  reducers: {
    // Pages
    onChangeView: (state, payload) => {},

    // Modals
    onOpenProductModal: (state, { payload }) => {
      state.isNeWProduct
        ? (state.isProductModalOpen = true)
        : (state.isProductModalOpen = true);
      // state.selectedRecord = [{title: '',category: '',description: '',image:'',price:''}]
    },
    onCloseProductModal: (state) => {
      state.isProductModalOpen = false;
      state.selectedRecord = [];
    },

    onOpenDeleteModal: (state) => {
      state.isModalActionOpen = true;
    },

    onCloseDeleteModal: (state) => {
      state.isModalActionOpen = false;
    },

    onOpenFeatureModal: (state) => {
      state.isModalFeatureOpen = true;
    },

    onCloseFeatureModal: (state) => {
      state.isModalFeatureOpen = false;
    },

    // Tables
    onLoadTable: (state, { payload }) => {
      switch (payload.page) {
        case "dashboard":
          state.actualPage = payload.page;
          break;

        case "customers":
          state.actualPage = payload.page;
          state.dataList = payload.data;
          state.infoData = payload.data;
          state.infoColumns = Object.keys(payload.data[0])
            .filter(
              (key) =>
                // Exceptions
                key !== "name" && key !== "address" && key !== "__v"
            )
            .map((key) => {
              return { Header: key, accessor: key };
            });
          break;

        case "orders":
          state.actualPage = payload.page;
          state.dataList = payload.data;
          state.infoData = payload.data;
          state.infoColumns = Object.keys(payload.data[0])
            .filter(
              (key) =>
                // Exceptions
                key !== "products" && key !== "__v"
            )
            .map((key) => {
              return { Header: key, accessor: key };
            });

          break;

        case "products":
          state.actualPage = payload.page;
          state.dataList = payload.data;
          state.infoData = payload.data;
          state.infoColumns = Object.keys(payload.data[0])
            .filter(
              (key) => key !== "rating" /* Exceptions  && key !== "price" */
            )
            .map((key) => {
              return { Header: key, accessor: key };
            });

          break;

        default:
          break;
      }
    },

    onSelectRecord: (state, { payload }) => {
      state.selectedRecord = payload;
      console.log(state.selectedRecord);
    },

    // CRUD Table
    onAddNewProduct: (state, { payload }) => {
      state.infoData.push(payload);
      state.selectedRecord = [];
      state.isProductModalOpen = false;
    },
    onUpdateProduct: (state, { payload }) => {
      state.infoData = state.infoData.map((product) => {
        if (product.id === payload.id) {
          return payload;
        }
        return product;
      });
      state.isProductModalOpen = false;
    },

    onDeleteProduct: (state, { payload }) => {
      state.infoData = state.infoData.filter(
        (product) => product.id !== state.selectedRecord.id
      );
      state.selectedRecord = null;
      state.isModalActionOpen = false;
    },

    // Sidebar

    onClickSidebar: (state, { payload }) => {
      state.actualPage = payload;
    },
  }, // Reducers End
});

// Action creators are generated for each case reducer function
export const {
  // Pages
  onChangeView,

  // Modals
  onOpenProductModal,
  onCloseProductModal,
  onOpenFeatureModal,

  onOpenDeleteModal,
  onCloseDeleteModal,

  // Table
  onLoadTable,
  onSelectRecord,

  // CRUD Table
  onAddNewProduct,
  onUpdateProduct,
  onDeleteProduct,
  onCloseFeatureModal,

  // Sidebar
  onClickSidebar,
} = storeSlice.actions;
```

</details>
<br />

#### Components

This is an SPA aplication, then i use a logic of container, and reused the same container following the dry principle,
if you check the code, you can see that i try to reused all components, also the table is the same for all the views,
the modal is the same, only change the custom form for each modal-view.

<details>

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

```jsx
export const Dashboard = () => {
  const { actualPage } = useSelector((state) => state.storeData);

  const showFabAddNew = () => {
    switch (actualPage) {
      case "dashboard":
        break;
      case "customers":
        return <FabAddNew />;
      case "products":
        return <FabAddNew />;
      case "orders":
        return <FabAddNew />;

      default:
        break;
    }
  };

  const showContainer = () => {
    switch (actualPage) {
      case "dashboard":
        return <DashboardPage />;
      case "customers":
        return <CustomersPage />;
      case "products":
        return <ProductsPage />;
      case "orders":
        return <OrdersPage />;

      default:
        break;
    }
  };

  return (
    <>
      <Sidebar />
      <div className="ml-auto  mb-6 lg:w-[75%] xl:w-[80%] 2xl:w-[85%]">
        <Navbar />
        <div className="p-2 pt-2 2xl:container">
          <div className="flex flex-col  border-gray-300 rounded-xl">
            {showContainer()}
          </div>
        </div>
      </div>
      <CrudTableModal />
      {showFabAddNew()}
      <ModalConfirmation />
      <FeatureModal />
    </>
  );
};
```

</details>
<br />


SPA Aplicaction Frontend Customer relation manager, crate with vite, react-router, redux-toolkit,
 using Fake store API, por Fetch Api http request, take the data into a collection,
 in the store, algo working in controlled pagination, for the optimization, react-table.

Dashboard view, estructure used in crm apps.

react table very flexible for this purpose.

Again a modal, but this is not a package i build this modal.

Customer Relation Manager - Front end


## Description

Fully functional and fullstack Chat live App.

- Sockets.io for keep the conection.

#### Components

This is the look of the composition of the chat App.

<details>

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

```jsx
const socket = io("", { transports: ["websocket"] });

function App() {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    socket.emit("message", message);
    const newMessage = {
      body: message,
      from: "Me",
    };
    setMessages([newMessage, ...messages]);
    setMessage("");
  };

  useEffect(() => {
    const receiveMessage = (message) => {
      setMessages([message, ...messages]);
    };

    socket.on("message", receiveMessage);

    return () => {
      socket.off("message", receiveMessage);
    };
  }, [messages]);

  return (
    <div className="h-screen bg-zinc-800 text-white flex items-center justify-center">
      <form onSubmit={handleSubmit} className="bg-zinc-900 p-10">
        <h1 className="text-2xl font-bold my-2">Chat React</h1>
        <input
          type="text"
          onChange={(e) => setMessage(e.target.value)}
          value={message}
          className="border-2 border-zinc-5000 p-2 text-black w-full"
        />
        {/* <button className='bg-blue-500'>Send</button> */}

        <ul className="h-80 overflow-y-auto">
          {messages.map((message, index) => (
            <li
              key={index}
              className={`my-2 p-2 table text-sm rounded-md ${
                message.from === "Me" ? "bg-sky-700 ml-auto" : "bg-black"
              }`}
            >
              <p>
                {message.from}: {message.body}
              </p>
            </li>
          ))}
        </ul>
      </form>
    </div>
  );
}

export default App;
```

</details>
<br />

#### Server

See the how handle the conection in the backend, using CORS, Morgan

<details>

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

```jsx
const app = express();
const __dirname = dirname(
  fileURLToPath(import.meta.url)
); /* dirname("../client/dist") */
console.log(__dirname);
const server = http.createServer(app);
const io = new SocketServer(server);

app.use(cors());
app.use(
  morgan("dev", {
    cors: {
      // origin: 'http://localhost:5173'
    },
  })
);

io.on("connection", (socket) => {
  console.log(socket.id);
  //console.log('a user connected')
  socket.on("message", (message) => {
    socket.broadcast.emit("message", {
      body: message,
      from: socket.id,
    });
  });
});

app.use(express.static(join(__dirname, "../client/dist")));
server.listen(PORT);
console.log("Server started on port", PORT);
```

</details>


Live chat, you can open 2 chats, and have a communication in real-time, white the websockets technoly, is a protocol that avoid have this exchange of information more fast for this case.

React-live-chat - Sockets.io


## Description

Personal portfolio and blog website..

- Developed with Next.js using Static Site Generation.
- Dynamic pages for projects and blog posts.
- Blog posts and project details written in markdown and rendered with react-markdown.
- Framer motion, AOS and Swiper for the "eye candy".
- Deployed with "Deploy to GitHub Pages".

## Key takeaways

I've wanted to build a cool, or at least presentable, portfolio for a while now. Since I've been working a lot with Next.js lately, I figured it would be a great idea to build this portfolio using Next.js instead of some plain html/css/js. Because I wanted to write some blog posts as well, it would make sense to use Next.js due to its SEO advantages. And since I didn't want to pay for hosting just yet, Github Pages should do the trick.

It turned out to be not more complicated but bigger and more complex than expected. but it might not be the best approach to deploy it, since github now supports direct deployment of static sites like this.

This is an evolving project, so there is some room for DRY improvement since things went another way as originally thought of. E.g. I started rendering posts with react-markdown and projects descriptions like this with JSON. After a while I decided to render project descriptions also with react-markdown.


Portfolio build with Next js a popular framework of React, you can see all my projects and all my knowledge about my programming skills.

Portfolio-nextJS

Frontend Task-app, when i was learning in freecodecamp this was my second project.

Todo-list-app - Front end


# How to deploy a static Next.js website on Github Pages

![Image ...](/portfolio/images/posts/static-site-to-github-pages/github.jpg)

##### Using Next.js version 12.1.6

##### 2022-06-23

Update: Since July 27th, this procedure can be done completely by github without a third party solution. [github.blog](https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/)

## Introduction

I've wanted to build a cool, or at least presentable, Portfolio-Blog for a while now. Since I've been working a lot with Next.js lately, I figured it would be a great idea to build this portfolio using Next.js instead of some plain html/css/js. And since I didn't want to pay for hosting just right now, Github Pages should do the trick.

The original idea was to **next build** and **next export** the project and then manually upload the generated files to a repository. Since this didn't work the way I was thinking, I searched and found an even better solution. This involves using Github Actions and a third party CI/CD solution available at Github Marketplace. The one I used is ["Deploy to Github Pages"](https://github.com/marketplace/actions/deploy-to-github-pages).

### 1. Github Actions

1. In your repository go to actions and add a workflow by choosing Node.js:

   ![Image ...](/portfolio/images/posts/static-site-to-github-pages/github-actions-01.jpg)

2. You'll get a **node.js.yml** file like the one bellow:

   ```yml
   # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
   # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

   name: Node.js CI

   on:
     push:
       branches: ['main']
     pull_request:
       branches: ['main']

     jobs:
     build:

     runs-on: ubuntu-latest

     strategy:
       matrix:
         node-version: [12.x, 14.x, 16.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
       - run: npm run build --if-present
       - run: npm test
   ```

3. Select the node version e.g. **node-version: [16.x]** then start replacing at **- run: npm ci** like the code below. Since I'm using **yarn** I also changed the respective **npm** commands. For example: **run: yarn install --frozen-lockfile** is equivalent to **run: npm ci**.

   We also need to bypass Jekyll since it doesn't recognize folders that start with an underscore, like "\_next". More about bypassing Jekyll on Github [Github Blog](https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/) and [Stackoverflow](https://stackoverflow.com/questions/61450307/js-and-css-not-loading-when-hosting-next-application-on-github-pages).

   The section starting with **- name: Deploy** is the ["Deploy to Github Pages"](https://github.com/marketplace/actions/deploy-to-github-pages).

   ```yml
   - run: npm install -g yarn # Installs yarn.
   - run: yarn install --frozen-lockfile # Performs a clean install.
   - run: yarn build && export # Generates and exports files into "out" folder.
   - run: touch ./out/.nojekyll # This bypasses Github's Jekyll since it doesn't recognize folders that start with an underscore, like "_next".

   - name: Deploy
     uses: JamesIves/github-pages-deploy-action@v4.3.3
     with:
       branch: gh-pages # The branch the action should deploy to.
       folder: out # The folder the action should deploy.
   ```

4. The content of the folder **out** is then deployed to the **gh-pages** branch, which is then used by Github Pages.

### 2. Next.js config

#### - Custom image loader & basePath

1. In the Next.js application, we need to change the **next.config.js** file. We need to add a custom image loader since the standard one doesn't support **next export** which you can see in the error message bellow. More about built-in image loaders [official doc](https://nextjs.org/docs/api-reference/next/image#loader-configuration). This was a trial and error and the one that worked for me was the "akamai".

   Error message:

   ```txt
   Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
     Possible solutions:
       - Use `next start` to run a server, which includes the Image Optimization API.
       - Use any provider which supports Image Optimization (like Vercel).
       - Configure a third-party loader in `next.config.js`.
       - Use the `loader` prop for `next/image`.
     Read more: https://nextjs.org/docs/messages/export-image-api
   ```

   next.config.js:

   ```js
   /** @type {import('next').NextConfig} */
   const isProd = process.env.NODE_ENV === 'production';
   const nextConfig = {
     reactStrictMode: true,
     images: {
       loader: 'akamai',
       path: isProd ? 'https://<your github account>.github.io/' : '',
     },
     basePath: '/<your github repo>',
   };

   module.exports = nextConfig;
   ```

2. As seen above, you also need to define a **basePath**. The reason behind it is that images/assets will not load because your repository name will be part of the URL. There is another option called [assetPrefix](https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix) but it is discouraged. By the way you can also use a **isProduction** variable like this:

   next.config.js:

   ```js
   const isProd = process.env.NODE_ENV === 'production';
   //and then something like this ternary :
   basePath: isProd ? '/<your github repo>' : '',
   ```

#### - Changing Image src

1. Replace each image src as described in the [official docs](https://nextjs.org/docs/api-reference/next.config.js/basepath#images)

   ```jsx
   <Image
     src='/images/profile-pic.png'
     width={360}
     height={360}
     alt='profile-pic'
   />
   ```

   ```jsx
   <Image
     src='/<your github repo>/images/profile-pic.png'
     width={360}
     height={360}
     alt='profile-pic'
   />
   ```

Thanks for following until here and I hope it helps you too!


How to deploy a static Next.js website on Github Pages


# 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;
```


Emanuel Villalba portfolio

Hi, my name is Emanuel Villalba. I'm a React Frontend Developer with experience in e-commerce, ERP, API.

Featured projects

Calendar App

Customer Relation Manager - Front end

React-live-chat - Sockets.io

Portfolio-nextJS

Todo-list-app - Front end

About me

Moved by the desire to work with something creative I began learning Web Development in 2017.