Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cassidoo/next-adventure

A crowdsourced, mad-lib, choose your own adventure story!
https://github.com/cassidoo/next-adventure

hasura netlify netlify-forms netlify-functions next-on-netlify nextjs

Last synced: 8 days ago
JSON representation

A crowdsourced, mad-lib, choose your own adventure story!

Awesome Lists containing this project

README

        

![Next Adventure](ghbanner.png)


A spooky, crowdsourced, mad-lib, Choose Your Own Adventure story
built with Next.js, XState, Hasura, and Netlify Forms + Functions.



Netlify Status

## What is this?

This is a project that uses [Next.js](https://nextjs.org/), [XState](https://xstate.js.org/), [Hasura](https://hasura.io/), and [Netlify Forms](https://www.netlify.com/products/forms/?utm_source=github&utm_medium=nextadventureforms-cs&utm_campaign=devex).

The "story" side of the app is a state machine that pulls a random character from the database and populates their data to make a "Choose your own Adventure" style story. The other side of the app is character submission, in which folks can send their characters to the story database, and their character may be randomly pulled from the database!

## Installation options

**Option one:** One-click deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-adventure&utm_source=github&utm_medium=adventure-cs&utm_campaign=devex)

(If you click this button, it will clone this repo to your account, and sets that repo up immediately for deployment on Netlify)

**Option two:** Manual clone

1. Clone this repo: `git clone https://github.com/cassidoo/next-adventure.git`
2. Navigate to the directory and run `npm install` then `npm run dev`
3. Make your changes
4. Connect to [Netlify](https://url.netlify.com/BJVNu53Pv) manually (the `netlify.toml` file is the one you'll need to make sure stays intact to make sure the export is done and pointed to the right stuff)

## Running the application

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

There are fallbacks in place if not, but if you would like to set up your own characters in the story, you'll need to set up your own Hasura database!