Vault
A developer-centric platform for capturing, organizing, and sharing knowledge through a rich note-taking experience.
Introduction
During college final project, I was tasked to create a full stack application on any topics of my choosing. My first idea was to build a reddit like website for Cambodian audience, but after some consultation with my lecturer, it was dropped. His note to me was "Try to thing of something that YOU find USEFUL" and so I think long and hard about it, and I came up with something.
One thing that constantly annoyed me was this: I’d spend hours solving a problem by Googling, reading through dozens of Stack Overflow posts, or prompting AI — only to realize I had already solved this before. I just forgot the solution.
That’s when the idea for Vault was born.
Vault is a versatile note-taking and knowledge-sharing platform designed to enhance personal journaling and community engagement. Users can capture, organize, and share their thoughts, ideas, and experiences using a rich markdown editor. The platform supports easy text formatting, multimedia embedding, and structured content creation. Additionally, it offers a unique feature that allows users to publish their notes to a community, fostering knowledge sharing and collaborative learning. Whether documenting personal reflections, sharing tutorials, or learning from others, it aims to create a dynamic and interactive environment for all users.
TL:DR an application that allows users to take note. What is special is that users can publish the note, and share their knowledge with other users on the platform. Since it's a website, users will be able to take their note on the go. I want to make the home page as intuitive as possible so users can search any note they need, or scroll and learn new knowledge that the user shares.
Challenge
Going into this project, I'm fresh with full stack application as project before this is just simple website display or pure frontend project. Since the time constraint is 4 months, I know I couldn't just spin out an Express backend and dual code both back and front. So I turned to a BaaS, Supabase.
It was pretty easy to set up and have it running as the function to CRUD is pretty similar to SQL statement.
const { data, error } = await supabase.from('orchestral_sections').select(` id, name, instruments ( id, name )`)The authentication that they provided also pretty simple as well. This is the first project I worked with Google OAuth and so it take me some time to set it up, but once it's set up, it works like a charm. The same things cannot be said about anonymous login tho. The set up is easy, however, for the life of me I'm not sure why after a few day my user list grow 10x everytime and most user is anonymous, even though, I've already constraint it to only create if user is valid and doesn't have an account yet. To it credit, I put this logic in my middleware so it could be somehow because I didn't set up it correctly?.
Another thing I couldn't get right is the Vector Search. I got it to set up and works, however I don't find it any useful than regular Full Text Search. The result is either similar and sometimes straight out the same.
One of the specification of the final project is to have a payment page. I've heard a lot of great thing about Stripe and to it credit, it is really easy to set up in my project. But as I later find out it doesn't work in Cambodia. As it required a US business license if I want to receive payment.
Another big challenge is the editor, Going in I want the editor to be easy to use as possible, and I want it to be customizable so I can add custom block later. Which is the reason I chose TipTap. Now TipTap and NextJS is not the best combo, TipTap does provide SSR option, but I find it to be suboptimal, It cause me lot of hydration errors, I ended up having to marked the editor component as client side entirely and it seems to work fine for the most parts. Rendering the bloc is also difficult, all the option that they provided is mostly for client side, but I wanted my website to load fast, especially the content viewing. So I ended up having to write my own bloc loader with CSS instead.
Conclusion
In the end, during the presentation, my lecturers praised the design and functionality of the site. However, they did point out that similar platforms already exist — a fair critique.
Still, I built something I actually wanted to use, and learned more in those 4 months than I ever expected. I gained real-world experience with:
Full-stack development
Supabase (auth, database, storage)
OAuth integration
TipTap editor customization
Performance optimization in Next.js
Stripe payment (and real-world limitation in Cambodia)
Vault might not be revolutionary, but it solved a personal pain point — and that alone made it worth building and it quickly become as sort of my personal blog post.
Additional Resource
Full Documentation
Gallery
