✨ 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


🎀 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