KeeperV2

A Google Keep-inspired note-taking application built with React, featuring persistent local storage via IndexedDB.

Tech Stack

• React 19 — UI framework
• Vite 8 — Build tool and dev server
• Material UI (MUI) v9 — Component library (icons, Fab, Zoom)
• Dexie.js — IndexedDB wrapper for persistent note storage
• ESLint — Code linting

Features

• Create notes — Expandable input form with title and content fields
• Persistent storage — Notes survive page reloads via IndexedDB (Dexie)
• Delete notes — Remove individual notes with a single click
• Responsive design — Clean, card-based layout that works across devices
• Smooth animations — Zoom-in transition on the add button

Getting Started

Prerequisites

• Node.js >= 18

Installation

npm install

Development

Start the Vite dev server with hot module replacement:

npm run dev

Build

Create a production-ready build:

npm run build

Preview the production build locally:

npm run preview

Lint

npm run lint

Project Structure

keeperV2/
├── public/
│   ├── index.html          # HTML entry point (legacy)
│   └── styles.css          # Global styles
├── src/
│   ├── main.jsx            # App entry point
│   ├── App.jsx             # Main app component (Dexie-backed)
│   ├── db.js               # Dexie database config
│   ├── components/
│   │   ├── Header.jsx      # App header / branding
│   │   ├── Footer.jsx      # Copyright footer
│   │   ├── CreateArea.jsx  # Note creation form
│   │   └── Note.jsx        # Individual note card
│   └── assets/             # Static assets (images, icons)
├── index.html              # Vite HTML entry point
├── vite.config.js          # Vite configuration
├── eslint.config.js        # ESLint flat config
└── package.json

How It Works

1. Adding a note — Click the text area to expand the form, enter a title (optional) and content, then click the + button. The note is saved to IndexedDB via Dexie and rendered immediately.
2. Persistence — src/db.js defines a notesDB database with a notes table. src/App.jsx uses useLiveQuery from Dexie to reactively fetch notes.
3. Deleting a note — Click the delete icon on any note card to remove it from IndexedDB.

Dependencies

Package	Purpose
react / react-dom	UI rendering
@mui/material	Material UI components (Fab, Zoom)
@mui/icons-material	Material icons (Add, Delete, Highlight)
dexie / dexie-react-hooks	IndexedDB abstraction + React hooks
@emotion/react / @emotion/styled	MUI styling engine