Goodle Forme

Inspiration

Our starting point was how to make a famous service more fun. However, we didn't want to create a completely useless service. After brainstorming various ideas, the first thing we came up with was the “useless box.” This involved pressing a switch to make a hand come out of the box and turn the switch off. Our next idea was Google Gravity. While not practical, it allowed searching itself, and the good point was that users could enjoy it. Based on these two ideas, we conceived a project to improve Google Forms.

Original project: https://docs.google.com/forms/d/e/1FAIpQLScFc9xr3TeueCYRgIbCNblT9BrmAh9ysr1TEFXn2xILUR-W0A/viewform

What it does

Goodle Forme is a project for me. Surveys are conducted in various ways in the world, and Google Forms is well-known as a simple survey tool. But it's not for me. It's for everyone. Goodle forme will not accept any result other than the one it desires. If you input a different result, it will be corrected. By the system itself, like a useless box. As a demo system, we created an evaluation form for Maximally Steal-A-Thon. All forms consist of radio buttons for a 5-point rating scale and text fields for name and comments. Of course, you probably know what kind of ratings we want, the ratings will become the results we desire. (We won't change names, though.) Ratings can be altered in various ways. Sometimes someone's hand changes them; other times, they change due to devilish mischief.

As mentioned in the inspiration section, we had no intention of creating a useless project. We designed it so that the “mechanism” only affects specific input forms. This means the forms can be used normally most of the time, but we can make them produce the desired results only for the important ones.

How we built it

Initially, we focused solely on the frontend without a backend. Building just the frontend was sufficient to explain how this Goodle Forme works. However, things went smoother than expected, so we added a backend and made it possible to toggle the form's functionality on and off with a switch.

We used Next.js for the frontend and implemented the backend by mounting Hono within Next.js API Routes. Furthermore, we ensure type-safe communication between the frontend and backend using Hono RPC. Both the frontend and backend utilize Zod for validation, ensuring attention to security.

Challenges we ran into

Given the short timeframe of the hackathon, we constantly had to consider implementation costs. Even the database, which we usually write with a bit more scalability in mind, was tailored to fit this specific specification perfectly. The biggest issue was that deployment didn't go smoothly. We tried deploying once we had a certain level of functionality, but it just wouldn't work properly. To pinpoint the cause, we checked logs in various places. Even when we knew where the problem was, there were many instances where we didn't know how to fix it.

Accomplishments that we're proud of

As I've written many times before, our achievement was creating a project for me. In this project, whenever you have something you want someone to evaluate, using this will guarantee you get the best possible evaluation. It's extremely versatile, and by designing the form appropriately, you can always ensure the other party attends or provide the data you intend.

What we learned

Creating a simple form isn't difficult, but connecting it to the backend is a bit of a hassle. Furthermore, developing within limited resources (a short timeframe) means that if we hit a roadblock somewhere, it becomes extremely stressful. We had to fight the anxiety of whether I could actually finish it.

What's next for Goodle Forme

I'd like to incorporate more patterns and randomness. Also, since this was a minimal development effort, I haven't focused on the database or format, but I want to create a more scalable system where any user can design any form. Additionally, I want to implement functionality that positively corrects text entered into a text form if it is a negative statement.

Built With

• drizzle
• hono
• motion
• next.js
• supabase
• tailwindcss
• vercel
• zod