Motivation

Disclaimer: This intends to be a series of posts describing my journey through this process. This is an academic focus and all of the code is available on GitHub. This doesn't aim to be a step-by-step tutorial. Most of the resources used to build will be shared here.

I decided to start creating a tool that would be useful for me, and hopefully someone else. When I initially jumped into the AI trend and started using a couple of AI-powered chatbots, I thought that, as a Software Engineer, I would know how to ask things properly to a machine: give context, and try to be as explicit as possible. But it turned out that there were some responses that didn’t make any sense at all. Right after that, I realized that Isa Fulford and Andrew Ng decided to launch a free course on prompt engineering. This was enlightening. It’s short and clear, mentioning the main capabilities and the model limitations.

Now that I have a little bit more context over AI tools (in this case GPT) and their limitations, I started using them as “advisors”. Particularly I found it useful for some writing tasks like creating proposals for conferences, spell-checking, translating, and so on.

For testing purposes, I created a simple chatbot where I gave context on the model and what the role should be. By the time I started adding more and more roles and I realized that this could be really helpful for people seeking advice on particular writing tasks.

For that reason, I decided to start working on an academic project to have a GPT-powered advisor for tasks such as reviewing proposals, texts, and more.

I started the project using Next 13 because I’ve heard of many interesting features that I’d love to test such as React server-side components, Edge computing, and more. I started with a tutorial from Fireship.io which I found really cool because the format is short and sweet. Right to the point.

The initial version uses PocketBase for storing, and it’s deployed using Vercel (obviously) and Fly. At this point, I’ve created an ugly notes app with authentication. There is some work missing that I would like to tackle including but not limited to:

• Product: UX
• AI: GPT-integration
• Linter on save
• Auth: the login is in testing mode, so only my Gmail account is authorized to log in. Also, there’s a bug in production for logging in with Google. I’ve researched at a high level without success and will have to dig deeper.
• Styling: I’d love to have better components, think about a library that might not be necessary for now, and change logic to display login/log-out buttons based on the session.
• Environment management: I’d like to setup at least three different environments, production, staging, and local environment. Different databases, keys (OpenAI, GCP OAuth, etc), and so on.
• CI/CD.
• Unit tests.
• Feature flags: to run A/B tests for progressive rollout might be interesting. I’ve experience with LaunchDarkly but I’m excited to explore open source alternatives.

Lessons

• PocketBase it's really cool and fast for prototyping.
• Auth.js rules for authentication in Next Apps.
• Next is amazing and the docs are really clear.
• The create-react-app was deprecated by the React team and Vite is the new kid on the block.

Resources

• NextJS Course: https://fireship.io/courses/nextjs/
• NextJS Docs: https://nextjs.org/
• Next Auth: https://next-auth.js.org/
• Blog how to build a chatbot with OpenAI, NodeJS, and React: https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-openai-chatgpt-nodejs-and-react/
• PocketBase: https://pocketbase.io/

Things that keep me humble

• Googling every 20 minutes when coding.
• Building a Next app so "late".