HobbyBot, the AI powered app to find you you'r next hobby!

Have you ever found yourself feeling bored or uninspired, unsure of what hobbies to pursue in your free time? If so, you're not alone. That's why I created a hobby idea generator app, using a variety of cutting-edge technologies to make it happen.

The Technologies

First, let's talk about the technologies I used to build this app. I started with Next.js, the popular React framework that's great for building server-side rendered web apps. I also used Tailwind CSS, a utility-first CSS framework that makes it easy to style your app without writing a lot of custom CSS.

For backend, I used Prisma and Supabase. Prisma is an ORM that allows you to interact with your database in a type-safe way, and Supabase is a backend-as-a-service platform that provides everything from authentication to database management. Together, they made it easy to build a robust backend for my app.

To ensure end-to-end type safety and seamless data communication, I decided to use tRPC and react-query. tRPC is a TypeScript-first RPC framework that makes it easy to define endpoints and types for your API. react-query is a library for managing remote data in React, which also provides tools to keep your application cache up to date.

Finally, I used OpenAI API to generate hobby ideas based on user input. OpenAI API provides a state-of-the-art language model that can generate natural language responses to prompts.

The App

The app began simple in its functionality, but complex in its underlying architecture. When a user visits the site, they're presented with a series of questions generated by ChatGPT. These questions are designed to help the app understand the user's interests and preferences.

Once the user has answered all the questions, the app sends the responses to the OpenAI API, which generates a list of hobby ideas based on the user's input. These hobby ideas where then presented to the user.

In the second iteration I decided to add user authentication so I could save the hobbies each user generates and display them in one place. I added the abbility to login using google, and using Next-Auth i can then have user sessions and user tables in postgresSQL tables using Supabase.

A user can also decide to delete hobby ideas if they don't fit with what he is looking for.

Challenges

One of the biggest challenges I faced when building this app was migrating from Next 13 back to Next 12 and implementing the "t3-stack"

Another challenge was designing the user interface in a way that was intuitive, easy to use and pretty. I wanted to make sure that users could quickly understand how to use the app and get meaningful results. I kept the colors pretty simple and used midjourney to create the logo for the app.

Conclusions

Overall, I'm really happy with how this app turned out. It's a great example of how you can use modern web technologies to solve real-world problems. With the help of tools like Next.js, Prisma, Supabase, tRPC, react-query, and OpenAI API, it's possible to build complex, dynamic web apps that are both powerful and user-friendly.

Of course, there's always room for improvement, and I'm sure I'll continue to refine and enhance this app over time. But for now, I'm excited to share it with the world and see how people use it to discover new hobbies and interests.