NoteVault

Project Type: Frontend App | Offline-First | Productivity Tool
Tools Used: React, Vite, Tailwind CSS, localStorage, react-hot-toast
Data Source: Stored entirely in the browser using localStorage

Link to Live App

Objective

Create a simple, beautiful, and functional note-taking app that works instantly, even offline — no backend, no login, just fast note creation and editing with a modern UI.

Key Features

• Offline-First LocalStorage Sync:

  • Notes are stored directly in the browser using localStorage, so everything works offline.
  • Auto-saves all changes in real-time with no need for manual saving or backend APIs.

• Modern Frontend Stack:

  • Built with React and styled using Tailwind CSS v4 (via the Vite plugin).
  • Uses react-hot-toast for clean, non-blocking feedback on add, update, delete, and export actions.

• Fast & Focused UX:

  • Live search filter for notes by title or content.
  • Each note includes a timestamp for creation and updates.
  • Notes are easily exportable to .json or .txt with one click.
  • Fully responsive and clean mobile-first layout.

• Simple, Honest Scope:

  • No user accounts, no syncing — just a private, fast, minimal note app.
  • Codebase designed for rapid iteration and experimentation.

Deployment Highlights

• Hosted on Netlify using Vite’s blazing-fast static build output.
• CI/CD automatically triggers on push to the main branch.
• .gitignore, netlify.toml, and clean build output keep deployment lean.

🔗 View Code on GitHub: GitHub Link
🔗 View Blog Post: Link