S3B4S/dept-takehome

Submission for the Dept Agency take home, uses Next.JS, Netlify & ButterCMS,

Dept take home

My submission for the Dept take home, using Netlify, Next.JS and ButterCMS. A live preview of the site can be found here!

• Getting Started
• Technologies involved
• Description & reasoning
• Potential improvements

Table of contents generated with markdown-toc

Getting Started

First, install the dependencies needed:

npm install

And after that you can run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Technologies involved

• TypeScript
• React
• Next.JS
• Netlify
• ButterCMS

Description & reasoning

Looking at the design of the page I derived the following assumptions;

1. No user-dependent context on the page
2. Cases might be added and/or reordered
3. Content gets updated somewhat infrequently

Looking at this, I find that two pieces of technology make sense here, a CMS and SSG (static site generation). The CMS is there so that given teams, such as marketing, can easily edit the content in a user-friendly way, and since there is no user-dependent state we can statically generate our sites whenever the CMS gets updated. A regular react SPA wouldn't have made much sense, since all of the requests would be the same.

Previously, I have used Gatsby + Netlify CMS, which was quite pleasant, but I wanted to try something new, hence I opted to use Next.JS. The next step is to choose a CMS, we should first look at what our data might look like:

- Cases
  - Title
  - Cover image
  - Company

- Clients
  - Name
  - Logo

- Reviews
  - Review
  - Reviewer
  - Role
  - Company

I do not expect the site to make a lot of varying requests, as well as the shape of the data matching the potential general-purpose REST API (/cases for all cases, /clients for all clients etc.). We also will need to upload images to use for the covers. Thus our CMS will have the following requirements;

1. Make content available through REST endpoints
2. Be able to upload images
3. All of this available in the free tier

My eyes then fell upon ButterCMS, which I had also heard of previously and did satisfy the above requirements.

The deployment will be done on Netlify, so whenever content gets published in ButterCMS it will trigger Netlify to initiate the build process and deploy the newly generated static sites. This can be done through the webhooks of ButterCMS and the build hooks from Netlify.

So, all in all, we are using

• ButterCMS for the content
• Next.JS for statically generating the sites
• Netlify for hosting and the building pipeline

Potential improvements

If I had more time, these are the main things I'd have wanted to improve:

• Better separation of child and parent components, in some cases, some components are including CSS rules that should have been imposed by the parents. For example, the Review component includes a border-top, which makes sense in the context of our site as a whole and how we're using it, but might not make sense in other sites where we'd want to reuse Reivew. So rather than the border-top embedded in the Review component, it would have been better applied by the parent of Review.
• Some of the content is hardcoded, like certain menu entries and countries, it would be good to extract those out so that we're not having a mix of hardcoded content & content from the CMS.
• I feel like I could have been more consistent in my usage of CSS, for example, in some cases I try to keep the selectors as flat as possible, for example, .footer {}, .footer-link {}, wherein some other places I'll target children .footer {}, .footer .link {}. The latter can sometimes cause some issues when it comes to CSS prioritization when you'd want to override certain .link rules for instance.