TL;DR

My submission for the Hasura X Hashnode Hackathon is Petsura.

Help pets find their forever homes! Quickly scroll your feed of adoptable fluffs and share on Twitter, send an email to the foster, or open the pet directly in Petfinder

Petsura is powered by the Hasura platform, built using NextJS on Vercel, and leverages the Petfinder API.

Intro

Petsura is an Instagram-like web application that allows you to quickly browse through the adoptable pets found on Petfinder. When you find a fluff that sparks joy, you can share it on Twitter, contact the foster directly, or open the pet's full biography on Petfinder.

Motivation

I have three rescue animals that live with me, and I think the world would be a better place if more animals were adopted. I wanted to make an app that was basically Instagram for adoptable pets. Also, I've been itching to play with Hasura and this hackathon was a perfect time.

How to use

Feed

The main page is called the feed page. It displays 25 random, adoptable pets from the Petfinder API. Scroll the feed until you find a pet that sparks joy. You can load more pets when you arrive at the end of the feed.

When you find that special pet, you can do three different actions.

🐦 Share the pet on Twitter.

📧 Email the foster to express interest in adopting.

🌐 Open the pet's full biography on Petfinder.

Tech stack

Hosting

Vercel is a platform for hosting full-stack web applications. Petsura uses Vercel to host the NextJS web application.

Web Framework

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

Styles

Tailwind CSS CSS framework that lets you rapidly build beautiful web pages without leaving your HTML files.

API

Hasura is a fully managed GraphQL platform. Petsura uses Hasura for its GraphQL API and also leverages the Action feature to integrate with an AWS APIGW.

Serverless allows you to rapidly develop serverless applications in AWS. Petsura uses Serverless to build the APIGW and Lambda that integrates the Hasura GraphQL API with the Petfinder Rest API.

Apollo GraphQL Client is a great library to use in your React application to fetch data using GraphQL. Petsura uses the useQuery hook to interact with the Hasura.

Outro

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