Inspiration

I thought it be fun to create a scary story generator to get in the Halloween spirit while improving my skills with nextjs.

What it does

Generates a text and audio story based on a text input or image upload. Theres a attached pomodoro and music player to enjoy the company of the floating ghost.

How we built it

I built it over a few days with prototyping the UI and the functionality seprate then bringing it all together!

  • Next.js: A React framework that is feature-rich and the most popular frontend framework for developing web applications with TypeScript.
  • Tailwind CSS: A CSS framework that provides predefined classes with a utility-first approach.
  • AWS S3: A cloud storage service from Amazon Web Services (AWS) that allows users to store and retrieve data from anywhere.
  • OpenAI SDK: For making API calls and creating content with the power of AI 🤖.

Tools

  • V0: Quickly generate UI with AI to get a prototype up in no time!
  • Vercel: Vercel allows us to host our web applications in just a few clicks.

Challenges we ran into

Time really, October was busy and it was difficult to get the momemntum going but I was able to give one good push and complete the app!

Server function timeout had to be adjusted to allow for the spooky content generation to be created for the image upload.

Accomplishments that we're proud of

Everything about the application has me smiling from ear to ear, it was a challenge and it felt rewarding to see it to the end.

I am seeing a uptick in users by friends sharing the application and getting screenshots backs from some funny storys people are getting back!

What we learned

API Handlers Handling image upload in forms Server Actions S3 with audio files. Vercel Logs

What's next for Spooky

Add better form validation and generate images to go with the scary story.

Built With

Share this project:

Updates