What I built
Supaheroes, an AI-powered platform that generates biographies for characters from games, comics, and movies. Just enter the character's name, and the AI will craft a detailed life story, complete with strengths, weaknesses, and attributes (such as intelligence and agility). Furthermore, the AI provides a prompt for another AI to create three images of the character. This powerful collaboration breathes life into our beloved characters!
Category Submission:
- Best Overall Project
- Most Visually Pleasing
- Most Technical Impressive
- Best Project built using Supabase as the main data provider for the refine app.
- Best Project built using Material UI as the main UI framework for the refine app.
App Link
The application was closed on December 13, 2023.
[Admin/CMS]
[Hotsite]
Use the admin/CMS to register your characters (sign up needed) or use these credentials:
email: demo@demo.com
password: demo1234
After registering your character, view it through the [hotsite].
Screenshots
Admin List
Character Creation
Character editing
Character view
Hotsite char list
Hotsite char details
Description
My idea was much more complex than this, but as the deadline approached, desperation set in, so I made it much simpler. These last 3 days were crucial as I dedicated around 19 hours per day to finish on time. Below, I describe the technologies used.
Supabase:
The name Supaheroes was not only inspired by Supabase but also utilized its database resources. The authentication module provided by the platform was incredibly helpful, as I didn't have to worry much about authentication, sessions, password recovery, and reset. Everything was implemented swiftly due to the platform's offered resources. I also used the storage feature for uploading character images, which was incredibly easy. It was my first time using Supabase, and it turned out to be quite straightforward; their documentation is excellent.
Refine:
With Refine framework, I developed the frontend of the admin panel for character inclusion, editing, and deletion, along with authentication, password recovery, and reset. The process of generating the project bootstrap via the Refine website was excellent and saved me a lot of time. I customized the bootstrap with Vite, MUI, REST API, and custom authentication. At first, the amount of generated boilerplate is overwhelming, but with persistence, testing, and the help of the documentation, I gradually understood how the framework works. Overall, it's astonishing how quickly we can set up an admin panel. I believe I completed the admin panel in 2 days because I spent some time making it visually appealing in the content editions, as the automatically generated fields are useful but don't provide the best UX. It took me a while to grasp resources and data providers, but in the end, everything worked out. I integrated the login with Supabase authentication, including the "Forgot Password" and "Reset Password" features. The character CRUD communicates with an API developed in NestJS.
NestJS:
The entire backend was developed in NestJS, so the admin and hotsite data are generated by this NestJS API. Even though I could have used Supabase's client on the frontend of the admin panel for authentication, I chose to do everything in NestJS for centralized control.
The most challenging part of the backend was generating and testing the prompts for character information. To generate character information, I used the OpenAI API in conjunction with the node package called chatgpt. ChatGpt was quite challenging to work with; many times, it couldn't find the character (actually, it still can't find some, to be honest), and sometimes it provided unnecessary descriptions instead of what I asked for. For generating images, I used the REST API of DreamStudio.ai, which was effortless to use.
Hotsite:
The hotsite for displaying the characters was built using Remix and MUI, with data fed via the API created in NestJS.
MUI:
What can I say about MUI? It's always a pleasure to use. The quality and variety of components are impressive. With very little effort, it's possible to create highly attractive interfaces. I used MUI for the admin panel with Refine and also for the Hotsite to display the characters. All components on the Hotsite interface are from MUI, including the image grid on the Hotsite's home page.
I used AWS, Docker, and Ansible for server deployment.
Link to Source Code
https://github.com/lvisb/versus-heroes
Permissive License
Background (What made you decide to build this particular app? What inspired you?)
While watching a video about superheroes, the idea came to my mind. At first, I envisioned something more complex – an AI-generated system that could compare hero vs. hero, villain vs. villain, and hero vs. villain battles. The AI would give its opinion on who would win based on the characters' attributes, weaknesses, and strengths. However, as time went on, I had to simplify it significantly.
How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)
The Refine was used as the frontend of the admin panel, and it was the easiest part of the process. I quickly went from an empty project to a basic project with almost the CRUD ready. Then, I gradually refined it to match my preferences. I had to learn more about React Query since the framework uses it extensively. I also delved into the mindset of the framework's developers to understand how they approached certain features. I made use of Resources, Data Providers, Hooks, in addition to the base admin panel interface and provided components.
Additional Resources/Info
You can register on the admin to create your characters.
Thank you for the opportunity, it was quite a challenge.
Top comments (8)
Brilliant work Luis. I ran into an issue tho, I accessed the site with my phone and I couldn’t find the create UI
Thank you, Michael.
The two websites are separate, one for character creation, and another for visualization, and at the moment, there are no links connecting them, but you can access them through the links:
Admin/CMS
Website
Oh my bad, I see😃.
Thank you Luis
I cannot log in. Created an account and got confirmation email, clicked the link, logged in, says not valid. Password reset email does not send weirdly.
A video demo would be interesting. And why not host in on a url? The ip address url is very odd, lol.
Since it was for the hackathon, I didn't worry about the domain or TLS, especially because it was delivered last minute and there wasn't enough time for these improvements. The project will be online for only a little while longer.
The IP is directly to your computer? How did you expose it to the internet?
Actually, it's on AWS.
@sarajohn130 thank you for identifying the error, I will investigate.
For now, you can access with these credentials:
login: demo@demo.com
password: demo1234