Pass Manager

A secure, local-first password manager built with Jazz and React.

Overview

Pass Manager is a collaborative password management application built using Jazz, a TypeScript framework for local-first applications. It allows users to:

• Store and organize passwords in folders
• Securely share folders with other users
• Access passwords across multiple devices
• Work offline with data syncing when connection is restored

Technology Stack

• Frontend: React, TypeScript, Tailwind CSS
• State Management: Jazz (local-first state management)
• Authentication: Passkey authentication via Jazz
• Routing: React Router
• Forms: React Hook Form
• Build Tool: Vite
• Deployment: Vercel

Project Architecture

pass-manager/
├── src/                      # Source code
│   ├── components/           # Reusable UI components
│   │   ├── alert.tsx         # Alert component for notifications
│   │   ├── base-modal.tsx    # Base modal component
│   │   ├── button.tsx        # Button component
│   │   ├── invite-modal.tsx  # Modal for inviting users
│   │   ├── new-item-modal.tsx # Modal for creating/editing items
│   │   └── table.tsx         # Table component for displaying passwords
│   ├── pages/                # Application pages
│   │   └── vault.tsx         # Main vault page
│   ├── actions.ts            # Action creators for app functionality
│   ├── apiKey.ts             # API key configuration
│   ├── App.tsx               # Main app component with routing
│   ├── index.css             # Global CSS styles
│   ├── main.tsx              # Application entry point
│   ├── schema.ts             # Jazz data models
│   └── types.ts              # TypeScript type definitions
├── public/                   # Static assets
├── dist/                     # Build output
├── index.html                # HTML entry point
├── package.json              # Project dependencies
├── tailwind.config.ts        # Tailwind CSS configuration
├── tsconfig.json             # TypeScript configuration
├── vite.config.ts            # Vite configuration
└── vercel.json               # Vercel deployment configuration

Cursor Development Environment

The project includes a .cursor directory with development tools and documentation to enhance the development experience with the Cursor IDE:

.cursor/
├── docs/                     # Jazz framework documentation
│   ├── 1_jazz_docs.md        # Comprehensive Jazz documentation covering CoMap, CoList, CoFeed
│   ├── 2_jazz_schema_template.md # Templates for creating Jazz schemas
│   ├── 3_jazz_rules.md       # Best practices and rules for Jazz schemas
│   ├── 4_*_jazz_example.md   # Various example applications built with Jazz:
│   │   ├── 4_1_jazz_example.md # Password manager example
│   │   ├── 4_2_jazz_example.md # Music player example
│   │   ├── 4_3_jazz_example.md # Social pet app example
│   │   ├── 4_4_jazz_example.md # Bubble tea ordering example
│   │   ├── 4_5_jazz_example.md # Employee onboarding example
│   │   └── 4_6_jazz_example.md # Task management example
│   └── 5_jazz_upgrade_guide_0_12_0.md # Guide for upgrading to Jazz v0.12.0
└── rules/                    # Cursor IDE rules
    ├── generate-jazz-schema-rules.mdc        # Rule for creating Jazz schemas
    ├── jazz-app-scaffolding-rule.mdc         # Rule for scaffolding new Jazz apps
    ├── jazz-component-creation-rule.mdc      # Rule for creating UI components
    ├── jazz-action-implementation-rule.mdc   # Rule for implementing action functions
    ├── jazz-data-model-extension-rule.mdc    # Rule for extending data models
    ├── jazz-sharing-implementation-rule.mdc  # Rule for implementing sharing features
    ├── jazz-app-testing-rule.mdc             # Rule for testing Jazz applications
    └── jazz-complete-app-transformation-rule.mdc # Meta-rule that orchestrates all other rules

Documentation

The .cursor/docs directory contains comprehensive documentation for the Jazz framework:

• Core Concepts: Detailed explanations of CoMap, CoList, CoFeed, and SchemaUnion
• Example Applications: Six example applications showcasing different Jazz patterns
• Schema Templates: Templates for creating common Jazz data models
• Best Practices: Rules and guidelines for creating effective Jazz schemas
• Upgrade Guide: Documentation for migrating to newer Jazz versions

Cursor Rules

The .cursor/rules directory contains AI-powered rules for the Cursor IDE to assist with Jazz development:

• generate-jazz-schema-rules.mdc: Generate Jazz schemas following best practices and patterns
• jazz-app-scaffolding-rule.mdc: Transform the Pass Manager template into a new application
• jazz-component-creation-rule.mdc: Create UI components that work with Jazz's reactive data
• jazz-action-implementation-rule.mdc: Implement consistent CRUD operations and business logic
• jazz-data-model-extension-rule.mdc: Extend existing data models with new properties
• jazz-sharing-implementation-rule.mdc: Implement sharing and collaboration features
• jazz-app-testing-rule.mdc: Create comprehensive testing strategies for Jazz applications
• jazz-complete-app-transformation-rule.mdc: Meta-rule that orchestrates all other rules in sequence to transform the entire application based on comprehensive requirements

These rules follow a structured protocol to ensure high-quality, consistent implementations that follow Jazz best practices. See the LLM.md file for detailed examples of how to use these rules.

Data Model

The application uses Jazz for data modeling with the following key classes:

• PasswordManagerAccount: Top-level account model with profile and root
• PasswordManagerAccountRoot: Container for folders
• Folder: Collection of password items with a name
• PasswordItem: Individual password entry with credentials
• FolderList: Ordered list of folders
• PasswordList: Ordered list of password items

Features

Authentication

• Secure passkey authentication provided by Jazz
• Login/logout functionality

Password Management

• Create, read, update, and delete password items
• Organize passwords in folders
• Copy passwords to clipboard

Folder Management

• Create and delete folders
• View all passwords or filter by folder

Sharing & Collaboration

• Share folders with other users with different permission levels
• Accept shared folder invitations
• Real-time collaboration on shared folders

Setup and Development

Prerequisites

• Node.js 16+
• npm or pnpm

Installation

1. Clone the repository

   git clone https://github.com/yourusername/pass-manager.git
   cd pass-manager

2. Install dependencies

   npm install
   # or
   pnpm install

3. Start the development server

   npm run dev
   # or
   pnpm dev

4. Open http://localhost:5173 in your browser

Building for Production

npm run build
# or
pnpm build

Extending the Application

Adding New Components

Place new components in the src/components directory following the existing patterns. The project uses functional React components with TypeScript.

Adding New Pages

Create new page components in the src/pages directory and add routes in the App.tsx file.

Modifying the Data Model

Update the schema in src/schema.ts to add or modify data structures. The Jazz framework provides reactive data models that automatically sync across clients.

Adding New Features

1. Update the schema if needed
2. Add actions in src/actions.ts
3. Create or update UI components
4. Connect actions to UI components

Deployment

The application is configured for deployment to Vercel. Simply connect your GitHub repository to Vercel for automatic deployments.

Sync Configuration

By default, the app uses Jazz Cloud (wss://cloud.jazz.tools) for synchronization across devices. You can configure a custom sync server by modifying the sync parameter in the JazzProvider component in src/main.tsx.

License

[Add license information here]

Credits

Built with Jazz, a framework for building local-first applications.