PassPill, the app architecture
This year I want to write about software development and, to do it properly, what’s better than actually develop some software?
We are going to build a password manager called PassPill. The starting point is going to be a web app, you can try PassPill right now if you run your own server.
In the future it would be great to build also mobile apps for Android and iOS. Or maybe we convert it into a web progressive app, so there is no need of creating platform dedicated code. Who knows if we complement the web app with browser plugins, à la LastPass.
The nice thing of the PassPill Project is that it’s about learning and sharing knowledge, so we don’t have the pressure of creating a commercial product. There aren’t deadlines or any need to pay off some venture capital investment, instead we will take our time to explain things well and learn from them, and the development will evolve depending on what’s interesting to the community.
Yet, another password manager
There are many passwords apps out there in the wild and there is no need of another one. But I have thought that building an online app to store your passwords securely and privately is a good way of backing the articles.
One reason is that we’ll be able to talk about many topics, like cryptography, web apps, server infrastructure… but the main reason is that everybody use passwords and an app to store them is a concept easy to understand. Anyone interested in collaborate can jump in really quickly and start using the app from the very beginning.
Having many passwords and remember all of them is very hard, close to impossible, but I have never been very fond of storing my passwords online, so the first password manager I ever used was KeePass. It’s a Windows app that can be installed in any PC and keeps the passwords safe locally, encrypting its database using the secret pass phrase that I only knew. It has always worked really well, but at some point I bought a new computer and forgot to save my KeePass file :_(
It was the time to try some online password manager. At that time, there were already some big players in the password manager field, like 1password, but I felt that it had many options. I just wanted something like KeePass but storing my database online to have it always available, and that app was Clipperz.
Clipperz is a great free web app that makes all the encryption and decryption in your browser and stores the encoded data in the cloud. It was so cool that I didn’t even need to give my email address to create an account, that’s the privacy level I expect from a password app.
I’ve been using Clipperz for many years already and I love it. In that time tools with a similar approach have been born, like bitwarden that have many more options, but for our purpose we want to start simple and create a simple password manager app like Clipperz.
PassPill, the front-end
We will start the project with a web app, so we can access to our information from any device connected to the Internet. The source code is available in the passpill-app repo.
Our UI library is going to be a React-ish one: Inferno.js. After using React.js and Preact.js I have found in Inferno.js the best balance.
Some Inferno.js features are:
- It has the same API than React so if you are already used to React you can use Inferno.js straight away.
- It’s lightweight, 8kb compressed and gzipped, and really fast.
- It brings nice features like adding life-cycle events to functional components.
- It’s in contiunuos development and its source code is much easier to read than Preact’s one.
For the state management we will use freezer.js because of its simplicity. Not many devs know about this library but it’s awesome: it’s a store that emits events on every update that you can use to update the UI. Much easier to understand that Redux uh? It also provides nice features like immutable data that we can use to speed up our app, but I’ll explain it better in next articles.
We will create a router ourselves, a simple but complete one that will be very easy to understand fully, I promise!
The front-end also will handle all the cryptography. crypto-js and bcryptjs will make the most complex and most important work of our app.
For styling we will be using Sass with the SCSS syntax. I am not a SCSS expert so I hope I can learn a lot from you in this section.
For building purposes we are going to use webpack and babel, so we will be able to explore plugins and best practices with them.
PassPill, the back-end
PassPill’s backend will be really simple because all heavy weight is hold by the client-side. You can find the source code of the backend in the passpill-backend repo.
Basically, the back-end needs to offer just two things:
- The API to communicate with the app.
- An storage system to keep the data.
Since the server side is so simple we won’t be able to talk about interesting topics like authentication, at least at the beginning. But on the other hand we will explore different ways of offering APIs and storing data.
We will develop the backend in the way that you can install it in your computer to keep your passwords yourself, in case you don’t like cloud systems, or in your company’s servers to provide your employees with passwords. We will try to support as many ways of providing storage and APIs as possible.
At the moment the API is implemented creating a Node.js server, using Express.js. In the future we will create adapters for AWS lambda functions, Google Cloud Functions or Azure Functions.
The storage is just the server’s filesystem right now: one pill is one file. We will be able of exploring the usage of DynamoDb, Amazon S3 or Firebase to do so.
The backend may become a live comparison of all cloud computing services.
PassPill Project site
The website of the project is also OpenSource, and can be found at the passpil-site repo.
It’s a static web site generated using Hugo. I decided to use it because it was the easiest to install in my computer, but it turned out to be a very good one. It’s activelly developed, it has a good list of updated themes that inspired me (thanks to the ELATE theme) and it’s really simple to write the content in Markdown and have it well organized.
The styles are written in SCSS, like the app ones, and it’s using Gulp to compile them.
Apart from being the entry point we can use it also for experimenting with plain JavaScript and CSS that doesn’t fit in the app.
More than repositories
In order to create a nice software project we need a good set of tools that may be more or less related to programming. It’s difficult to mention all the tools used by the project right now, they are a lot! But here there goes a list with some of them that makes it possible:
- Git for version control and Github for keeping the repos and building a dev community.
- Netlify for static sites hosting and simple deployments.
- Let’s encrypt for the SSL certificates.
- Trello for keeping the tasks in scope.
- Atom for front-end code editing and VS Code for back-end.
- Patreon for getting some income to pay the project expenses and get closer to the project followers.
- Twitter to reach the world and communicate with it. Follow @passpillio to not to miss an update.
- Medium to publish the articles.
- Google Chrome for almost everything?
An everchanging environment
Software development world changes so fast that you need to have your eyes wide open looking for new tools that can boost your project’s performance.
So I want this list not to be static and new tools can be added or existing ones can be replaced. I’ll be updating this article with any change trying to explain the features of new tools or the reason of the change. Do you like the working stack? Should the project be using a tool that is not listed?
