Skip to content

A work-in-progress side project for me to learn full-stack web development.

Notifications You must be signed in to change notification settings

nadiaenh/charanari

Repository files navigation

✨ CharaNari (currently offline) ✨

https://www.charanari.me/

Create a cute fantasy character!

📝 App

Created with create-t3-app and deployed using Vercel with T3.

npm install            # install dependencies
npm run dev            # start the server locally
npm run build          # build the app for production (type safety errors)
git push origin main   # deploy to Vercel
Components diagram ![diagram](https://github.com/nadiaenh/supabase-game/blob/main/public/components_diagram.png)

🎀 Frontend

Tailwind CSS with Next.js and zod to validate inputs.

./public               # static files (images, etc.)
./src/pages/           # website pages (each .tsx file becomes a route)
./src/styles/          # CSS stylesheets
./src/components/      # React UI components

🎨 Design and Assets

Figma
Procreate for Pixel Art
Dribble
RealtimeColours
Pixel to SVG

anything-v3-better-vae for generating character images.
real-esrgan for upscaling low quality images.
RunwayML for expanding cropped or incomplete images.

⚙️ Backend

TypeScript and tRPC.

./src/env.mjs          # environment variables
./src/server/api/      # tRPC API routers and procedures 

🗄️ Database

Prisma ORM with Supabase.

./prisma/schema.prisma  # contains all the database schemas.  
./prisma/seed.ts        # contains the data to populate the tables with.

npm run db              # whenever I update database schema.  
npx prisma studio       # to edit data in a nice UI.   
npx prisma db seed      # to populate the tables with starter data

📓 Progress journal

August 21 to 27:

  • Create Race etc. schemas and get form options from there
  • Update the UI with Tailwind components or ShadcnUI
  • Make SelectRace actually update the state - see how test.tsx implements SubmitButton
  • Set up basic OpenAI image generation
  • Fixed npm run build type safety errors (fixed some and turned off checking for others)
  • Character avatars now get saved to Supabase storage when a character is created
  • Switched over to ReplicateAI instead of OpenAI

August 28 to September 3:

  • Add more form fields + update database schema accordingly
  • Improve the UI
  • Set up (temporary?) domain name https://www.charanari.me/
  • Add images for character race selection
  • Set up Clerk authentication rolled this back for now due to issues
  • Create horizontal visual selector component
  • Prompt engineering for character images
  • Set up getCharacterById -> display it in page
  • Enable basic dark mode

September 4 to 10:

  • Have different pages for home, character creation, and character profile
  • Set up home page

October 9 to 15:

  • Store image permanent URLs in the database instead of the file path
  • Display character image when a new character is created

About

A work-in-progress side project for me to learn full-stack web development.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published