My GitHub-Repo Website Restructure

Hello there, I'm Gabriel. It might probably be your first time visiting my blog, so I say, "You're welcome." I primarily write about Frontend technologies. I've published some React starter blogs in a series I created specifically for React newbies. Due to some reasons, I've been unable to continue, but I hope to pick up from where I left off this year.

Okay, now to the matter at hand. I developed a website recently as an assignment from AltSchool Africa, a Software Engineering online school focused on building the next generation of software developers in Africa. The assignment was to build a website that implemented the following concepts:

• Page routing in React

• Nested-routing

• Client-side Pagination

• Error-boundary

• and API

The API was to be my GitHub repository API.

Encountered "Sheges" Challenges

I can't say I found the task easy from the outset. In fact, it was confusing. I just started React, and I've only built one project with it, and now I'm taking it a step further. Well, no amount of complaint could take away the task, therefore, the deed had to be done, and I was going to be the executor.

"I saw shege, no be small!" While I had it easy with almost all the page components, but the pagination component used my eyes to see "mabo." I took a couple of free components from Flowbite (I used TailwindCSS) for the navigation bar and many other sections, and I tweaked the designs a bit to match the colours I selected for the website. I also had it rough with the Flowbite's navigation bar, but eventually, I overcame it (somebody shout "Halleluyah" in Daddy GO's voice).

I wasn't sure if the error boundary that I added worked. I just pushed the website on the deadline with "vibes and Insha Allah." Even the pagination was not that fine, but I worked on it to the extent that It'd take a really curious person or a tech expert to notice the "beans" that I had pushed.

Why did I see shege? I was hellbent on building my pagination component from scratch even when there were ready-made packages that could be installed. I believed that I could do better alone than with the installation of the ready-made component. I could work out the complexity and solve it just like the creator of that react-pagination component. Abi ki lo feel?

Back, Better, and Stronger

During the Christmas holidays, everyone at AltSchool's Frontend class was allowed to restructure their websites. I went back to my project, cd github-repo and continued from where I stopped. This time around, I went to the free university, YouTube, in search of better ways to write a pagination component, and yes, I found many. I took the one that suited the complexity of my website, watched the video over and over again, made a demo application that used pagination following the video's tutorial, and finally applied the concept to my work. It was pretty easy. I also checked out the Error Boundary component and rebuilt it.

The website is now better, with no bugs (from my perspective though). You can check it out yourself: my-GitHub-repo.

Mind you the landing page UI was inspired by GitHub's website UI. I referenced it in the Readme.md file of my work.

What next?

We've moved on to Vue. I find it interesting and I want to explore it by building a VueJS version of my React applications. I've also been constantly solidifying my React knowledge by reading books and articles so I can be World's Best.

Thanks for reading. And watch out for the continuation of my React Beginners series. I remain your humble Dr Prime. Gracias.