Day 4 and 5 - Build More Components and GraphQL

Day 4 - Theme adjusments and Mobile Menu

git log summary

feat: separate <Theme /> and <Layout />
feat: setup <Icon /> component
feat: add <ModalMobileMenu /> component and toggle feature

Creating the base theme was so awesome since I already add the toggle switch component to toggle between light and dark theme. It was so nice playing the toggle feature! Like yeah its just a simple one but to see the color changes as you expect as so peaceful!

Icons remove and burger menu was also done in AdobeXD and you can convert it thru SVG file so it can render it well. After creating the component Icon I made a the mobile menu along with the newly created icons. But why building new component from scratch when you can use the existing one provided buy BulmaCSS? I want it to be customized from design to code and thats all :)

It was a long but productive day! The base theme and layout was already added and working fine. I add some dummy pages so I can test and it works smooth as expected :)

Day 5 - Adding GraphQL

git log summary

feat: base layout with desktop and mobile menu are now added
feat: create <ArticleList /> for displaying list article with static data
feat: integration graphql for listing blog posts and single blog post

So after creating the base template, I created the base component <ArticleList /> for listing articles first along with the static data. The plan was to made all the expected styling and elements so I can test it for both mobile and desktop to check the responsive as well the color difference when toggling from light to dark mode.

After adding it and do some adjustments for the base layout. I start adding the real data using the GraphQL. It was hard at first because this was my first time using it. I was to verse using REST API endpoints and dealing with JSON data. After couple of tries I figure out how to use it and start replacing the static.

First, I made the adjustment in listing all the blog post. Man that was so neat! It works so well and I was so happy watching and making the changes! After finishing it, I start working on the single blog post page. There are some components that are needs to be separated from the <ArticleList /> like the title and date. So I made some refactor first and then try to export/import those components piece by piece and it pays off!

Now the displaying of all articles and single page are now working great along with the graphql data! It as tough going back in forth, reading documentation, checking if I added the proper graphql statement, deleting the .cache so it can render the latest development changes after doing some contentful changes and more! But I learn a lot!