Introducing Hashnode Roulette
Make your hashnode feed wonderful. Quickly find new stories and authors to follow using simple mobile gestures.
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 -> twitter.com/thealexkates