cover image

IntroductionWelcome

4 min read

Hey Folks ๐Ÿ‘‹

It's been a while that I've been working in my free time on that project and there is no perfect timing to show off. So here I am, having no idea what I'm doing right now. ๐Ÿคทโ€โ™‚๏ธ

Inspiration ๐Ÿ’ก

So first of I want to thank all the open source maintainer and everyone who contributes to the community ๐Ÿ‘. This project is heavily inspired by React 2025 made by Lee Robinson and is using a lot of the same technologies. Luckily, in my professional day life, I am also confronted to the same libraries/frameworks so it was even more motivational to work around the tools. Also, I want to give props to feedback.fish from the team around Max Stoiber as I copied some ideas from their tool. Check it out for production ready widgets.

Fast Forward โฉ

The idea is pretty simple. Whenever I want to have a customizable Feedback Widget I need an API endpoint to store my feedback without the pain of having to create that entire ecosystem around. I just want to register/login, create a project and use the projectId to send the feedbacks I collect from my new web app like:

{
  "projectId": "xyz",
  "type": "bug",
  "text": "In line 5, you are missing a semicolon. Otherwise great blog post!.
  "metadata": {
    "lang": "de"
  }
}

I also want to automatically retrieve informations about the

  • Timestamp ๐Ÿ“…
  • Location ๐Ÿ—บ
  • Device Metadata ๐Ÿ“ฑ

from the request so I don't have to worry about it.

And after checking the feedback, it would be good to archive them to keep track of what has been seen and revised or not. So therefore, we have an archive bucket to but old feedbacks in.

To show the demo, you have the possibility to make your project publically available so that you can share the project link and others have access to the feedback.

Even though buttons like "archive" are visible, the functionality is prohibited by the firebase.rules.

If you want to check the rules, open the firebase.rules file from the fast-forward-emulator repository that I am using to test in development environments and deploy afterwards to firebase.

If you are curious about how the Floating Widget on the current page was build with, go check it.

Tech Stack ๐Ÿ“š

If you know the React 2025 tech stack, you might already know most of them. Here a the biggest ones I'm using:

  • next: the hero
  • tailwindcss: the beauty
  • headlessui: the complementary
  • firebase: the hidden
  • md: the creator
  • ... and many more

But the easiest way for the moment would be to deep dive ๐Ÿคฟ into the GitHub Repository.

Deployed on Vercel for perfect DX.

Ideas ๐Ÿ’ก

I wish I could call it roadmap but as I am working fulltime and follow my hobbies / family / friends, let's stick with the wording of ideas that I came with to extend the tool:

  • Invite members ๐Ÿ‘จ to a project: permission based user auth would be good for bigger companies.
  • Add Screenshot ๐Ÿ–ผ to a feedback: especially good if there is a UI bug.
    • Possibility 1: Give access to write to firebase storage throughout own API.
    • Possibility 2: Let the user handle the upload and only send the url to the storage provider (e.g. cloudinary).
  • Publish Widget Package ๐Ÿ“ฆ: for an easy usage of this tool. Use what's there and inject your projectId for even faster configuration.

Any other good Idea I am missing? Please use the Feedback Button to let tell about it or contact me @mxkaske.


Everything starts with an idea. And the foundation is set. Wish me luck ๐Ÿ€ that it won't last as any side projects.