Volt
The problem
Managing passwords for every account I have has become chaotic. I often create strong passwords, which I update regularly, and store within the browser's default password manager. This manual process becomes a headache when switching between devices and accounts.
The approach
What I need is a password manager with universal access across all devices - a place to generate, store, and manage secure password credentials for anything. Consider adding managing payment methods and physical address details as well, things I often need to check manually when necessary.
Research & ideation
Database design
User interface
Dev - backend
Dev - frontend
Branding & identity
01 - Research and ideation
The difficult thing about this project is that there has to be a good balance between security and convenience. How do I create a secure vault without making it feel like a vault? How do I implement the best security standards and measures without compromising the user experience? All good questions.
With these questions in mind, I decided to start the process by considering any external resource(s) I might need for performing password vulnerability scans, and adhere to security standards for sensitive data management.
02 - Database design
Data gathered with the use of external resources is kept in the database for a short period, while historical user data, such as new, current and previously created credentials persists unless the user decides otherwise.
03 - User interface
The priority is simplicity, meaning a user should only ever see what they need to see, and a minimal interface allows for that.
04 - Dev - backend
I implemented a zero-knowledge design approach. There's a lot to consider here: user auth and management, encryption methods, rotating and revoking keys, creating tokens with a very limited lifespan, recording metadata, and audit logging.
- Supabase Auth - for user authentication, authorization and management.
- Java + SpringBoot - for a robust API to interact with the database(s) and all external resources.
- HaveIBeenPwned - for password security standards and vulnerability checks.
- Digital Ocean - for a VPS with ample resources to host the API.
- AWS - for the database(s).
05 - Dev - frontend
Putting it all together, with security being first priority:
- TypeScript - for type safety, behaviour predictability, and less headache-inducing testing methods.
- Next.js - for a more optimized React.js, performance benefits like built-in caching, better data querying methods, etc.
- Tailwind - for the perfect balance between convenience and freedom of customization.
- Framer Motion - for micro interaction customization, that are optimized for accessibility and great performance.
06 - Branding and identity
Trust, security, modernity
#f2f3f5
Whitestone
#ffffff
White
#1D1C29
Charcoal indigo
#DDDAE3
Light mist
#7F6DFF
Bright indigo
#4416FF
Royal blue
Primary - whitestone & white
Backgrounds, text color, etc. Dominant colors across the app
Secondary - charcoal indigo & light mist
Cards, inactive states, action elements
Accents - bright indigo & royal blue
Call to actions, actions, interactive elements
Finally - The solution
The resulting solution is a web application that allows users to create, store, and securely manage their "secret" information - passwords, payment credentials, and physical address details. Here's what future updates look like for Volt: A native mobile app - for even more universal access and better application support. A web browser extension - to detect forms requiring user input and auto-fill upon user confirmation.
