The "Pre-Social" Energy Calculator

What Inspired Me

The inspiration for the "Pre-Social" Energy Calculator came from a deeply familiar and universal feeling: the quiet, internal debate on a Friday night. It's the conflict between the fear of missing out (FOMO) and the profound joy of missing out (JOMO). So many times, I've found myself weighing the effort of getting ready and socializing against the siren call of the couch, a good comic book, and my favorite sweatpants.

I realized this decision-making process is often loaded with guilt. You feel like you should want to go out, even when your entire being is craving a quiet night in. I wanted to create a tool that could externalize that internal monologue, transforming it from a source of anxiety into a moment of fun, self-reflection. The goal was to build something that didn't just give you an answer, but gave you permission a humorous, guilt-free verdict that validates your true feelings.

What I Learned

This project was a fantastic lesson in the power of refined simplicity.

1. Minimalism Isn't Emptiness: My initial concept was extremely minimal. Through the design process, I learned that a clean aesthetic doesn't have to be sterile. Adding subtle details like soft shadows and satisfying micro-interactions can make a minimal design feel rich, tangible, and delightful without adding clutter.
2. The Logic Beneath the Fun: A simple quiz is fun once, but a clever quiz is fun many times. I learned that the user experience could be dramatically deepened by evolving the backend logic. Moving from a simple random selection to a category-balanced algorithm ensures each quiz feels well-rounded. Adding a "conviction bonus" was a key insight, it rewards the user's strong feelings, making the final score feel more personal and insightful.
3. Content is King: A tool like this lives or dies by its content. I learned that replayability is directly tied to the depth and variety of the question pool. Simply having "a lot" of questions wasn't enough; they each needed to be unique, relatable, and match the app's specific witty tone.

How I Built It

From the ground up, this project was designed as a modern, lightweight, and entirely client-side web application. This means it's incredibly fast, requires no backend server or database, and respects user privacy because no data ever leaves the browser.

The technical stack was chosen specifically to facilitate the "soft and rich minimalism" aesthetic and the complex interactive logic:

• Framework: React
• Language: TypeScript
• Styling: Tailwind CSS
• Animation: To achieve the fluid, delightful animations for the battery graphic, I used Framer Motion. It integrated seamlessly with React and made it straightforward to choreograph the complex sequence of the battery filling up, changing color, and then draining down to reveal the final score.

Challenges I Faced

1. Balancing the Scoring: The biggest challenge was the scoring logic. A simple averaging of 1-3 values felt too linear and predictable. Developing the "conviction bonus" where answering consistently within a category slightly weights the score--was the solution. It was challenging to tune this bonus so that it felt impactful but didn't wildly skew the results. It required a bit of pre-dev testing to get the math to feel right.
2. Content Generation at Scale: Writing the first 20-30 questions was easy. Writing over 100 of them was a significant creative hurdle. The challenge was to maintain quality, humor, and relatability without repeating concepts. I had to systemize the process by creating distinct categories and then brainstorming many different angles for each, from the physical to the financial to the deeply social.
3. Perfecting the Reveal: The animation of the battery filling up and then draining to the final score is the app's most important moment. Choreographing this sequence to feel satisfying—not too fast, not too slow, with the color changes timed perfectly was a challenge that required fine-tuning timing and easing curves until it felt just right.

Built With

• bolt.new
• css
• html
• javascript
• typescript