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).
- Possibility 1: Give access to write to firebase storage throughout own
- 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.