Devlog #2: Hidden Gems
Links and people that helped/inspired me
“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:
Why don’t you just show the Notion database then?
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:
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…
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!