### Hashnode connected

Today I followed the incredibly useful blog post by [CatalinPit](https://catalins.tech/hashnode-api-how-to-display-your-blog-articles-on-your-portfolio-page/) and I connected my portfolio blog directly to Hashnode, skipping GraphCMS. This negates the need to create a duplicate post in GraphCMS after posting on Hashnode.

### Revalidate: 600

I have kept the default refresh period in Vercel to 10 minutes. New blog posts on Hashnode will show up on my portfolio within 10 minutes, provided the Vercel platform rebuilds the new page in sub-30 seconds as usual.

### GitHub actions untouched

I have not messed with anything I have already set up in GitHub. My latest blog should be synched to my GH profile every sunday as usual

### One caveat

The GraphCMS version of my blog was based on blog series which are almost mirrored from Hashnode. Unfortunately, the Series feature was glued onto Hashnode after the fact and the GraphQL API does not support fetching blogs based on blog series. I have attempted a simple fetch to grab the blog series, but I was getting error messages. Currently, I have removed the blog series header from the portfolio site. I have replaced the series badge on each blog post with an avatar of the author, aka, yours truly!

10 Redesigning my portfolio app

My solar energy startup platform FasoLara has reached a new milestone recently and I decided to start a new blog series about it!

The project management platform has been a long journey since I published my first commit to GitHub in October 2020. What started based on a simple idea quickly became a behemoth of a software engineering project for my beginner programmer skills. I have poured thousands of hours into research, tutorials and coding to figure out how to put something like this together. Since then, I have made multiple changes to the FasoLara repository.

The platform is currently open source, but I am using a private fork to publish the 3 different components to the Vercel platform. I had a basic demo of the admin dashboard with 6 pages before I removed all the sample data, then upgraded everything to the app directory in NextJS 13 and connected the dashboard to the backend server featuring Apollo GraphQL server v4.

Yesterday, February 15th, 2023, I added Next-Auth to handle authentication. Initial testing of the next-auth version seems to work with the `appDir` in Next.JS 13. It is far from the login experience that I want. It will take more effort to iron out the details because proper documentation is still rare

#### Lots of testing needs to be done

Although I have successfully connected the Cypress testing framework to the frontend app, I have yet to do the same on the admin app. I am managing a lot of complexity with lots of new packages.

#### Every mistake under the sun

I have lost count of how many times I made breaking changes to the code base trying to implement new features on the main branch only to hard reset the branch after tens of hours of work that I could have done on a new branch instead. I can say that I am moving fast and breaking things per facebook's motto!

#### Mobile app on the backburner

I have 3 sample pages that I made on the mobile application. I would have liked to have at least a fully functional landing page on the React Native application component by now, but that might take a while since I can only focus on breaking one thing at a time! I have not finished the Figma designs of the mobile application. Now that I have a decent idea of the backend server capabilities and have dozens of detailed GraphQL schemas to support it, I can make more progress on building the server and admin dashboard in lockstep. Later, when I get stuck on both of those, I will switch my attention to the mobile application. I think once I have a functional admin dashboard which is the centerpiece of the platform, mobile development will benefit greatly from the experience.

#### Fun while it lasted

I have enjoyed crafting some of the User Interface components from scratch and learning how to put together primitive components using JSX and SASS, it has become quickly obvious that I was spending time on the less important things. I have recently added ChakraUI to my tech stack and the increasing number of available ready-to-go components in Chakra has accelerated development considerably. The project contains enough complexity for a lifetime, and it was refreshing to move away from getting lost in some of the smaller weeds so I can focus on sorting out getting lost in some of the bigger weeds such as authentication and role-based authorization using NextAuth and a homemade authentication scheme based on GraphQL.

#### Battle of Syssiphus

Building so many separate applications within the same platform feels like a battle of Syssiphus based on the sheer amount of work that needs to be done and redone. I can say I have rebuilt the admin dashboard 2 or 3 times already. The irony of duplicating work by trying to avoid duplicated work. But I also know that duplicating work 2-5 times is much better than duplicating that work on 20 different pages, some of which will need to be redone a few more times in the future based on updates in the backend and changes done to the underlying MongoDB document models.

#### Next steps...

I look forward to a shorter blog post in the next article where I document how I managed to get authentication 'working' on the admin dashboard. It feels good to see how things are shaping up since I had no idea I could pull off all the progress made so far. Upgrading the entire project to TypeScript was such a huge surprise based on how little TypeScript I know and how it took less than 10 hours in total to get the whole project converted to TypeScript. It's all on the up and up from here!!!

1 Startup Series: Connecting my Admin frontend to the backend

# Demo Project links are live

Today I made a minor change to the portfolio website by adding a button linking to the live projects. I should have done this ages ago, but I was waiting to migrate my projects away from Heroku beforehand to avoid broken links...

### Broken links on Railway

My Django, Angular and Spring boot projects which were initially deployed to the Heroku platform were moved to Railway. None of them is currently working because I have provisioned some empty MySQL and Postgres databases which remained empty as a result of my failed connection attempts. Heroku used to automatically provision and connect the databases for us.. Despite being empty, these databases were up and running 24h/7, they used up all my free credits and all my other Railway deployments were paused eventually.

In short, I waited longer to avoid broken links, and I still have broken links!

### Open Links on a new tab

Next.JS is a little particular about links. I tried using the built-in @next/link for the demo websites, but there was no simple way to open the links on a new tab. I add to create a custom wrapper to make it work.

1. Create a custom `OpenNewTab` function
    

```javascript
  const openNewTab = (url) => {
    window.open(url, "_blank", "noopener,noreferrer");
  };
```

2\. Use it as a callback to the `button`

```scss
<button onClick={() => openNewTab(demoLink)}>
  Visit the Live Project
</button>
```

### Updated developer resume

A few of the Railway apps were featured on my resume. I replaced them today with other apps which are live on the Vercel platform.

9 Redesigning my portfolio app

# Website is now live!

I have updated the domain of my new portfolio website to https://tioye.dev and the original version to legacy.tioye.dev. This feels like a huge step although there are still several changes that needs to happen.

### Need to add mobile view

I have yet to add media queries to improve the website display on mobile view. This will take several dedicated hours which I do not currently have due to final exams. I will be focused on that during the week of December 15th, 2022.

### Need to add content for project details

I wanted to write a blog-like content to go with each project to provide more context, but that also feels secondary to the mobile view feature.

### Other minor details


- Replace SendGrid on contact page with different provider

- Remove Calendly from website or find a way to remove GDPR annoyances



![Screenshot from 2022-12-02 20-24-33.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670030688764/69442bc7-7831-4001-8272-0ff9f13fb064.png align="left")


8 Redesigning my portfolio app

# How to Use PrismJS with NextJS

This is a summary of how I got syntax highlighting to work on my NextJS blog

### Install Prism

First I installed Prism.JS from NPM. You can use Yarn

```
npm i prismjs
``` 
or
```
yarn add prismjs
``` 

### Import Prism into the Next.JS Component

Next, I imported Prism and the React useEffect hook into the blog details page. 

The Okaidia theme looks good so, I imported its CSS styles. 

Then, I called the Prism.highlightAll function inside the useEffect hook. This will turn on syntax highlighting after the component is mounted

Finally, I added a className specifying the programming language e.g. ```className="language-css"``` or ```className="language-js"```

```javascript
import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
import styles from "styles/Details.module.scss"

const SingleProject = ({ project }) => {

  useEffect(() => {
    Prism.highlightAll()
  }, [])

  if (!project) return

  return (
    <>
      <div className={styles.Container}>
          <div
            dangerouslySetInnerHTML={{ __html: project.description }}
            className={`${styles.formatter} language-js`}
          >
          </div>
      </div>
    </>
  )
}

export default SingleProject
``` 

### Make it your way

Prism provides several customization options. You can download a custom minified CSS from https://prismjs.com/download.html and import it inside your ```_app.js``` 

```
// SingleProject.js
import React, { useEffect } from "react";
import Prism from "prismjs";
import styles from "styles/Details.module.scss"

const SingleProject = ({ project }) => {

  useEffect(() => {
    Prism.highlightAll()
  }, [])

  if (!project) return

  return (
    <>
      <div className={styles.Container}>
          <div
            dangerouslySetInnerHTML={{ __html: project.description }}
            className={`${styles.formatter} language-js`}
          >
          </div>
      </div>
    </>
  )
}

export default SingleProject
``` 

My ```_app.js```  file looks like this


```
// _app.js
import Head from "next/head"
import Layout from "../components/Layout"
import "../styles/globals.scss"
import "../styles/prism.css"

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Head>
        <link rel="shortcut icon" href="/assets/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

``` 

We're done! You may need to refresh your page to activate Prism.

### The result


![Screenshot from 2022-11-06 04-21-19.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667726550776/J2r5rQ08Z.png align="left")



7 Redesigning my portfolio app

# Contact Page is activated

Today I worked on integrating a SendGrid email functionality on the Contact form. It was fairly easy to setup once I figured out how to correctly set my environment variables.

I have set up a way to send a Thank You email to the user on Contact form submission. I need to duplicate the functionality so I can forward the user's message to myself on another email.


```javascript
const sgMail = require("@sendgrid/mail")

export default function handler(req, res) {
  sgMail.setApiKey(process.env.SENDGRID_KEY)
  const body = req.body
  if (!body.name || !body.email || !body.message) {
    return res
      .status(400)
      .json({ data: "name, email and message are required" })
  }
  const msg = {
    to: body.email,
    from: process.env.SENDER,
    subject: "Thanks for reaching out, " + body.name,
    text: "I will get back to you as soon as possible!",
    html: "<strong>I will get back to you as soon as possible!</strong>",
  }
  sgMail
    .send(msg)
    .then(() => {
      console.log("Email sent")
    })
    .catch((error) => {
      console.error(error)
    })

  res
    .status(200)
    .send("Success")
}
``` 

## Testing the Contact form

I have tested the email sending part manually and the SendGrid platform is having trouble delivering the emails, but so far the contact page is behaving normally. I will move on the other tasks for now and circle back later



![Screenshot from 2022-11-06 03-20-47.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667722974349/VsdcbvzR5.png align="left")

You are welcome to visit the current version of the site at https://tioyedev.vercel.app/home

6 Redesigning my portfolio app

## The Experience page is live!

I have managed to create the experience page and make it look very close to the Figma design without too many issues

### Feeling proud

The design of the experience section worried me a little because I knew I had to use several nested html div elements, and then use CSS to target their ```::before``` and ```::after``` pseudo-elements to achieve the desired look. That made me nervous because I dabble in CSS. Thankfully, the idea I had in mind worked and I am proud of the results


```scss      
.EdContainer {
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 85%;
        min-height: 200px;
        float: right;
        border-radius: 8px;
        margin: 10px 0;

        &::before {
          content: "";
          width: 20px;
          height: 20px;
          border-radius: 50%;
          position: absolute;
          background-color: #333333;
          margin-left: -3.5rem;
          z-index: 3;
        }

        &::after {
          content: "";
          border-left: 2px solid #555;
          height: 315px;
          margin-left: -3rem;
          position: absolute;
        }

        .badge {
          background-color: #333333;
          width: fit-content;
          padding: 5px 20px;
          border-radius: 30px;
        }

        &:nth-of-type(odd) {
          background-color: #0f0f0f90;
        }
        &:nth-of-type(even) {
          background-color: #16161690;

          &::before {
            background-color: #fdc66b;
          }
        }
        &:last-of-type {
          &::after {
            height: 290px;
          }
        }
      }
``` 


### Started working on the Contact page

I have added the initial draft of the contact page and even pushed the preliminary changes to the live site.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667531786520/nIdYvOQkc.png align="left")


I am still working on improving the look. All the pages show up flawlessly on my 43in monitor, but they are too big in my laptop screen. 

This will take longer than I thought, but it's part of my learning process..

As usual, you can see the current version of the site at https://tioyedev.vercel.app/home


5 Redesigning my portfolio app

# Portfolio and Blog pages are done

The main logic of the portfolio page is done for now. There is extra information I would like to display on the project details page, but those are trivial compared to the main task of fetching the correct projects from the remote database and displaying them on the page. 

## Individual routing to Project Details

I have run into a dozen issues today while fetching data for individual pages. I was aware that the frontend was having trouble fetching the data from the database, but it was not obvious where the mistake from coming from. I have tested and retested my queries on the GraphQL server itself, and the queries was working properly, which made my confusion even greater. 

## Keep trying and trying


![Screenshot from 2022-10-18 19-45-18.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666136727284/qcFmiiTFE.png align="left")

It turns out I made a mistake when refactoring the getStaticPaths function. I was fetching slugs from the blogs page and using them to fetch project details. That mismatch was threatening my sanity. The vercel platform probably had a field day with that one!! 

## Unhelpful error messages

The error messages resulting from deployment failures were not very helpful at first, until I started following the trail of files that the errors originated from

![Screenshot from 2022-10-18 19-38-03.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666136393570/AwZFAkHUc.png align="left")

I love how the deployed website feels snappy because the pages are prerendered with data from the GraphQL backend. 

The next step is to get started on the Experience page. 

For now, you can take a look at the deployed site at https://tioyedev.vercel.app/home

4 Redesigning my portfolio app

# The first draft is live!

Today I have deployed the current version of the app to vercel. It was a great way to make sure all the pieces of the skeleton fit together nicely.

Barring a few obvious mistakes in styling and importing various component, I did not run into lots of trouble. I kept fixing the mistakes one by one until the vercel platform finally gave me a working build


![Screenshot from 2022-10-18 03-35-49.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666078557935/NHrhlO5NW.png align="left")

After the first draft deployed, I rushed to make more styling improvements to the existing pages, which triggered a dozen new builds.

As things stand, we have a working landing page, blogs page and portfolio projects landing page. I am working on fixing the GraphQL queries so that each portfolio project will point to the correct project details page.

Will probably talk about it on the next blog post.

For now, you can take a look at the deployed draft at https://tioyedev.vercel.app/home 



![Screenshot from 2022-10-18 03-43-24.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666079023872/zlDYLyGuw.png align="left")




3 Redesigning my portfolio app

# Short Update: Blog is working!

I spent the last two days focusing on the blog page. I was able to connect the GraphCMS backend to the frontend and the routes and data fetching is functional.

The first difficulty I faced when attempting to connect was trying to use the React useEffect hooks. Those attempts were futile and I resorted to the GraphCMS documentation for NextJS which was based on getStaticProps. It was trivial to copy the code example from the documentation and make small updates to get it to work.

So far, I am able to display all the categories of posts in the database as well as all posts. I have designed the routes to be able to fetch a single post from the database and reroute us to the single post page based on the slug.



![Screenshot from 2022-10-10 16-38-53.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665434344409/jhcAqC9C1.png align="left")

The next step for the post page is to make sure we can click on the categories and fetch all posts belonging to that category or series of posts.

2 Redesigning my Portfolio website

# It's time to upgrade my portfolio website!

This was long overdue because I created my portfolio website in the Summer of 2020, at a time when I barely knew any JavaScript.

## Do Not Repeat Yourself!

When using pure HTML and CSS, it is very challenging to avoid repeating code for similar components. I have been copy pasting code and modifying only the parts I need and now that my projects page is getting crowded, I have decided to put my React skills to good use

## Figma design ready

It took me about a week to create the new design on Figma and another 2 days to create the Layout including the sidebar, Navigation bar and Footer


![Screenshot from 2022-10-09 04-49-21.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665305590733/TyaFDo_JG.png align="left")

The general Layout


![Screenshot from 2022-10-09 04-46-26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665305643934/7eEgVmY_I.png align="left")

The blog content


![Screenshot from 2022-10-09 04-55-26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665305750293/wFJbvz-Ve.png align="left")

The next step will be to connect to the GraphCMS using Apollo Client or GraphQL Query. 


1 Redesigning my Portfolio Website

### As they say, another day, another dollar

Today was a good day to finish one of my unfinished projects and I did just that! After publishing the project on Vercel, I feel ready to tackle the Charts component on more unfinished personal projects. 

### Charts, charts, charts

I was making good progress on my dashboard project but then, I got stuck at implementing a charts component with filters. I have paused development on that project for over a month now and found an admin dashboard tutorial on YouTube featuring a few charts. I started the tutorial project a few weeks ago and finally completed the project today. 

The tutorial uses components from React Charts as well as data tables from Material UI.

I have not used Material extensively, but it is fairly easy to use and I can include it in future projects as necessary.

### Review

This tutorial was also a good refresher for me for using React Context API and a few React hooks for implemented a Dark mode toggler. 

#### Light Mode version

![Screenshot from 2022-07-13 20-20-53.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657758060851/p4Um4GBR6.png align="left")

#### Dark Mode version
![Screenshot from 2022-07-13 20-19-30.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657757990830/my5YqawBV.png align="left")

Tutorial Link: https://www.youtube.com/watch?v=yKV1IGahXqA

Demo Project Link: https://reactdash-gules.vercel.app/

Day 2 of Demolishing my Stack of Unfinished Projects

#### We have all been there.. 
We all have that long list of unfinished side projects that we hope to complete some day.. If you're anything like me, that 'some day' is always eluding you and never getting here.. 
#### Ripping up the bandaid
Today I have decided to finally go ahead and finish one of my long list of unfinished tutorial projects. I recently read a long Twitter thread that gave me a lot of food for thought.
To paraphrase my understanding of one tweet, 'success is a combination of all the small wins'. Therefore, by finishing and publishing one unfinished project today, I set myself up to finishing another one tomorrow. 
#### Small, consistent gains
I just need to make it a habit of finishing what I have started so that  they do not get out of hands. After all, my Github account has about 126 repositories, but my portfolio website only has a dozen completed and published projects.
#### Almost Done
I have finished up the tutorial project. My next step is to rebuild the project from scratch without the handholding of the tutorial. One of the mental blocks that prevented me from finishing up the project in the first place seems insignificant now. Next time that mental block tries me, I will be better prepared!

The project we're talking about!

Published Link: https://blockchain.tioye.dev 


blog

10 Redesigning my portfolio app

16 March 2023

1 Startup Series: Connecting my Admin frontend to the backend

16 February 2023

9 Redesigning my portfolio app

28 December 2022

8 Redesigning my portfolio app

03 December 2022

7 Redesigning my portfolio app

06 November 2022

6 Redesigning my portfolio app

06 November 2022

5 Redesigning my portfolio app

04 November 2022

4 Redesigning my portfolio app

18 October 2022

3 Redesigning my portfolio app

18 October 2022

2 Redesigning my Portfolio website

10 October 2022

1 Redesigning my Portfolio Website

09 October 2022

Day 2 of Demolishing my Stack of Unfinished Projects

14 July 2022

Day 1 of Demolishing my Stack of Unfinished Projects

04 July 2022