Mythroller is an NPC generator using OpenAI to create fictional characters for use in tabletop roleplaying games.
I built this as a way to teach myself Next.JS and how to architect a more fully-featured "app" or "product" on the web.
Some neat features:
- You can log in to save characters, your characters are stored in a DB.
- Characters can be edited, deleted, rerolled, or shared.
- You can create a character without logging in, and that character will be associated with your account after you log in.
The Stack
- Next.JS 13 App Router
- NextAuth
- Prisma
- Planetscale
- Cloudinary
- OpenAI Completions
- DALL-E
- Vercel AI SDK
- Tailwind
- React Three Fiber
-
Mobile UI (sidebar needs to toggle) -
Make Auth actually protect characters that aren't yours-
You shouldn't be able to edit a character that isn't yours
-
-
You should be able to create a character without a login, and then associate that character with your login (no idea how to do this) edit: its done
-
Sort out prompts, add examples, tune them
- Sometimes it gets jacked and starts generating the whole character when I just ask for the name (rarely).
- Sometimes it adds punctuation where I don't want it to.
- Consider adding "Occupation" to the character
- It's default generations kind of suck sometimes. It gives the same names over and over again. Don't know how I would influence or fix this.
-
Images need to actually get stored somewhere, unfortunately -
Character name should fill in in the sidebar when character is being generated
- This works now after reviewing this SO question
- Could move prompt generation to the client side?
- Could be cool to do opengraph images: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
- You should be able to fork a character to make it become yours
- I'm using a mix of query parameters and POST body data to move data around from the frontend to the API. Should I care? Does it matter?