Gobblin'

Devlog 13
I completed the final touch-ups. I added credits for the sound effects in the About page and changed the mini icon to the Gobblin’ G.
Current state: Ready to ship!! 🙌🙌🔥

Devlog 12
For the AI picks page, I was using a personal API created on openrouter. So, I made a system for the API when the project becomes live. Gobblin’ essentially uses localStorage to store your API in the browser. The user has to simply create an API key once, paste into Gobblin’ and the user can freely use the AI picks page.
Current state: Last few touch ups remaining, will ship soon 👍

Devlog 11
I was checking all the moods pages for each feature and I noticed that bigger words like Quesadilla and Okonomiyaki were not appearing in the spin wheel. Those sections were empty and I fixed that bug.
I then proceeded to work on the last page - “About”. It is almost complete.
I also added a copyright tag at the bottom and made it as a universal component, so it is present in all pages.
Current state: No more pending pages to build 🥳🙌

Devlog 10
I completed the work on ‘Bracket’ page. Just slight upgrades like neon effects, sound effects,etc.
I also added a trophy svg in the final selected dish, ran into a few problems initially but it looks good now.
There is only 1 page left to make - the “About” page, where it will act as a instruction guide on how to use the webapp and also lists credits (for sound effects, etc.)
Current state: WOOO 10th devlog 🔥🔥

Devlog 9
Today, I worked on the “AI Picks” page. I only made subtle changes, like making the text more visible and stylish. I also gave the final result box a neon effect and a sound effect.
Also, when the number of prompts remaining becomes 1/5, the counter turns red.
I started the work on “Bracket” page as well, but it needs more work before being documented.
Current state: Woahh, AI picks is actually suggesting some good dishes 🤤

Devlog 8
(Note: This devlog covers 2 days’ work.)
After finishing the home page’s redesign, I moved on to working on the “Swipe Cards” page and the “Spin Wheel” page. I added neon effects and changed the design of the wheel as well, so that the text in the wheel is actually readable.
I also added sound effects, so it plays when the user hovers over a box, when the user clicks on the box, when the user swipes a card, when the user spins the wheel and when the final dish is presented.
The sound effects can be toggled on and off with a button in the top right corner.
Current state: Almost done 👍

Devlog 7
I made a lot of changes to the entire look of the home page.
I designed the logo in Affinity, and other food related icons are generated by AI. I also added a “Pick Mood” button in the home page, it hides/shows the mood row.
I also made an “About” button that will redirect to /about, and that page will have a short introduction about Gobblin’ and explain how to use each feature in the home page.
Current state: It looks so coool !!!! 😎😭

Devlog 6
Today, I added the final feature - AI Picks.
So it is like a chatbot, but based on your prompt it recommends any dish (not just the 30 dishes within Gobblin’) in a card-like format as shown in the screenshot below.
The user is given a limit of 5 prompts per day.
Current state: features done, now time to work on UI ☕🎊💪

Devlog 5
So I added the next feature - a tournament bracket style decider.
The user is offered two choices initially, where they can choose a particular mood from the home page and then get random dishes OR randomly get 8 dishes from all the moods. The user can then play the bracket and decide on the final dish.
Current state: Everything is working perfectly so far 🙂🙏

Devlog 4

Since the cards feature works, I went ahead and made the next feature.
SPIN WHEEL!!!
Click on spin, the wheel spins and it randomly selects a dish.
Current state: Spinning 😃

Devlog 3

It works 🔥😭
I installed motion and used import { motion } from ‘motion/react’; instead of import { motion } from ‘framer-motion’; and everything works perfectly.
This is also the first devlog with a demo video attached.
Current State: Success 😎😎

Devlog 2

In Devlog 1, I mentioned that the elements were static and not responsive, and the problem was with framer-motion. For reasons that I don’t fully understand, framer-motion just refuses to work at all.
I also tried using plain css animations, and that worked but it is not ideal for scaling or for future developments.
Current state: Will conquer framer-motion very soon, but the code is still very much broken.

Devlog 1
Started the project today. Project setup was done using npm and is running on Next.js.
Made the first version of the entry screen, and the swiping cards screen.
Swiping cards - you swipe different dishes left and right and then finally decide on one.
Current status: Looks cool, but is slightly broken 🥲

Will make it functional first and then make it look even cooler with icons and better color pallete,etc.