Mobile Link Saver&Reader Module

Tech Stack

• Framework: React Native with Expo Router
• Language: TypeScript
• State Management: React Hooks (useState, useEffect, useRef)
• Navigation: Expo Router (file-based routing)
• UI Components: React Native built-ins (View, Text, ScrollView, TouchableOpacity, etc.)
• Safe Area: react-native-safe-area-context
• Animations: React Native Animated API
• Storage: AsyncStorage-based persistence layer
• Link Preview: Custom link preview fetching utility

Setup/Usage

Installation

# Install dependencies
npm install
# or
yarn install

# Start the development server
npx expo start

Running on Device

# iOS
npx expo run:ios

# Android
npx expo run:android

# Web
npx expo run:web

Project Structure

app/
├── _layout.tsx       # Root layout with navigation stack
├── index.tsx         # Home/reading list screen
├── add.tsx           # Add article screen
├── archive.tsx       # Archived articles screen
├── reader.tsx        # Article reader screen
├── folders.tsx       # Folder management screen
├── search.tsx        # Search screen
└── settings.tsx      # Settings screen

src/
├── constants/
│   └── theme.ts      # Colors, spacing, typography
├── types/
│   └── index.ts      # TypeScript interfaces
├── utils/
│   ├── storage.ts    # AsyncStorage operations
│   ├── linkPreview.ts # Link preview fetching
│   └── readingTime.ts # Utilities for ID generation, domain extraction

Key Components

AddScreen (app/add.tsx):

• URL input with validation
• Link preview fetching with error handling
• Tag management interface
• Folder selection
• Article saving with metadata

RootLayout (app/_layout.tsx):

• Navigation stack configuration
• Demo data seeding on app launch
• Safe area and status bar setup

API/Storage Methods

Storage Utilities

• saveArticle(article: Article) - Save an article to local storage
• getFolders() - Retrieve all folders
• seedDemoData() - Initialize demo articles and folders

Link Preview

• fetchLinkPreview(url: string) - Fetch metadata from URL (title, description, image, favicon)

Utilities

• generateId() - Create unique article IDs
• extractDomain(url: string) - Extract domain from URL

Data Types

interface Article {
  id: string;
  url: string;
  title: string;
  description: string;
  imageUrl: string;
  favicon: string;
  siteName: string;
  domain: string;
  savedAt: number;
  isArchived: boolean;
  isRead: boolean;
  readingProgress: number;
  estimatedReadTime: number;
  tags: string[];
  folderId?: string;
  highlights: any[];
}

interface Folder {
  id: string;
  name: string;
  icon: string;
}

Notes

• The app uses a custom theme system with centralized color, spacing, and typography constants
• URL validation supports both full URLs and domain-only inputs (auto-prepends https://)
• Preview fetching gracefully degrades — articles can be saved even if preview fetch fails
• All screens are configured without native headers for a custom header implementation
• Animations use the native driver for optimal performance