“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:

1. Why don’t you just show the Notion database then?
2. How do you add these entries to your Notion database?

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.

How I built this

I used HTML, CSS, JavaScript, Express, and Notion API.

Honestly, if you want to build something similar, follow this fantastic article.

Challenges & learnings

Oof.

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.

Nani ???

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.

I was overwhelmed AF

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:

• Notion API – Full Course for Beginners
• Enhance Your Productivity With The Notion API
• How to Use Notion’s API With React to Store Data in a 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).

• Learn how to read a Notion Database with JavaScript!
• Build Static Pages Dynamically using Next.js and the Notion API

At this point, I was like…

Okay… maybe I should just give up. I have zero clue how to do this…

Until I came across this article: “Getting Started with the Notion API and Its JavaScript SDK” written by Rui Sousa.

Lifesaver.

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 power of an output-driven mindset

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.

Make compromises

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:

Using SCSS

I just couldn’t figure out how to use Express JS & SCSS when both need some sort of server to run.

Filter by tags

Originally I had a tag filter system. Yet, I couldn’t figure out how to filter. Well, I added all the HTML & JavaScript. It just didn’t work.

Back end is hard…

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.

Deploying a full-stack app is also hard…

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:

• Added a vercel.json page
• Added Notion API & database key as Vercel Environment Variables
• Changed to app.use(express.static(__dirname, "public"));
• Magic from my friend

What’s next

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!

And that’s a wrap!

Thank you for being awesome and reading this far! :)

If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!

‍