snippp.io
Hit me with whatever you think, I really do want this project to push me :)
If you were to add a preview functionality of each component, this would already look A LOT like the Bit platform.
Personally, I've been trying to figure out a way to create a component library where my components are easily shareable and importable, but haven't yet come to a real solution. Bit is a good one but I am not yet ready to pay per component after my 20 free components are used up.
I think this would be actually extremely useful to me personally if you added these two things:
- component live preview (perhaps with mock props/data?)
- a way to store the components in the cloud so that they can be important into any project, where the source of truth is in this cloud platform
In the future, you could add things like:
- component-level testing
- AI features
- version control and PR reviews
- CI integrations / other integrations
It has most of the things you said: Create your own component library, easily share through cloud, import and use them, live view and edit them online at Studio [1]
I'm also working on adding versioning and a NPM package so you can refer to your components with unique IDs and directly use them in your code.
Storing in the cloud to grab them with something like a cli tool is super cool. I have a feature on the mvp+ list to download a list as a library or to fork to github as a lib, just converting it into a folder. But I'm trying not to let scope creep distract me from just making it as easy as possible to grab a quick tool without downloading a whole library, not trying to compete with npm or any other package/version manager.
At present the only AI features I can think could benefit the app are search tools and framework detection, but these can also be improved traditionally without the need for linear algebra or paying for use of any ai api I think.
Basic version control could be cool too! like storing previous versions if a tool was useful to you in different forms
I do overall though feel the goal of this is a little different from the Bit platform, but some lessons could be learned about what people want based on the product's popularity :)
I wanted to ask how you handle language autodetection for snippets.
but tldr I'm using hljs to detect and return a string with the language title, and comparing that key against my array of categories.
I'm not a natural user of this product and have never used any snippet tools, so I'm commenting as an outsider. But I really like several things you've done:
1. Homepage is super clean and easy to navigate, love it
2. Black/white visual style is crisp
3. I like that your components are actual rectangles, no rounded borders or shadows or fades
4. Great ergonomics to copy snipppets: just click on the code
Specific feedback:
1. The progress bar on the copied-to-clipboard popup makes sense from a "when is this thing gonna go away" point of view, but the copy (I suspect) happens instantly and my instinct is "I need to wait for the progress bar to complete" -- so you're sending a mixed message there. That's probably the biggest thing I'd change actually.
2. Your search is a bit bogus. I can relate, having also shipped a demo on HN with a very bogus search. Some tests I did: "void" and "float", which gave me unrelated snippets. Maybe an off-by-one error somewhere?
3. Font weight 100 is really light; it renders as a 1px line width on my 4k laptop screen, which is 0.08mm wide. I can read it, but I wouldn't be able to read it in daylight for example.
4. Your "copy" and "share" buttons have pretty animations that I find endearing and I think you should hate. I struggle with this: I want my things to be distinctive and pretty, and ultimately I just need to hate the fluff and get to the point with my designs. Your "copy this thing" button doesn't need character, it needs purpose -- and those two are very different. (I'm not using strong words because it matters, it's just something I struggled with and framed it this way when I wanted to change my mind. So I'm sharing that with you in case it helps.)
5. Searchable tags if I click on them? Also, "show more" just to get tags seems un-ergonomic -- but I know how it is when you're coding these things.
6. On Firefox, the keyboard shortcuts popup overflows off to the right, so some of them aren't readable.
7. If I were going to use this, I would run it on local k8s; do you have a Docker image?
8. CodeBERT embeddings + vector DB for search?
9. What's your privacy policy?
10. That "about" page ... duuuude ... it feels like you wrote the product, had a few beers, and went "you know what? THIS ONE'S FOR ME". And I fucking love it. It's transparently awful and has a great visual personality. I would totally ship it.
Overall, nice project! It's clear you know what you wanted and had opinions. And I appreciated going through it as a user because I got some valuable perspective on my own project. Hope it goes well for you!
I will add that I wasn't able to navigate to the about page on mobile; the nav should probably allow that.
Otherwise, it's excellent.
But thank you so much!
1: The countdown is definitely something I can adjust so we have some way of letting you know without thinking anything is loading.
2:Search is super bogus right now, what I'd actually love to do is run the search on the database itself but wanted to prioritize speed. Even so, I had not included the code itself as searchable since I thought it may bloat results a bit too much vs only searching for the high level descriptions of what you need to do. I am playing around today with how I can weight and sort so the search is more useful to everyone but may need more data to make it great :)
3: Absolutely agreed, went over the site and pulled the 100s up to 2-300, ty :)
4: hahaha I am struggling to figure out the riddle of the first sentence, but I do agree this was an embellishment. In an app where the goal is efficiency and clarity there is no need for a bell or whistle like that. I do want to give character somehow, without getting in the way. Some way to make it feel snappy without completely stripping it down.
5: Love clickable tags, the tags being in the show more is just a matter of visual clutter. My thinking: Most users will likely not need tags > description, so they are easy to find if you need them but not distracting. Open to other points of view on this
6: oooooo I will do more testing on browserstack
7: I don't have an image atm, but I can put that together :) though aside from consistency and scalability, I don't know how much of a benefit it has as an end user, but I admit I am semi-ignorant to the k8s world
8: This is foreign to me and seems like a decent project to take on, but I can't knock the benefits.
9: I'm working on putting this together for the faq and to display on signup, but more or less never sharing with any third party, I only collect google profile information for sake of creating a user profile on the app, with email to future-proof the accounts system if I decide to expand to something other than google accounts. I'm using a trusted cloud storage provider for data. The app currently only retains some details in local and session storage to smooth out the app's operations, but don't save any cookies on users, that's all on the client side. I do currently use vercel/google analytics so it may be reporting things like location, device, browser, and page visits.
10: Lmao I'll take that compliment, It was for me and I will not be accepting revisions <3
Thank you for all the information! I can use a lot of this to improve experience, and hopefully make this useful to someone :)