webapp/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
2 commits 1 branch 0 tags 74 KiB
  • Vue 59.4%
  • TypeScript 37.9%
  • CSS 1.6%
  • HTML 0.7%
  • JavaScript 0.4%
Find a file
Exact
Darius aa2a23a069 Update
2026-04-24 01:12:07 +02:00
public Init 2026-04-21 20:06:35 +02:00
src Update 2026-04-24 01:12:07 +02:00
.gitignore Init 2026-04-21 20:06:35 +02:00
index.html Init 2026-04-21 20:06:35 +02:00
package.json Update 2026-04-24 01:12:07 +02:00
README.md Init 2026-04-21 20:06:35 +02:00
tailwind.config.js Init 2026-04-21 20:06:35 +02:00
tsconfig.app.json Init 2026-04-21 20:06:35 +02:00
tsconfig.json Init 2026-04-21 20:06:35 +02:00
tsconfig.node.json Init 2026-04-21 20:06:35 +02:00
vite.config.ts Update 2026-04-24 01:12:07 +02:00

README.md

Notes App - Vite + Vue 3 + Tailwind CSS

A modern, responsive note-taking application with offline support using IndexDB.

Features

✨ Core Features

  • 📁 Project-based Organization: Create projects to organize your documents
  • 📄 Rich Documents: Add titles, notes, todo lists, and file attachments
  • 🎨 Dark/Light Theme: Toggle between dark and light modes (saved in browser)
  • 📱 Responsive Design: Works seamlessly on mobile and desktop
  • 💾 Offline First: All data stored in IndexDB, no server required
  • ⚡ No Dependencies: Uses plain Vue 3 reactivity and IndexDB APIs

Document Features

  • Title (mandatory)
  • Note (optional markdown text)
  • Todo List (optional, add/edit/delete todos)
  • File Attachments (images and PDFs with thumbnails)
  • Preview Mode (default) with Edit button
  • Edit Mode for updating all content

UI/UX

  • Sidebar Navigation: Tree view of projects and documents
  • Only Active Project Opens: Click to expand/collapse projects
  • Theme Toggle: Button in sidebar to switch themes
  • Modal Dialogs: For creating projects and documents
  • Responsive Layout: Adapts from mobile to desktop

Tech Stack

  • Frontend: Vue 3 with TypeScript
  • Build Tool: Vite
  • Styling: Tailwind CSS v4
  • Storage: IndexDB (native browser API)
  • No External Dependencies: For data storage and state management

Getting Started

Prerequisites

  • Node.js 16+ and npm

Installation & Development

# Install dependencies
npm install

# Start development server
npm run dev

The app will open at http://localhost:5173

Building for Production

# Build the project
npm run build

# Preview the production build
npm run preview

Project Structure

src/
├── components/
│   ├── App.vue              # Main app component
│   ├── Sidebar.vue          # Project/document tree navigation
│   └── DocumentEditor.vue   # Document preview and editor
├── composables/
│   └── useTheme.ts          # Dark/light theme management
├── stores/
│   └── noteStore.ts         # IndexDB operations and reactive state
├── style.css                # Tailwind CSS configuration
└── main.ts                  # App entry point

Usage Guide

Creating a Project

  1. Click "+ New Project" button in the sidebar
  2. Enter project name and click Create

Adding Documents

  1. Select a project (click to expand)
  2. Click "+ Add Document" at the bottom
  3. Enter document title and click Create

Editing a Document

  1. Click a document in the sidebar to select it
  2. Click the ✏️ Edit button to enter edit mode
  3. Add or modify:
    • Document title
    • Note text
    • Todo items (add/remove as needed)
    • File attachments (images and PDFs)
  4. Click Save to save changes

Uploading Files

  • In edit mode, click the file upload area
  • Select images or PDFs (max 5MB per file)
  • Images show thumbnail previews
  • PDFs display with a PDF icon

Theme Toggle

  • Click the sun/moon icon (☀️/🌙) in the top right of the sidebar
  • Theme preference is saved in browser localStorage

Data Storage

All data is stored in IndexDB with these object stores:

  • projects: Project metadata
  • documents: Document data (title, note, todos, file references)
  • files: Attached files (images and PDFs)

Data persists even after closing the browser and works completely offline.

Dark Mode

The app uses Tailwind's class-based dark mode (triggered by the dark class on <html>). The theme preference is stored in localStorage and applied on page load based on:

  1. Stored preference (highest priority)
  2. System preference (if no stored preference)
  3. Light mode (default)

Browser Compatibility

  • Chrome/Edge 24+
  • Firefox 18+
  • Safari 10+
  • Any browser with IndexDB support

Offline Support

  • ✅ Works completely offline
  • ✅ All data synced to IndexDB
  • ✅ No network requests required
  • ✅ Theme preference persists

Future Enhancements

  • Export documents to Markdown/PDF
  • Search functionality
  • Document sharing
  • Collaborative editing
  • Cloud sync (optional)

License

MIT