Ask HN: What tech stack would you use to build an open-source Google Keep clone?

190 points by mud_dauber ↗ HN
I'm sick of waiting for Google's Keep team to improve their app, or even to respond to feature requests. (Crickets.)

So I'm going to attempt to build my own - despite being a real noob when it comes to JS-based tech stacks. What would you use as a starting point for a tech stack, if you want:

- public/private/sharable card options - import/export to a couple of mainstream alternate formats - reasonable response times - an improvement over downloading the entire DB upon page load - markdown-capable cards - sort/filter/tag options

I'm assuming this is going to be some flavor of Angular/Vue/React. Suggestions?

127 comments

[ 3.7 ms ] story [ 234 ms ] thread
The one that you're most productive in.
That's Rails. Which I love - but I have my doubts.
If you're goal is to get the app done and published rather than learning a new tech then go with your default stack. I've never worked with Rails but it seems like a totally valid choice for the product. You can always bolt on a more modern frontend later if you need it.
Thanks. It's Rails' frontend performance stigma that made me hesitate. I suppose bolting a better FE is an option, but I won't know it until I benchmark it.
I'm a rails dev too, last year I was making a mobile web app where I was concerned about frontend, so I started making a SPA in mithril.js and using Rails as the API.

Later I abandoned the SPA and went back to rails views, using turbolinks to make it fast. In reality rails + turbolinks is fast enough for most cases, and then I can sprinkle in extra javascript or use SPA on one or two pages as needed.

The reason I think it's almost better to avoid SPA + API approach is to keep the codebase simple and easier for one person to maintain.

https://www.youtube.com/watch?v=SWEts0rlezA http://masilotti.com/beermenus-and-turbolinks/

I’ve been going through the same thought process on a similar project in Django. Every way I look at it, the SPA route is slower and far more complicated.

I don’t know much about Rails’ perf, but by and large “SPAs are faster” only seems to hold up if you’re only measuring actions after the first page load AND your pages are very dense with heavy assets.

As others have pointed out the SPA route can introduce a huge amount of complexity. If you're a Rails dev one option worth exploring might be Phoenix + the upcoming LiveView feature.
Take a look at Riot.js or Mithril.js if you want something much simpler and easier to pickup quickly. Another great option might be Svelte & Sapper (Sapper is for Svelte like Next.js is for React)

Try focusing on finding ES6 approaches and that'll help keep your code simple also.

You can roll out your own app using a frontend framework together with a backend one - like Node, PHP, .NET, etc. Using something like Firebase, a backend framework becomes less relevant - but some of those features you listed are deceptively complex. My suggestion would be to pick up Angular or VueJS together with Firebase. React can be tricky if you're starting out.
Any Js framework will work, also vanilla js will work.

Just pick a framework that you want to learn and do this project on this framework. Also if you want to learn vanilla js, pick vanilla js.

And for the backend side, same story, pick whatever framework and language you prefer. Superior framework at the scale of a side project doesn't exist. And personally I would pick vanilla js with Django because that is the stack I know the best

As far as your backend design goes it really depends on your scaling needs and how much of a purist you want to be about keeping your dependencies open source. If I was just trying to scratch a personal itch I would write it as a Typescript w/ Apollo GraphQL hooked up to a managed Postgres and running on a serverless platform like AWS Lambda. I’d probably write the frontend in React with some kind of state management library.
React Native gets you the most platforms for the least effort (web, mobile, windows, macos). React PWA if you don't care about being on the app store.
At its core, Google Keep is a relatively simple web app. Especially for a low traffic scenario, literally any web framework/library and combination will be good enough. You need storage, a backend, and a front end, either all from the same package or talking to each other.

I suggest you figure out what looks interesting to learn and go with it. You can also “outsource” parts e.g. getting storage and backend as a service from something like Firebase, so you can focus only on building the front end.

If you want people to keep their notes in it, it's going to have to advertise stability and longevity. Ruthlessly cut dependencies/requirements and avoid using features that may change under you as time goes on. Use a simple data-store built with common tech (json, sqlite, straight text files, etc) so people can get to their data even if your code disappears off the face of the Earth one day.

For the frontend, then, we're talking tables and forms. Really simple lowest-common-denominator stuff. Design the API before touching any of the code - that's the only place where "without pulling the entire DB at page load" can happen. Build the backend in something with a safe, stable standard lib or core ecosystem, python or common lisp or the like.

Of course, those are ultimately stretch goals. Like another commenter here said, use whatever you're most comfortable with. On the vast majority of software projects the biggest obstacle is the programmer. I can't really help there because I don't know what you're familiar with. Sorry. Good luck.

You sound like you're describing https://standardnotes.org/ !

(Not linked, just a happy paying user)

Off topic, but it's humorous to me that the "Web" logo is simply the Chromium logo.
Arguably more depressing than humorous!

I do like that there is a "download" page for the web version though, which "downloads" a 301 redirect.

I see that on Reddit also. When viewing their site from a phone, a pop-up says "view on our app? [Reddit Logo] View on web? [Chromium logo]"

Silly goose, I'm never leaving Firefox.

For me it shows the [Reddit logo] and [Safari logo], since I'm on IOs. So it seems like it pulls the standard browser...
> standard browser

Why would Chromium be the standard browser for Android? I have never had that installed on my phone.

Edit: Yes I know Google develops the Chrome products. Down-voting my post without discussion is pretty useless, no?

Because it is the standard browser that comes with OEM Android. Google phone, Google browser.
Is that true? I've always seem Chrome but never Chromium.
Maybe the reddit popup just pick a ‚standardish‘ browser depending on the OS. I only have Safari on my phone...
(comment deleted)
Is it completely open source + optional paid hosting (I spent a few minutes reading but wasn't sure.)

FWIW: Open Source client + server with optional paid hosting is my favourite. And it is not just words: I've been paying a few hosting services, both commercial and open source, for a few years.

I like the assurance of open source but I often prefer to pay the people who make it to host it.

A bit OT, but honest question: would it bother you if it was almost-open-source, that is, if license forbid leechers (other cloud providers selling competitive offering)?

I am thinking of releasing a product under Apache + Common Clause, Zero License, Business Source License or similar, maybe with GPL timebomb. Basically, feel free to use, improve and share, but don't sell or offer it as a service to 3rd parties. I would love it if normal users could safely use the product and share improvements, but would still like to have a chance at building a business model which didn’t involve donations or selling just support (I want to be incentivized to build a great UX). Which means I am selling convenience, and probably can't compete with others if they can offer the same without the cost of development.

Since you sound like exactly the target audience, would such a license appeal to you, or would you reject it up-front?

I use StandardNotes and the Open Source aspect attracted me. I can run the parts if the company goes away. Today, I’ll pay SN a reasonable fee for convenience and future additions.

The competition is Evernote if the software isn’t free. I feel like SN seeks convenience now. Licensing games are just another commercial competitor.

That's still completely opensource to me. It's just not Libre software as Richard Stallman would put it. I still think it's an attractive option for a lot of software and wouldn't deteur many users, as most people wouldn't even think of reselling it.
No the OP, but as someone who is happy to pay for hosting, with free software, I would not be happy at all with your suggestion. In fact the original topic is really the reason I would not be happy. The original poster is asking how to build a new service since their service provider has become unresponsive. This is really the last straw. Ideally, as a consumer, you want to be able to potentially move to a new provider of the service using the same software. If you have to change software to change providers, then you are always having problems trying to get matching features, matching workflows, matching data stores, etc, etc. Interestingly, this is also why I don't generally use "open core" unless I only use the "open core" part and pay for hosting. Having the source code is useless because if the user wanted to host their own, they could use free software to begin with. They want hosting.

I think as a service provider, you have to think pretty hard about the service you are providing. Having a cloud based server and keeping it up is pretty basic work. This is exactly why SaaS is so popular -- the actual day to day service is extremely small and cheap. The problem, as you very correctly perceive, is that larger providers can undercut you, very, very easily (because you are buying the actual service from them). They can cut out the middle man.

So for a full free software service, you need to provide something other than hosting as the service. To be honest, one of the really attractive things about SaaS is that you go back to a model where you have an upfront, single time development cost for the software and then you sell it over and over and over again. In other words, you have a constant price with near infinite scaling.

I think this is impossible with free software. I might be wrong, but I've thought through it for a number of decades and I can't see a way to do it :-). With free software (that has no intrinsic hardware or extensive person-oriented service involved) I think you have to charge for actual development time. I think there are inventive ways to do this (many of which have not been tried), but there is no way around it.

I think what you are intending to offer has very little benefit for the user. Certainly, as someone who wants source code, I would not touch something with that license with a ten foot pole. If I were you, I would just go with SaaS or Open Core and be done with it. If you are really intent on providing useful source code for the user, then I think you have to come up with something that they want to buy. That thing has to be something that other people will have trouble competing against. For most programmers, that means development services.

Thank you (and siblings) for an answer! I especially appreciate the reasons given.

You are of course correct - requesting a commercial license for any potential competitor will limit users' options with respect to the provider they choose. It does however grant them the option to self-host. While not that convenient, it still provides some incentive for me to try better, and is a backup plan for users if I become unresponsive. Better for users (and safer for me) than Open Core I think?

That said, the decision is not final yet, and I'm also not satisfied with any license I checked (closest is Common Clause, but what happens with snippets of code, reused in other, maybe foss projects?). Thank you!

Just to be clear (without being annoying I hope), there will be a class of users (myself included) who won't touch it. I would consider it a proprietary license. It isn't a kind of open source compromise. Having said that, there are a lot of considerably worse proprietary licenses. Good luck on your endeavours!
(comment deleted)
Yes, it is clear, and I appreciate your thoughts a lot! I am just hoping that this class of users is in minority... ;) Good luck to you too, and thank you!
I’ve been using standard notes and the client isn’t great. It makes me choose between editor addons when what I want is just one really good editor.

Example: I want features found in the advanced editor but also in the markdown editor

Yeah, that's fair. I would mention that to them - they are responsive to feedback when it doesn't conflict with the longevity and stability requirements.
Futter for Android/iOS and any JS stack for web

And use Firebase or Firestore as the database. It's super easy to build a simple MVP app with just Firebase SDKs

I use Keep Notes on Android for shopping lists and while the UI is sleek and animated, the lag is intolerable. Thanks for reminding me that I can simply switch to another app.
So for something like this I would go Mobile first and I would use this new open source technology from Google called Flutter, you can avoid JavaScript all together and go with Dart, even if you’ve never used it it’s incredily easy to learn. In my opinion is far superior technology to react native. You could get out a cross platform app with some of the basic things you describe in a few weeks.

I would use AWS Lambda or Azure functions for the entire backend for something like this. You could make it incredibly scalable and do it incredibly fast. Both AWS and Azure have great managed Document database you could use to power the features you mentioned. It has never been easier than it is right now to build some incredibly things.

Shameless plug, this is exactly what I did with a recent app I built that can take any article and convert it to Audio. Check it out https://Articulu.com got it out for iOS and Android incredibly fast.

I indirectly contribute to Flutter (via one of their dependencies), but I would still say to make a web app first, so you can always access your app from a desktop.
Nice, thanks for contributing it’s the most promising cross platform app development I’ve seen so far.

I think it’s fine for us to disagree on Mobile vs Web. But I think depends on what his goals are, in my opinion these days Desktop isn’t the main use for apps like this. He could always add that kind of support later.

(comment deleted)
A notes app where you are forced to type notes on a touch "keyboard" always discourages me from making any notes.

Having it on the phone is nice, but it has to let me type in my notes at ~100wpm as well ;-)

(Of course, to each their own)

This is interesting. How long did it take you to do this? Do you manually curate the articles in the app or are they randomly pulled from the web?
When I became unhappy with Google Keep I switched to Nextcloud Notes.

It arguably has some downsides compared to Keep, however it suits my needs and as a plus it supports markdown formatting.

Additionally it's open source, so you might get some insights into which thoughts went into it, which might help when designing your own solution.

What are NextCloud Notes' downsides, in your opinion?
One thing is that you can put one note only into 1 category. There is no "tag" system that allows multiple tags per note.

It also only supports text notes, so if you use drawings, etc in Keep a lot that might be a problem.

What I really like about it though is its simplicity and that I can easily run my own instance (of Nextcloud which I use anyways).

NodeJS + ReactJS +or Vue with Apollo or Rest and Express and MongoJS

All JS no context switching and many open source components already done.

Google Keep is an interesting because it's hard to exactly categorize exactly what it is, or exactly what use case it attempts support.

It's kind of like a crossover between a private Pinterest, a bookmarking app, and a note taking app.

So it's multi-paradigm.

But of you know your use case better, you can tailor your soltution to fit.

You can then make better decisions on online/offline, where to store state, web vs native etc.. this is the benefit of simplyfing and clarifying your use case.

For example, I am a heavy bookmarker (~70k bookmarks), so I built an open-source, self-hosted (I don't want to own your bookmarks) bookmarking web app (https://github.com/jonschoning/espial). It is pretty minimal, but it is tailored to quickly bookmarks while browsing. I didn't bother with native because I am already in a browser context when I want to bookmark something.

But maybe I am just biased towards web hosted tech. I just don't see the value add for native unless it's doing something intimately connected with the physical device or physical user.

Your crossover comment is a good one - especially the "private Pinterest" angle. I attach a pic to every card, because I find it much easier to scan a home page that way instead of trying to read every card's title tag. (Of course I'm killing my page loads, but I guess that's the price I pay.)

And I'm always in a browser context too. Thanks.

Your app reminds me me of Pinboard.
I'm interested in this simply because Keep still, somehow, doesn't have sort by most recently edited, even tho Apple managed this as the default a decade ago. Manually dragging a note to the top every time I use the app is so painful.
Exactly. I end up pinning & unpinning notes to do this. Painful indeed.
Start by making mockups in Balsamiq. Then pick a single screen/view of your mockups to start picking up the basics of React Native (just use the Expo framework (which is a React Native framework) for rapid prototyping).

React is hard until your understanding of it finally 'clicks' - and having a wireframed visual reference of what your app is supposed to look like actually makes it easier to think about how it should be layed out in code, imo.

I actually just started learning React Native and I re-wrote the first iteration of my app's home screen many times (and kind of aimlessly) until I had something that actually made sense and was easily maintainable - still re-factoring it into something even simpler, tbh. That said, I think that was mainly due to me not knowing what was in the library or having approached the UI components properly in the first place, so I think I will be prototyping quite a bit faster over time.

re: state management/backend, I'm also confused as to what stack would be best for what I want to do. I'm guessing Firebase with some minimal manual state management? All the state updates my app needs to do is essentially record the user ticking some checkboxes, and some timers updating in the UI, and those persisting on a user's phone but also optionally associated with their account online if they so choose.

edit: I might actually go the PouchDB route

I would go for a PWA! Easy sharing & collaboriation for notes without having to install an app would awesome!

I also think all the available APIs would be enough for a note-taking app. iOS improved it's support massivly in the latest beta.

You just need to keep it snappy! I take notes quickly and often.

What features and improvements currently lacking in keep are key deliverables for you?
Off the top of my head:

* card sort by creation date, last edit, title text, maybe card color? * private/public/sharable options per card * something other than raw text display (markdown?) * a better page load strategy for slower connections

Nice to have: * card width/height options, maybe via CSS like Muuri * archives to selected categories

Offline-first PWA using React/Vue + PouchDB

What features do you want Google to add to Keep?

I'm not satisfied with existing note-taking apps myself, and I'm currently researching/prototyping alternatives. My current prototype focuses on eliminating input friction, and I use it as my Android launcher.

Hi, I agree with you, PouchDB is an exiting technology. I had built an webapp (PWA) as a open-source side-project, using Vue+Vuetify+PouchDB, and it looks like to works well for single-user. It is not finished, I have some ideas to gradualy improve it, like WYSIWYG, encrypting data, full-text search, notifications, ...

The demo/presentation is here : https://jimskapt.github.io/lambda-badger, and source is here : https://github.com/Jimskapt/lambda-badger

It seems to me that the frontend is pretty simple and most stacks will be fine. I would worry more about how the data is stored, backed up and other backend parts. My expectation is that most work will be done on the backend side.

Another consideration that’s independent from your frontend stack is how the user interacts with the UI. I guess that’s called UX these days. Making the right or wrong choices there will have much bigger impact on success than the framework choice.

Agreed & thanks. That's why I started with a text file of UX gotta-haves and like-to-haves before touching any code. Appreciate it.
What would I use? Standard tech stack: React+Apollo+Redux+GraphQL (with Typescript). React Native for mobile. On the backend, Postgres DB at first, upgrade to CockroachDB or something when needing scale. Choice of language for application server to translate GraphQL queries to and from SQL queries is the only thing I would be unsure about - either Python or Typescript probably.

But this is because I'm very familiar with these frameworks. Productivity using them is really high once you've learned them well. But the learning curve to learn these technologies might be more than the amount of work that goes into making a Google Keep clone with a more approachable framework...

> Standard tech stack: React+Apollo+Redux+GraphQL (with Typescript).

The standard or A standard?

Nearly all the new startups I interviewed with recently were using that stack, except some had vanilla JS or were only partially converted to TypeScript.

It's becoming the de facto standard stack for new projects.

Why not apollo-link-state instead of redux?
No particular reason other than I'm used to redux.

My gut reaction when it came out was "it seems rather unwieldy compared to redux to have to manage client-side application state through graphql", but my gut reaction could be wrong, and I haven't actually tried apollo-link-state so this isn't really an informed opinion. Notably though, it feels think graphql is great for graph data, but pointless overkill for most global application state which isn't really graph data.

You could take a look at what I'm building with Polar:

https://getpolarized.io/

It's basically note taking but integrated with the reading flow. You basically keep all your books and notes in one place and you can annotate and highlight directly within Polar.

It's basically a "personal knowledge repository" with all your books and web content integrated along with highlighting.

Google Keep serves a different purpose. Although I guess you could use them for the same thing (kind of), the card-based functionality is Google Keep’s main selling point, which your application does not seem to include. Although I like what you’re doing, I think it’s too different and too specific to reading and note-taking to be a Google Keep replacement.
oh yes.. they're different. I agree.
Just letting you know, if you ever build a android app, I will download the paid version happily.