Inspiration

Our team was discussing how an AI model can be used in a shopping scenario, and we used the movie theme of SparkHacks 2026 to inspire what the shopping website would promote. One of the members also mentioned how difficult it is to find certain cosplays for niche characters, which led us to come up with a platform that makes finding such items much easier.

What it does

This website can narrow down the catalog of items using the built-in AI tool and find the most significant listing for the user. We used OpenAI for the model and designed a website which can list anything from movie gear to actual auditions of the users

How we built it

We split the tasks of building the project amongst the three members: Front-end and UX, Back-end and AI integration, and data management with SQL and our database layer. The site was built with Typescript, Next.js, React, Tailwind, and several supporting libraries for state management, validation, and UI components, along with a PostgreSQL database and AI APIs for the recommendation logic/engine.

Challenges we ran into

The AI model initially consumed/used heavy resources for each prompt. We solved this by using the cache and a connected database to reuse previously generated answers so as to not repeat the same executions, along with a few constant prompts that produce constant answers. Another challenge was figuring out how to do simple web animations as a user scrolls down the page. We learned that other sites tend to import multiple frames of the animation and load each one as the user scrolls. We used framer-motion’s API to define animations. If help was needed in a certain section, we worked together to troubleshoot and get the site working

Accomplishments that we're proud of

A working AI model implementation that efficiently searches our catalog for the item a customer is thinking about. Smooth page transitions, clean presentation of products, and a polished marketspace were achievable thanks to the delegation of tasks. We were excited to see our project from conception to application

What we learned

We learned how to implement an AI model within a website and how to code and stylize a structured website. We also learned the quirks of website development and database handling. Troubleshooting had enhanced our grasp of what we produced and deepened our knowledge on AI, websites, and databases.

What's next for StageCraft

Our next step for StageCraft is to bring in affiliate sponsors to post their products on our website and populate it with a more diversified catalog. We would love to enhance the user experience even more by adding more subpages and maybe even creating a social chatting logic within the site itself. This allows users to engage with the website for longer and boost views for sponsored advertisements, increasing revenue for all parties involved

Built With

Share this project:

Updates