“Hidden Gems” is a list of resources & people that have inspired/helped me. Check it out here: https://guo-hidden-gem.vercel.app/.
The cool thing is:
This list is generated from my Notion database
Now, you may have two questions:
The first question is a great one. Honestly, I don’t know. Maybe it’s my designer itch. I just want this page to look exactly like what I designed. And I was inspired by ui.land.
And the second question - I use a Chrome extension called “Save to Notion.” It’s a lifesaver.
I can first connect it to my Notion database. Then, when I come across a site/portfolio, I can press my shortcut keys, type in a few things, and boom. It’s in my database.
And then, my project site will automatically update.
To me as a designer, this feels magical.
But, it was a long-winding road to get here. I’ll talk about the challenges later.
But first, let’s quickly talk about the tech stack + how I built this.
Honestly, if you want to build something similar, follow this fantastic article.
I have to say - looking back:
This project was way, WAY out of my league.
I mean - my first project was building an article page with HTML & SCSS. And for this, I was doing back-end.
But, I’m still very happy with the result. I’m glad I stuck with it. So now, let’s reflect on some of the biggest challenges & learnings.
In the beginning, I had one clear vision:
Build a site that will display the data from my Notion database.
That sounds simple in concept. But under the hood… not at all, especially for a new coder like me.
At the time, there were a lot of things in my mind. Let’s talk about the biggest concern:
So… how tf do I fetch data from a Notion database and display it on my site?
Well, I did what most people do: Googling. At first, I realized that a lot of the resources teach you how to build a site to make changes to your Notion database:
The problem was … I needed to learn the other way around. I wanted to learn how to display data from my Notion database.
So, I kept on Googling. There were a few that taught that. But they either stopped fetching the data on the terminal or used a language I don’t know (Next.js).
At this point, I was like…
Okay… maybe I should just give up. I have zero clue how to do this…
It was such a well-written article that taught me exactly what I wanted. I followed along and the rest was history.
So, don’t stop Googling. Or ask ChatGPT.
The only reason I stuck through this project was this:
I had an idea. I knew exactly how it should work. I would do whatever I could to build it.
I was eager to bring the idea to life. I wanted this thing to exist.
Maybe try out this mindset for your next coding project if you’re new to coding.
As I mentioned before:
This project is hard AF - for me as a noob coder.
It was hard for me to even fully understand the code I wrote.
Because of this, when there’s a bug, I normally don’t know why it’s wrong.
I was so desperate at one point that I reached out to the article’s writer directly on Twitter.
In the end, I fixed the bug myself. I just forgot to add something small in the code - classic. But he still responded - super nice!
Anyways, my lack of thorough understanding led me to abandon some elements of the project:
I just couldn’t figure out how to use Express JS & SCSS when both need some sort of server to run.
Caveat: I have learned a bit of back end before. But that was a while back.
And I was not a fan.
As a designer, I like front-end a lot more. You can see the changes you make visually.
So, this project was a huge BONK on my head. I mean just look at this
Fetch, await, async, const, require, express js? What are those???
Anyways, a lot to learn. And a huge shout-out to my friend Ian. Without his explanation, I would not get 90% of the back-end code I wrote.
For my last project, it was simply because it was a static site with no back end.
But, this one is a different story.
I was using Express JS for the back end.
And apparently, deploying a full-stack app is very different from a static one. By A LOT.
Another HUGE thanks to Ian for helping me deploy after days of frustration. Here were some of the key changes:
So, at the moment I’m writing this article (5/15/23), I’m following a tutorial to learn 11ty - a static site generator.
From this, I want to get a good understanding of 11ty.
Then, I have a few more project ideas & tech I want to try. So stay tuned!
Also, I came across this OP site - roadmap.sh. I’m going to spend some time swimming in this wealth of knowledge.
I'll also be looking over egghead.io. Another phenomenal learning site!
Thank you for being awesome and reading this far! :)