DevSnippets AI 🚀

Offline-First Developer Workspace

A production-ready React Native + Expo mobile app for saving, organizing, managing, and AI-explaining code snippets — built for the Mobile Development Cohort.

📱 App Preview

┌─────────────────────────────────────────────┐
│  HOME      SNIPPETS   FILES   EXPLAIN  SETTINGS │
│  ────       ──────    ─────   ───────  ──────── │
│  Dashboard  Browse    Folders  AI Chat  Config  │
└─────────────────────────────────────────────┘

5 Tab Screens · 7 Stack Screens · 4 Modals · 16 Packages · 4,247 lines of TypeScript

⚡ Quick Start

# 1. Unzip and enter project
unzip DevSnippets.zip && cd DevSnippets

# 2. Install dependencies
npm install

# 3. Start Expo dev server
npx expo start

# 4. Scan QR code with Expo Go (iOS / Android)

No configuration needed — the app seeds demo snippets on first launch so you can explore immediately.

🗂️ Project Structure

DevSnippets/
├── App.tsx                          # Root: navigation + init + seeding
├── app.json                         # Expo config (plugins, bundle ID)
├── package.json
│
└── src/
    ├── constants/
    │   └── theme.ts                 # Colors, spacing, fonts, language/tag lists
    │
    ├── types/
    │   └── index.ts                 # All TypeScript interfaces
    │
    ├── database/
    │   └── SQLiteService.ts         # Full CRUD + WAL mode + all DB operations
    │
    ├── services/
    │   ├── AIService.ts             # Gemini / OpenAI / Claude + SecureStore
    │   ├── FileService.ts           # expo-file-system/legacy wrapper
    │   ├── ExportService.ts         # .txt / .js / .json export + sharing
    │   └── PreferencesService.ts   # AsyncStorage wrapper
    │
    ├── store/
    │   └── useAppStore.ts           # Zustand global state
    │
    ├── components/
    │   ├── ui/
    │   │   ├── index.tsx            # Button, SearchBar, TagChip, EmptyState…
    │   │   └── StatCard.tsx         # Stats dashboard row
    │   └── snippet/
    │       ├── SnippetCard.tsx      # List card with lang badge + tags
    │       └── CodeEditor.tsx       # Dark code viewer + line-numbered editor
    │
    ├── screens/
    │   ├── HomeScreen.tsx           # Dashboard
    │   ├── SnippetsScreen.tsx       # Browse + search + filter
    │   ├── FilesScreen.tsx          # Folder grid
    │   ├── ExplainScreen.tsx        # AI action picker
    │   ├── SettingsScreen.tsx       # Theme + AI key + storage
    │   ├── CreateSnippetScreen.tsx  # New snippet form
    │   ├── SnippetDetailScreen.tsx  # Full detail + actions
    │   ├── EditSnippetScreen.tsx    # Edit form
    │   ├── FavoritesScreen.tsx      # Starred snippets
    │   ├── FolderBrowserScreen.tsx  # File list + move/delete/share
    │   └── AIResultScreen.tsx       # Tabbed AI output
    │
    └── utils/
        └── seedData.ts              # Demo snippet seeder (runs once)

🏗️ Architecture

UI Layer  (React Native screens + components)
      ↓
Store Layer  (Zustand — selectedSnippet, searchQuery, aiResult, settings)
      ↓
Service Layer
   ├── SQLiteService    →  expo-sqlite (WAL mode)
   ├── FileService      →  expo-file-system/legacy
   ├── AIService        →  Gemini / OpenAI / Claude + expo-secure-store
   ├── ExportService    →  .txt / .js / .json + expo-sharing
   └── PreferencesService → @react-native-async-storage
      ↓
Storage Layer
   ├── SQLite           →  Snippets + Attachments + Exports
   ├── SecureStore      →  API Keys (encrypted)
   ├── AsyncStorage     →  Theme + Sort preferences
   └── FileSystem       →  Templates / Resources / Screenshots / Exports / Projects

🗄️ Database Design

snippets

CREATE TABLE snippets (
  id         INTEGER PRIMARY KEY AUTOINCREMENT,
  title      TEXT    NOT NULL,
  language   TEXT    NOT NULL,
  code       TEXT    NOT NULL,
  tags       TEXT    DEFAULT '',      -- comma-separated e.g. "react,hooks,storage"
  favorite   INTEGER DEFAULT 0,       -- 0 = normal | 1 = starred
  created_at TEXT    DEFAULT (datetime('now')),
  updated_at TEXT    DEFAULT (datetime('now'))
);

attachments

CREATE TABLE attachments (
  id         INTEGER PRIMARY KEY AUTOINCREMENT,
  snippet_id INTEGER NOT NULL,
  file_path  TEXT    NOT NULL,
  file_name  TEXT    NOT NULL,
  file_type  TEXT    DEFAULT 'file',
  created_at TEXT    DEFAULT (datetime('now')),
  FOREIGN KEY(snippet_id) REFERENCES snippets(id) ON DELETE CASCADE
);

exports

CREATE TABLE exports (
  id         INTEGER PRIMARY KEY AUTOINCREMENT,
  snippet_id INTEGER,
  file_path  TEXT NOT NULL,
  format     TEXT NOT NULL,           -- 'txt' | 'js' | 'json'
  created_at TEXT DEFAULT (datetime('now'))
);

Storage optimisations:

WAL (Write-Ahead Logging) mode enabled for concurrent reads
ON DELETE CASCADE on attachments so deleting a snippet cleans up files
All queries use parameterised statements (no SQL injection risk)

📱 Screens Reference

Tab Screens (5)

Screen	Route	Purpose
Home	`/`	Dashboard — live stats, recent snippets, quick actions
Snippets	`/snippets`	Full list with search, language filter chips, FAB
Files	`/files`	5 coloured folder cards with item counts
Explain	`/explain`	AI action picker with online/offline status
Settings	`/settings`	Theme, AI provider, masked key management, storage

Stack Screens (7)

Screen	Route	Purpose
Create Snippet	`/snippet/new`	Form: title, language picker, tag chips, dark code editor
Snippet Detail	`/snippet/:id`	Code viewer, copy, export, share, explain, delete
Edit Snippet	`/snippet/:id/edit`	Pre-filled edit form
Favorites	`/favorites`	Filtered view of all starred snippets
Folder Browser	`/files/:folder`	File list with long-press actions
AI Result	`/ai/result`	Tabbed output: Overview / How It Works / Improvements

Modals (4)

Modal	Trigger
Tag Picker	"Add Tag" in Create/Edit
Export Format	"Export" in Snippet Detail
Move File	Long-press file → "Move"
Delete Confirmation	Delete button on snippet or file

🤖 AI Integration

Supported Providers

Provider	Model	Notes
Google Gemini ⭐	gemini-1.5-flash	Free tier available — recommended
OpenAI	gpt-4o-mini	Requires paid account
Anthropic Claude	claude-haiku-4-5	Requires paid account

Getting an API Key

Gemini (Free):

Visit aistudio.google.com
Click "Get API Key" → "Create API Key"
Copy the key

OpenAI:

Visit platform.openai.com
API Keys → Create new secret key

Anthropic Claude:

Visit console.anthropic.com
API Keys → Create Key

Adding Your Key in the App

Open Settings tab
Under AI → tap your preferred provider
Tap API Key row
Paste your key → Save Key

Keys are stored using expo-secure-store (AES-256 encrypted on device).

AI Actions

Action	What it does
Explain	Line-by-line breakdown + key concepts
Summarize	3–5 sentence purpose summary
Improve	Numbered suggestions with code examples

📦 Export Formats

Format	Extension	Content
Text File	`.txt`	Plain text with comment header (title, language, tags, date)
JavaScript	`.js`	JSDoc-commented JS file
JSON	`.json`	Structured object with all snippet fields

All exports are saved to DevSnippets/Exports/ folder and can optionally be shared via native share sheet.

🗃️ File System Layout

{DocumentDirectory}/
└── DevSnippets/
    ├── Templates/      # Reusable code templates
    ├── Resources/      # Reference material
    ├── Screenshots/    # UI screenshots / diagrams
    ├── Exports/        # Auto-saved exported snippets
    └── Projects/       # Project-specific files

🔐 Storage Technology Map

Technology	Used For	Why
`expo-sqlite`	All snippet data (snippets, attachments, exports tables)	Relational, offline, fast queries
`expo-secure-store`	AI API keys	AES-256 encrypted, hardware-backed on device
`@react-native-async-storage`	Theme preference, sort order	Lightweight key-value for non-sensitive prefs
`expo-file-system`	All file operations across 5 folders	Native FS access, no server needed

🌐 Offline Strategy

Works 100% Offline ✅

Create, Read, Update, Delete snippets
Search and filter snippets
View favorites
File browsing and management
Export to local files

Requires Internet ⚡

AI explanation (Gemini / OpenAI / Claude API calls)

Offline Fallback

When no internet is detected:

Orange Offline badge appears on Explain screen
Generate button is disabled with clear visual feedback
Banner explains internet is required

🎨 Design System

Token	Value	Usage
`primary`	`#F97316`	Buttons, active states, FAB
`primaryBg`	`#FFF7ED`	Tag chips, soft backgrounds
`bg`	`#FFFFFF`	Screen background
`bgSecondary`	`#F9FAFB`	Settings, input fields
`textPrimary`	`#111827`	Headings, body
`textSecondary`	`#6B7280`	Labels, subtitles
`danger`	`#EF4444`	Delete actions, errors
`success`	`#22C55E`	Online badge, export success

Language badge colours are semantic per-language: TypeScript=blue, JavaScript=amber, Python=purple, Node.js=green, HTML=red, CSS=violet, etc.

Code editor uses VS Code Dark theme: #1E1E2E background, #E2E8F0 text.

📋 Tech Stack

{
  "expo": "~56.0.8",
  "react-native": "0.85.3",
  "typescript": "~5.8.3",
  "@react-navigation/native": "^7.x",
  "@react-navigation/bottom-tabs": "^7.x",
  "@react-navigation/native-stack": "^7.x",
  "expo-sqlite": "~56.0.x",
  "expo-file-system": "~18.x",
  "expo-secure-store": "~14.x",
  "@react-native-async-storage/async-storage": "^2.x",
  "expo-sharing": "~12.x",
  "expo-clipboard": "~7.x",
  "zustand": "^5.x",
  "@expo/vector-icons": "^14.x",
  "@react-native-community/netinfo": "^11.x",
  "react-native-safe-area-context": "^5.x",
  "react-native-screens": "^4.x"
}

✅ Evaluation Checklist

Core Features

Snippet CRUD — Create, Read, Update, Delete with full validation
Search — Full-text search across title, code, tags
Filter — Filter by programming language
Favorites — Star/unstar, dedicated favorites screen
Tags — Multi-select tag picker with chip display

Storage

SQLite — 3-table relational DB with WAL mode, parameterised queries
SecureStore — Encrypted API key storage
AsyncStorage — Theme + sort preferences
FileSystem — 5-folder structure, full file operations

File Management

Browse files across 5 folders
Move files between folders
Delete files with confirmation
Share files via native share sheet

AI

3 AI providers (Gemini, OpenAI, Claude)
3 actions (Explain, Summarize, Improve)
Offline detection + graceful fallback
Results in tabbed Overview / How It Works / Improvements layout
Copy / Save / Export AI results

Export & Sharing

UI/UX

Orange primary theme matching design spec
Dark code editor with line numbers
Language badges with semantic colours
Smooth modal animations
FAB for quick snippet creation
Empty states with call-to-action
Pull-to-refresh on Home
Delete confirmation dialogs

Code Quality

TypeScript strict mode — 0 errors
No unused imports anywhere
All navigation targets registered
Zustand for clean global state
Reusable component library
Service layer cleanly separated from UI
Demo data seeded on first launch

🐛 Known Limitations

Dark mode toggle in Settings is stored but doesn't yet switch the full app theme (light mode only in this version — foundation is in place via settings.theme)
File attachment to snippets stores paths in DB; the actual file picker (expo-document-picker) can be wired in as a bonus feature
AI result parsing into 3 sections (Overview / How It Works / Improvements) is heuristic-based and works best with well-structured AI responses

🎓 Submitted For

Mobile Development Cohort

Eval Period: May 31 – June 3, 2026
Tech: Expo · React Native · TypeScript

Built with ❤️ using Expo SDK 56 + React Native 0.85

Name		Name	Last commit message	Last commit date
DevSnippets		DevSnippets
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation