You are browsing as a guest. Sign up (or log in) to start making projects!

askHeros

  • 1 Devlogs
  • 5 Total hours

A web app where you choose a superhero persona and ask any question, the AI answers in that hero's unique voice and teaching style. Built with Node.js, Express, and a custom persona-based prompt architecture.

Ship #1 Changes requested

I made a web app called askHeros!

One of the biggest challenges was finding a good API to use. A big shoutout to the people in the Hack Club Slack who told me about the Hack Club AI API, that helped me a lot.

Another challenge was understanding how the , frontend and backend communicate with each other. This was actually my first time working with that, so figuring out how a request goes from the frontend to the backend and then comes back with a response was a really good learning experience.

One small thing to keep in mind: askHeros might not be as fast as AI tools like GPT or Claude. It can take a few extra seconds to think and generate the response, so if it doesn’t answer immediately, just wait a few seconds!

That’s pretty much it. Hope you enjoy trying it out!

  • 1 devlog
  • 5h
Try project → See source code →
Open comments for this post

5h 12m 20s logged

Day 1: Built askHeros from scratch
Today I finished building my first version of askHeros end-to-end!The idea is pretty simple: you choose a superhero, ask them a question, and they explain it in their own way. I wanted each hero to actually feel different, so instead of just changing a few words in the prompt, I made a proper persona system using structured config data for each hero’s personality, voice, and teaching style.On the backend, I set up Node.js + Express and connected it to the Hack Club AI API. Then I built the frontend with a landing page, superhero selection cards, a question box, and an answer screen. I went with a dark comic-book style and gave each hero their own glow color.I also added loading and error states, entrance animations, and made the site responsive so it works on mobile too.After getting everything working locally, I deployed the app on Render and pushed the project to GitHub.Things that went wrongThe biggest challenge was honestly debugging tiny mistakes. Things like missing quotes or using the wrong variable name could completely break something, and sometimes the error wasn’t immediately obvious.I also accidentally exposed my API key while working on the project. GitHub’s secret scanning caught it before it could become a bigger problem, which was a really useful lesson. I learned why environment variables, .env files, and .gitignore are so important when building projects with APIs.Overall, this was a really fun first day. I learned way more by actually building and breaking things than I expected.

0
0
28

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…