Avatar Generator is a Next.js application that allows users to create avatar/icon images. This app is originally created by Cody Seibert. I built this app following with his tutorial to learn full stack development with Next.js, TypeScript, tRPC, and Tailwind CSS (using T3 starter), to familiarize myself with modern web development tools and how they work together. The demo of the is hosted on Vercel, however, since it's a free account, the image generation feature will time out since the Dalle api takes a while to generate the image, and the free account has a 5s timeout limit.
- User Authentication: Integration with Google for user authentication / login
- Credit System: Users can purchase credits to create images (Stripe)
- Image Generation: Prompt and form selectoin are combined to generate images using OpenAI's DALL-E model
- Image Collection: Users can view their generated images in a gallery stored in AWS S3
- Community Gallery: Users can view images generated by other users selected randomly
prisma/: Contains the Prisma schema for postgresql database modelpublic/: Stores static files like images and iconssrc/: Contains the frontend and backend code for the applicationcomponents/: Custom frontend React components for the applicationhooks/: Custom React hookspages/: Next.js pages for routingserver/: Server side code for the applicationapi/: Contains the core logic of the API and the processing of data such as credit system and openAI dall-e api calls
I plan to continue working on this project based on the existing functionalities and add more features such as:
- Image modification: Users can modify their own images by uploading an image and providing a prompt to change the image style or content
- Background removal: Users can remove the background of the images so they are transparent
- UI improvements: Improve the UI of the application to make it more user friendly and unique