Ignite

Ignite Your Career 🔥🚀

Comment

Inspiration

This project was heavily inspired by Little Alchemy and Infinite Craft.

What it does

Drag career blocks from the sidebar into the canvas. Drag them into each other for them to combine into more specialized career blocks that share attributes from both the parent elements. Drag a block to the book for a detailed description on what the career is. Extra Q.O.L. features: drag an element to the trash to delete it, click the trash to clear everything, add a custom career block with the input and plus button at the bottom right.

How we built it

We built it using svelte-kit as the framework, Pocket Base as our database backend, PocketHost for hosting the database, the OpenAI API for text generation, and Vercel for hosting the website.

Challenges we ran into

We had many challenges with complicated on hover UI effects that needed to activate through other HTML elements. Additionally, it was a challenge to keep up with all the complexity that we implemented into one single webpage.

Accomplishments that we're proud of

We are proud of fully implementing, polishing, and deploying our idea to the best of our ability.

What we learned

We learned how to stream with the OpenAI API, implementing draggable game-engine-like components from scratch, and work with Pocket Base and Pocket Host. Additionally, it was our first time doing such heavy UI/UX work and we learned a lot about designs/themes.

What's next for Ignite

While I believe Ignite is almost complete I believe there are still more animations we could be able to add. One idea we were toying with but didn't have time to complete was having unique colours for each block and mixing them when 2 blocks combine.

Built With

  • openai
  • pocket-base
  • svelte-kit
  • tailwind-css
  • vercel
Share this project:

Updates