I share a lot of links with the teams I‘ve been a part of — it’s one of the ways I stay connected with them. More importantly I get a lot of satisfaction out of it; sharing a tool that makes someone’s job more enjoyable and/or interesting is rad. I felt like it would be worthwhile to keep a public area where I could share all my design inspiration and useful web tidbits I’ve collected. Usually I’ll tweet these out, but I also saw this as an opportunity to test out Next.js. Here I’m going to walk you through building a design inspiration board using this framework.
Example: https://design.af, source
Why use Next.js
Next.JS is a high performing server-side rendered node app that has the simplicity of Meteor without the performance issues_._ Often, its used in combination with React, but it is infinitely pluggable; you can configure as much or as little as you wish (like Sass…or Redux), and the documentation to do so is extensive. It has a ton of performance optimizations built in meaning that you can think less about set up.
Buzzwords. Buzzwords everywhere.
Getting started
We’re going to create a single page app that fetches data from a Dropmark feed and use that to display a grid of images. This data is a JSON response from an API endpoint at Dropmark. What we need is something to help us easily fetch the data, sort it, and display it.
We will use a public feed on mine for now, and I’ll take you through the steps needed to use your own private boards later.
Create a new directory and install the dependencies for this project:
mkdir design-inspocd design-inspo yarn init
yarn install next moment react react-dom isomorphic-fetch
What do all of these do?
- Next handles the node parts and all our assets (styles, js) Read more here.
- Moment handles the time calculations so we can show when we posted something.
- React and React-dom help us with the interface so we can display it with fancy HTML. Realistically we could use any JS front end framework or even nothing at all. Frameworkless is a bit trickier though for our example.
- Ramda helps us sort data, its an alternative to Lodash and Underscore.
Add our start script to your package.json file
{"scripts":{"dev": "next"}}
Creating the folder layout and initial `index.js` file
We need a pages/ folder per the Next API. Run the following in your command line: mkdir pages && touch pages/index.js. We’re going to use our index.js file as a wrapping component that fetches all of our data and passes it to smaller components.
We’re going to use the endpoint for my Web feed from Dropmark. I have this public so that we can use it for the example but later on I’ll break down how we can use environment variables for private boards.
Here’s what we need in that index.js file:
To summarize this, we’re asynchronously “fetch”-ing data from the Dropmark endpoint (http://twnsndco.dropmark.com/396720.json). When the request is complete, we return data which are the items part of the json object. This data is then passed into our Feed component.
Componentize me Cap’n
Let’s tackle our smaller components. Create a /component folder and a new file in it called Feed.js. This component will pull in our data to map to a smaller component, Post which we will create later.
Our Feed.js file:
We’re passing in 2 arguments to this functional component: className and posts. We’ll likely use className in order to style the container for all of our posts. Data is our JSON object that the Feed component is receiving from our index component (the index.js file). With data, an array, we can map each post object to a Post component.
The Post: Let’s see some stuff
Create a Post.js file in your components folder. We’re going to unwrap the post object that it receives from Feed and use that to populate a bunch of HTML elements.
Styling it up
To test out our app, run npm run dev and open localhost:3000 in your browser. You should see an un-styled stream of images and text. With Next.js you get hot module reloading out of the box, which means instant visual feedback.
Since you’re the designer, I won’t tell you how to style this; you have all the raw ingredients now to make your design board. I would recommend setting up [styled-components](https://github.com/zeit/next.js/blob/master/examples/with-styled-components) (easy to use, nice ro write) or [cxs](https://github.com/zeit/next.js/blob/master/examples/with-cxs) (easy to use, performant).
Making it your own feed
To make your own feed, create an account at Dropmark.com. Create a new collection for what you want to be sharing. All of your posts will be there.
At the far left in the sidebar you can see “New Collection”
First, I’d add a couple items to this collection. Download and set up the Dropmark chrome/safari extension or their mac application. Usually with websites I take a screenshot, which essentially gets you the front page of the site.
Open up your new collection by clicking the title in the sidebar head to that collection’s board. Copy down the URL from your browser. Usually it is something like yourusername.dropmark.com/102333 Then head to the account settings underneath your avatar on the far right. Scroll down to private links and get/generate your private key.
Copy this key down as well. At the root of your project folder, create a .env file with the key DROPMARK_API_KEY=XXXXXXXXXXX where the instead of X’s you have your key. Then add another file to the root, called now.json with the following content:
{"dotenv": true}
This lets Now know that you have included a .env file and need access to the token there.
Head to your index.js file and change it to use your new collection url and your Dropmark key. Here we’re using a string template to insert our key before generating the string.
import React from 'react';import 'isomorphic-fetch';
const postEndpoint = `http://<your-user-name>.dropmark.com/<collection-id>.json?key=${process.env.DROPMARK_KEY}`
Spin up your project again using npm run dev and you should now see a list with the images/sites you’ve added so far.
Deploying
To deploy a copy, globally install now with npm install -g now and run now --dotenv from the root of your project folder to deploy it to a temporary URL. For custom urls, consult https://zeit.co/now.
Questions? Build something awesome?
Reach out to me on twitter @twnsndco, I’d be more than happy to help out or point you towards helpful documentation.