📱 Contact Manager

A modern, privacy-focused contact management application built with React, TypeScript, and Capacitor. Designed for organizing and managing personal and professional contacts with ease across all platforms.

🚀 Author

Rolan - Always learning, always building

🔗 Portfolio: rolan-rnr.netlify.app
💻 GitHub: @Mrtracker-new

✨ Features

🎯 Core Features

Contact Management: Create, edit, delete, and organize contacts
Smart Search: Fuzzy search with advanced filtering capabilities
Profile Pictures: Upload and manage contact photos with automatic compression
Custom Fields: Add unlimited custom fields for each contact
Tags System: Organize contacts with colorful tags
Notes & Links: Attach notes and external links to contacts
File Attachments: Attach documents, images, and files to contacts

🔒 Privacy & Security

Offline-First: All data stored locally using IndexedDB
Data Encryption: Optional AES encryption for backups
Privacy-Focused: No external servers, complete data ownership
Secure Backups: Export encrypted backups with password protection

🌐 Cross-Platform Support

Web Application: PWA with offline capabilities
Mobile Apps: Native Android and iOS apps via Capacitor
Desktop Ready: Electron and Tauri compatibility
Responsive Design: Optimized for all screen sizes

🎨 User Experience

Dark/Light Mode: System-aware theme switching
Modern UI: Clean, intuitive interface with smooth animations
Touch-Friendly: Optimized for mobile interactions
Keyboard Shortcuts: Efficient navigation for power users

🏗️ Architecture Overview

graph TB
    subgraph "Frontend Layer"
        A[React 18 + TypeScript]
        B[Tailwind CSS]
        C[React Router]
        D[Zustand State Management]
    end
    
    subgraph "Data Layer"
        E[IndexedDB via Dexie]
        F[Local Storage]
        G[File System Access]
    end
    
    subgraph "Cross-Platform Layer"
        H[Capacitor Core]
        I[Web APIs]
        J[Native Plugins]
    end
    
    subgraph "Build System"
        K[Vite]
        L[TypeScript Compiler]
        M[PWA Plugin]
        N[Capacitor CLI]
    end
    
    A --> E
    A --> H
    H --> I
    H --> J
    K --> A
    K --> M
    N --> H

Data Flow Architecture

sequenceDiagram
    participant U as User
    participant C as Component
    participant S as Store (Zustand)
    participant DB as Database Service
    participant IDB as IndexedDB
    
    U->>C: User Action
    C->>S: Update State
    S->>DB: Database Operation
    DB->>IDB: Query/Mutation
    IDB-->>DB: Result
    DB-->>S: Response
    S-->>C: State Update
    C-->>U: UI Update

📁 Project Structure

contact-manager/
├── 📁 src/
│   ├── 📁 components/          # Reusable UI components
│   │   ├── AttachmentSection.tsx
│   │   ├── FloatingActionButton.tsx
│   │   ├── Layout.tsx
│   │   ├── LinkSection.tsx
│   │   ├── MobileNavigation.tsx
│   │   ├── NoteCard.tsx
│   │   ├── NoteSection2.tsx
│   │   ├── ProfilePicture.tsx
│   │   ├── SaveIndicator.tsx
│   │   ├── SearchInput.tsx
│   │   ├── Sidebar.tsx
│   │   └── TopBar.tsx
│   ├── 📁 pages/               # Main application pages
│   │   ├── ContactDetail.tsx   # Contact view/edit page
│   │   ├── ContactList.tsx     # Main contacts listing
│   │   ├── NewContact.tsx      # Contact creation form
│   │   ├── Search.tsx          # Advanced search page
│   │   └── Settings.tsx        # App settings & preferences
│   ├── 📁 db/                  # Database layer
│   │   └── database.ts         # Dexie configuration & operations
│   ├── 📁 store/               # State management
│   │   └── useStore.ts         # Zustand store configuration
│   ├── 📁 services/            # Business logic services
│   │   └── attachments.service.ts
│   ├── 📁 utils/               # Utility functions
│   │   ├── fileOpener.ts       # File handling utilities
│   │   ├── index.ts            # Export/import utilities
│   │   └── mobileFileUtils.ts  # Mobile file operations
│   ├── 📁 types/               # TypeScript type definitions
│   │   ├── index.ts            # Core type definitions
│   │   └── tauri.d.ts          # Tauri-specific types
│   ├── 📁 plugins/             # Capacitor plugins
│   │   └── index.ts            # Plugin registrations
│   ├── App.tsx                 # Main application component
│   ├── main.tsx                # Application entry point
│   └── index.css               # Global styles
├── 📁 android/                 # Android-specific files
├── 📁 dist/                    # Built application files
├── 📁 public/                  # Static assets
├── capacitor.config.ts         # Capacitor configuration
├── package.json                # Project dependencies
├── tailwind.config.js          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite build configuration
└── README.md                   # This file

🛠️ Tech Stack

Frontend Framework

React 18: Latest React with Concurrent Features
TypeScript: Type-safe development
Vite: Lightning-fast build tool
Tailwind CSS: Utility-first CSS framework

State Management & Data

Zustand: Lightweight state management
Dexie: IndexedDB wrapper for offline storage
React Router: Client-side routing

Cross-Platform Development

Capacitor: Native mobile app development
PWA: Progressive Web App capabilities
Workbox: Service worker management

UI/UX Libraries

Lucide React: Beautiful icons
React Hot Toast: Elegant notifications
React Dropzone: File upload handling
Fuse.js: Fuzzy search functionality

Development Tools

ESLint: Code linting
Prettier: Code formatting
Vitest: Unit testing framework

🚀 Getting Started

Prerequisites

Node.js (v18 or higher)
npm or yarn
Git

Installation

Clone the repository

git clone https://github.com/Mrtracker-new/Contact-manager.git
cd contact-manager

Install dependencies
```
npm install
```
Start development server
```
npm run dev
```
Open in browser
```
http://localhost:5173
```

Build for Production

# Build web application
npm run build

# Preview production build
npm run preview

Mobile Development

Add mobile platforms

# Add Android
npx cap add android

# Add iOS (macOS only)
npx cap add ios

Build and sync
```
npm run build
npx cap sync
```

Open in native IDE

# Android Studio
npx cap open android

# Xcode (macOS only)
npx cap open ios

🌍 Platform Support

Platform	Status	Features
Web Browser	✅ Full Support	PWA, Offline, File System API
Android	✅ Full Support	Native file access, Share integration
iOS	✅ Full Support	Native file access, Share integration
Electron	🔄 Compatible	Desktop file operations
Tauri	🔄 Compatible	Rust-based desktop app

Web Features

Progressive Web App (PWA)
Offline functionality
File System Access API
Web Share API
Push notifications (planned)

Mobile Features

Native file system access
Share integration
Camera access for profile pictures
Biometric authentication (planned)
Background sync (planned)

🗄️ Database Design

Entity Relationship Diagram

erDiagram
    CONTACT {
        int id PK
        string name
        string email
        string phone
        date birthday
        string profilePicture
        boolean isFavorite
        json customFields
        json tags
        datetime createdAt
        datetime updatedAt
    }
    
    NOTE {
        int id PK
        int contactId FK
        string title
        string content
        datetime createdAt
        datetime updatedAt
    }
    
    LINK {
        int id PK
        int contactId FK
        string title
        string url
        string description
        datetime createdAt
    }
    
    ATTACHMENT {
        int id PK
        int contactId FK
        string name
        string type
        int size
        string mimeType
        blob data
        string thumbnail
        datetime createdAt
    }
    
    SETTINGS {
        string key PK
        json value
        datetime updatedAt
    }
    
    CONTACT ||--o{ NOTE : has
    CONTACT ||--o{ LINK : has
    CONTACT ||--o{ ATTACHMENT : has

Database Schema

Contacts Table

interface Contact {
  id?: number;
  name: string;
  email?: string;
  phone?: string;
  birthday?: Date;
  profilePicture?: string;
  isFavorite: boolean;
  customFields: CustomField[];
  tags: string[];
  createdAt: Date;
  updatedAt: Date;
}

Notes Table

interface Note {
  id?: number;
  contactId: number;
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
}

Links Table

interface Link {
  id?: number;
  contactId: number;
  title: string;
  url: string;
  description?: string;
  createdAt: Date;
}

Attachments Table

interface Attachment {
  id?: number;
  contactId: number;
  name: string;
  type: 'document' | 'image' | 'video' | 'other';
  size: number;
  mimeType: string;
  data?: Blob | ArrayBuffer | string;
  filePath?: string;
  thumbnail?: string;
  createdAt: Date;
}

🔧 API Reference

Database Operations

Contacts API

// Get all contacts
const contacts = await db.contacts.toArray();

// Get contact by ID
const contact = await db.contacts.get(id);

// Create contact
const id = await db.contacts.add(contact);

// Update contact
await db.contacts.update(id, updates);

// Delete contact
await db.contacts.delete(id);

// Search contacts
const results = await db.contacts
  .filter(contact => contact.name.includes(query))
  .toArray();

Export/Import API

// Export data
const data = await dbOperations.exportData();

// Import data
await dbOperations.importData(data);

// Export to Excel
await exportUtils.downloadExcel(data, filename);

// Import from Excel
const data = await exportUtils.readExcelFile(file);

Attachment Service API

// Get contact attachments
const attachments = await getContactAttachments(contactId);

// Add attachment
const result = await addAttachment(contactId, files);

// Delete attachment
await deleteAttachment(attachmentId);

// Open file
const result = await openFile(attachment);

// Share file
const result = await shareFile(attachment);

🚀 Deployment

Web Deployment (Netlify/Vercel)

Build the project
```
npm run build
```
Deploy the dist folder to your hosting platform

Android Deployment

Build the app
```
npm run build
npx cap sync android
```
Generate signed APK
```
cd android
./gradlew assembleRelease
```

iOS Deployment

Build the app
```
npm run build
npx cap sync ios
```
Open in Xcode and archive
```
npx cap open ios
```

Docker Deployment

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

EXPOSE 5173
CMD ["npm", "run", "preview"]

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
Add tests if applicable
Commit your changes
```
git commit -m 'Add amazing feature'
```
Push to your fork
```
git push origin feature/amazing-feature
```
Open a Pull Request

Code Style

Use TypeScript for all new code
Follow ESLint rules
Use Prettier for formatting
Write tests for new features
Update documentation as needed

📊 Performance Metrics

Metric	Value
Bundle Size	< 2MB
First Load	< 3s
Lighthouse Score	95+
Offline Support	100%
PWA Score	Perfect

🔒 Security Features

Client-side encryption for sensitive data
No external tracking or analytics
Secure file handling with validation
XSS protection via React
Content Security Policy headers
Input sanitization throughout

🐛 Known Issues & Limitations

Large files: Attachments > 50MB may cause performance issues
iOS Safari: Some file operations limited by browser restrictions
Older browsers: IE11 not supported, Chrome 90+ recommended

📈 Roadmap

Version 1.0 (Mar30)

Real-time sync across devices
Advanced contact grouping
Backup scheduling
Theme customization

Version 2.0 (July 25)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

React Team for the amazing framework
Capacitor Team for cross-platform capabilities
Tailwind CSS for the utility-first approach
Dexie.js for excellent IndexedDB wrapper
Lucide for beautiful icons

📞 Support

📧 Email: rolanlobo901@gmail.com
🐛 Bug Reports: GitHub Issues
💬 Discussions: GitHub Discussions
📖 Documentation: Wiki

Made with ❤️ by Rolan

Always learning, always building

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
Screenshots		Screenshots
android		android
images		images
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
capacitor.config.ts		capacitor.config.ts
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

Mrtracker-new/Contact-manager

Folders and files

Latest commit

History

Repository files navigation