ChaoticCoach

Inspiration

I wanted to create something that was both practical and chaotic enough to be humorous at the Stupid Hackathon. Everyone needs advice occasionally, but sometimes you simply need a dramatic, insane roast to wake you up, and other times you want calm, constructive guidance.

Why not create an AI life counselor with trust difficulties, I reasoned? Dramatic chaos Goblin energy is produced on one side, while soft therapist energy is produced on the other. Thus, ChaotiCoach came into being.

What it does

You simultaneously receive two kinds of AI-generated advice via ChaotiCoach: ✏ Calm Mode Therapist-style guidance that is gentle and encouraging and assures you that everything will be alright. ✏ Chaos Mode sarcastic, disorganized, extravagant advice that makes light of your circumstances while remaining humorous, safe, and amiable. Simply write an issue (or select one of the pre-programmed questions), click Get Advice, and both viewpoints are displayed side by side right away.

How we built it

During the hackathon, ChaotiCoach was fully constructed using: Tailwind CSS + HTML for a clear, fluid user interface Frontend logic with JavaScript Vercel Serverless serves as a safe backend. OpenAI GPT-4o-mini to produce advise that is both calm and chaotic Environmental factors to protect the API key Vercel and GitHub for deployment and version control

To safely contact the OpenAI API without disclosing my key on the frontend, I utilized a serverless API route (/api/advise.js). Two distinct prompts, one for calm and one for turmoil, are sent to the model via the function, which then delivers both answers to the user interface.

Challenges we ran

For a project as "simple," I encountered more difficulties than anticipated:

1. API calls were banned by the browser Initially, I attempted to contact OpenAI directly via the frontend. I had to create a serverless backend function because the browser denied the request (for security reasons).
2. Errors with Vercel deployment I encountered a number of runtime problems with Vercel, such as missing runtime versions and out-of-date configurations. In the end, I was able to fix the issue by deleting vercel.json and allowing Vercel to automatically identify the Node runtime.
3. The OpenAI answer format was modified. Undefined outputs resulted from OpenAI starting to return stuff in a new array-based structure. I have to create a unique parser that can handle various response forms.
4. Confusion over environmental variables The function was unable to read my key since I unintentionally typed the incorrect environment variable name in Vercel. Everything eventually worked when this was fixed.

Accomplishments that we're proud of

During the hackathon, a fully functional AI application was developed, from concept to user interface to backend to deployment. Vercel and contemporary serverless runtimes have resolved significant deployment issues. Handled new OpenAI answer types with success, developing a unique parser that functions with various output structures. Used Tailwind CSS to create a simple, elegant user interface that is enjoyable to use. Produced a project that perfectly fits the chaotic mood of the hackathon and is both amusing and useful. I debugged the frontend, backend, API calls, and environment variables of the full-stack pipeline by myself. Deployed the application live with version control on GitHub, automated redeployments, and safe handling of API keys. Gave an original take on an AI advisor by presenting two opposing personalities side by side.

What we learned

How to use Vercel to create and implement a serverless backend How to use environment variables to safely manage API keys How to examine Vercel build logs and troubleshoot unsuccessful deployments How to deal with various OpenAI response formats How to organize a modest full-stack project from start to finish That substantial debugging is required for even the most absurd ideas

What's next for ChaoticCoach

Additional modes: corporate email, Shakespeare, Gen-Z, and motivational Advice cards that can be shared on social media A button that rattles the screen and says "Summon The Chaos" Voice output for additional drama When Chaos Mode is particularly hot, mobile vibration

Built With

• api
• apis
• deployment
• fetch
• github
• gpt-4o-mini
• html5:
• javascript
• node.js
• openai
• serverless
• tailwindcss:
• vercel