In my last post I talked about some of the decisions I made when building my site. In this post I'll talk about the architecture
In my last post I talked about some of the decisions I made leading up to building my site. In this post I wanted to talk more about the architecture decisions that went into building SunnyGolovine.com
One decision I did not include in my last post was the decision not to use a CMS for managing content on the site. However, I also didn't want to have all my data in my code, I needed something in the middle.
My solution for now is to keep all website data, with the exception of blog
posts, in JSON. The data is kept in the
/data folder while blog posts are kept
/posts folder. As far as getting the data to display on the site, I had
several options. The simplest method was to use
getStaticProps in my pages to
grab JSON data from my
/data folder. The problem is this solution just doesn't
scale. I wanted a single API that I could route my data into and then plug into
any component in the app. My solution to this was React Context.
For the longest time I never quite understood Context, I knew I had to dive into it eventually. So when the problem of getting data into my site presented itself, I found a perfect candidate for Context.
I currently use two Contexts: Site Context and Resume Context. With each context
I import JSON files and combine the data into one object. From there I just use
useContext hook to provide data wherever it's needed. I previously did
this with Redux however for a unidirectional data flow, Redux is way to much
I never put much thought into image optimization. NextJS after all recently
next/image which automatically optimizes your images. I put it in
and didn't think much of it until my builds started to fail. Digging into the
issue, it turns out that
next/image with it's default loader is not compatible
My solution here was to use another image optimization library called
next-optimized-images. While the docs looked pretty scary at first, getting
image optimization boiled down to adding a just a few lines of code to my
If someone wants to reach out to discuss hiring me for something, I want to make it as easy as possible for that person to reach me. As such, having just a link to my email and LinkedIn profile wasn't enough, I needed "Send me a Message" component.
Luckily this problem couldn't be easier to solve using Netlify. Netlify gives you two options when it comes to solving this problem: Forms or Functions. Netlify forms lets users submit forms on your site and will be collected by Netlify.
While this solution seems the most straightforward, it came with two drawbacks. First, the setup in a React project isn't straightforward and requires some workarounds, having already done this on a previous project, I wasn't looking forward to it. Second, getting the message to Netlify was only one piece of the puzzle. I would then have to route that message to my inbox or check Netlify religiously for any new messages, not ideal.
The alternative to Forms is to use Functions. Netlify Functions lets you write serverless functions that you can trigger from your frontend. This is great if you don't need a full on API but you still need a backend. I ended up writing a basic mailer function using Sendgrid and then had the messages routed to my Inbox.
There are still some drawbacks here, on Sendgrid's default plan I'm limited to just 100 messages per day so if I ever start getting high amounts of traffic on my site, I may have to reconsider this approach.
This site is still an active work in progress and there are still more things I want to implement. Namely a Dark Theme, SEO and Performance. My Lighthouse score is still >90% so there's a good bit of work to do.
Wouldn't it be nice to have your NetlifyCMS configuration in JS rather than YAML? Here's how you can do that.
Instead of rebuilding my website this year, I migrated it from Gatsby to NextJS. Here's how that went.
How to setup Storybook to work nicely with Styled Components custom theme.
There are tons of libraries out there that will help you with icons in React, but there's an even easier way.
A list of 10 awesome UI libraries that will help you bootstrap your next React project