TL;DR

My submission for the Hashnode/Netlify hackathon is Hashnode Roulette.

Make your hashnode feed wonderful. Quickly find new stories and authors to follow using simple mobile gestures.

Hashnode Roulette is powered by the Netlify platform, built using NextJS, and leverages the Hashnode API.

Intro

Hashnode Roulette is a Tinder-like web application that allows you to quickly browse through the top Hashnode articles and swipe them to react, follow, or open the article.

☝️ Swipe up to open the article in a new window.

👉 Swipe right to like the current article.

👇 Swipe down to follow the author.

👈 Swipe left to skip the article.

Motivation

I personally think Hashnode is the best developer blogging platform in the market right now. I wanted to spend some time learning their GraphQL API. Also, I love working with NextJS and wanted to learn next-auth. Also, it's a lot of fun refreshing the page and getting random articles.

How to use

Login

Unfortunately, there isn't a way to sign in to Hashnode via OAuth yet. For now, use your Twitter credentials to sign in.

Settings

Certain gestures, like swipe-right and swipe-down, use GraphQL mutations via the Hashnode API. These mutations require you to use your API key.

You'll need to grab your Hashnode API key. Head over to your Account Settings -> Developer -> Generate New Token.

Enter your Hashnode API key and click Submit.

Deck

The main page is called the Deck page. It has a random set of Hashnode articles as cards. These cards can be swiped in different directions based on how you want to react to the article.

☝️ Swipe up to open the article in a new window.

👉 Swipe right to like the current article.

👇 Swipe down to follow the author.

👈 Swipe left to skip the article.

Tech stack

Hosting

Netlify is a platform for hosting full-stack web applications. Hashnode Roulette uses Netlify to host the NextJS web application.

Web Framework

NextJS is the React framework for building modern, production-ready applications. Hashnode Roulette is built on NextJS.

Authentication

next-auth is the go-to authentication framework when working with NextJS. Hashnode Roulette uses the twitter-oauth module to allow users to authenticate using their Twitter credentials.

UI Controls

react-tinder-card is an NPM module that makes it easy to implement the swipe-card UI control. Hashnode Roulette uses this package to present the user with Hashnode articles that can be swiped.

Data

Apollo GraphQL Client is a great library to use in your React application to fetch data using GraphQL. Hashnode Roulette uses the useQuery and useMutation hooks to interact with the Hashnode API.

Outro

I hope you enjoy using Hashnode Roulette as much as I did building it! Let's connect on Twitter -> https://twitter.com/thealexkates