Skip to Main Content

ProjectsEncryptedList

Project Screenshot for My EncryptedList Project
  • Next.js
  • Tailwind CSS
  • SQLite
  • TypeScript

What is EncryptedList?

EncryptedList is a passion project I built to catalog software tools that are secure by default. This is my first major Vue project, and as of 2024, it receives thousands of regular visits.

Why Did You Build It?

I'm interested in tools that are private and secure by design, so I wanted to build a full-stack website to catalog software services that are secure by default where people can discover and share tools that enhance their digital privacy.

How Did You Build It?

Everything about EncryptedList 1.0 was static. I created a simple HTML & CSS page with a couple of dropdowns for filtering items. I used a flat JSON file to store the data and vanilla JavaScript to fetch the contents of this file to render them on the page. Managing data in a static JSON file was tedious, and this led to the development of the second version.

EncryptedList 2.0 was an SPA that uses Vue.js for the UI and Airtable for data. I created serverless functions on Vercel to connect the UI with the Airtable database. To make the web app complete, I implemented client-side search and filtering along with a submission page for new tools powered by GitHub Issues.

Due to most logic being done on the client-side, this version of the project had some performance issues.

EncryptedList 3.0 is the current version of the project built from scratch using Next.js, and following modern best practices. It brings performance improvements, and has new features that improve the user experience such as pagination, optimized search and sorting, and features suggested by users such as multi-tag filtering.

What Tools Did You Use?

  • Frontend: Next.js, Tailwind CSS, TypeScript
  • Backend: SQLite (Turso), Resend
  • Deployment: Vercel