Christopher Flynn

Turning ideas into products, and code into impact—building scalable systems that power real-world solutions.

2 minute read

Link to Project

Sometimes, the goal isn’t to reinvent the wheel — it’s to build your own version of it and ship it. NoteVault was my take on that. A note-taking app that just works: no login, no backend, no fluff. Just a fast, clean, local-first tool built with React, styled with Tailwind, and deployed with a single click.

The Goal

Build a fully functional, offline-first note-taking app with:

  • Fast, modern UI using Tailwind and React
  • Persistent data with localStorage only (no backend)
  • Instant feedback and minimal friction for users

Stack Overview

Layer Tools
Frontend React + Vite + Tailwind CSS v4
Storage Browser localStorage
UI Feedback react-hot-toast for toasts
Deployment Netlify CI/CD

Local-First Simplicity

Instead of relying on cloud databases or user authentication, I chose to keep everything in the browser using localStorage. That decision made the app:

  • Instantly available offline
  • Easy to reset, duplicate, or share
  • Fast to load and save

Notes are stored and synced automatically with each change. They persist across refreshes and browser sessions, with no backend code required.

Key Features

  • Add, Edit, Delete Notes: A straightforward CRUD experience.
  • Timestamps: Each note records its creation and last update time.
  • Search: Filter notes by title or content with instant feedback.
  • Export: Download all notes as .json or .txt in one click.
  • Responsive Design: Works great on desktop and mobile.
  • Toast Notifications: Subtle feedback for actions like save/delete/export.

Styling with Tailwind CSS v4

Tailwind CSS v4 changed the game by removing the need for config files. With the new Vite plugin and @import 'tailwindcss' in my styles, I had a lean and modern setup with zero boilerplate.

I focused on clean spacing, readable fonts, and simple visual hierarchy — nothing flashy, just clean UI and a good user experience.

Deployment on Netlify

Deploying NoteVault was smooth:

  • I pushed the project to GitHub
  • Connected it to Netlify
  • Set the build command to npm run build
  • Published the dist/ directory

Now, every push to main triggers an automatic deploy. No servers, no Docker, no pain.

Challenges Faced

  • Tailwind v4 learning curve: With the removal of tailwind.config.js, I had to re-learn how to integrate styling the new way.
  • Dark mode troubles: I initially tried adding dark mode, but due to Tailwind’s structural changes in v4, I shelved it to avoid bloat.
  • Responsive layout quirks: Making the note display clean across devices took some flexbox wrangling.
  • Avoiding feature creep: I kept the scope tight to avoid falling into the “build everything” trap. Focused MVP > unfinished ambition.

What I Learned

  • How to build and deploy a full SPA frontend with React and Vite
  • Practical Tailwind CSS skills using the v4 plugin-based system
  • Using localStorage effectively as a persistence layer
  • Creating user feedback with react-hot-toast
  • How to scope a project small, finish it, and move on

Try It Out

Live App
GitHub Repo

This was a small but meaningful project. It’s not fancy. It’s not perfect. But it’s done — and that’s the point.

Whether I evolve NoteVault into a synced, authenticated web app down the line or keep it as-is, it stands as a clean example of building something useful with intention and momentum.

You May Also Enjoy