🚀 SnipFlow — Smart Code Snippet Organizer

✨ Organize · Explain · Visualize · Share

A modern Android app to manage your code snippets with AI-powered explanations, collections, favorites, and SnapCode image export — built entirely in Kotlin + Jetpack Compose with zero XML.

🎓 Built as a side project during the MindMatrix Internship program — Front-End UI task completed using Jetpack Compose with a fully declarative, zero-XML approach.

🛠️ Developed using Android Studio · Powered by Antigravity

🎬 Live Demo

Full walkthrough of SnipFlow — splash animation, dashboard, code details, AI explanation, SnapCode export, profile, and settings.

GitHub Preview Video: snipflow_demo_github.mp4

Direct MP4: Open Demo Video

The MP4 version is optimized for GitHub preview, faster loading, and reliable playback directly from the repository.

📱 App Screens — Detailed Walkthrough

SnipFlow is built across 9 fully composable screens — not a single XML layout file. Every screen below is pure Kotlin + Jetpack Compose.

1. Home Screen — App Icon on Device

The SnipFlow app icon on the Android home screen dock — a purple </> code symbol badge. Tap to launch the app directly.

2. Splash Screen — Animated Code Logo

A clean, centered splash screen with the SnipFlow code icon featuring a spring bounce animation. Minimalist purple-on-white design that transitions into the branding screen.

3. Splash Branding — SnipFlow Identity

The branded splash shows the SnipFlow name with tagline "Your Smart Code Library", a terminal icon inside an animated gradient ring (purple → teal), and a loading spinner. This screen auto-navigates to Login or Dashboard based on saved session state.

4. Dashboard — My Library

The main My Library dashboard showing:

3 saved snippets — "HTML & CSS", "click me", "CARD"
Each card shows a code preview, language badge (CSS/HTML), and a ⭐ favorite star
Search bar at top: "Search snippets, tags, language..."
Filter chips: All (3) · ⭐ Favorites · 📂 Collections
"+ New Snippet" FAB at the bottom
Navigation drawer (hamburger menu) for Collections, Profile, Settings, About
Profile avatar badge (top-right) for quick profile access

5. Snippet Detail — Code View + AI Section

The snippet detail screen for an "HTML & CSS" snippet showing:

Code View / Rendered Output toggle chips
A dark-themed WebView code block displaying the full HTML source (DOCTYPE, head, meta, style, body)
Action row: Copy · SnapCode · Share buttons
Full-screen and clipboard icons in the toolbar
AI Explanation section at the bottom — "Powered by Gemini AI" with a generated Code Analysis for CSS/HTML
Top bar actions: ⭐ Favorite, ✏️ Edit, 🖼️ Image, 📤 Share, 🗑️ Delete

6. AI Explanation — Full Gemini Analysis

Scrolled-down view of the AI Explanation section showing a complete Gemini-powered code analysis:

🌐 Purpose: "This is an HTML web page titled 'Card Example'"
🏗️ Structure: div containers, headings, paragraphs, buttons
🎨 CSS Features: Flexbox layout, Rounded corners, Box shadows, Transition animations, Hover effects, Color palette (#f4f4f9, #fff, #333, #666, #007BFF)
✨ Suggestions: Add media queries for responsive design, Use semantic HTML5 elements
📊 Statistics: 59 total lines, 53 non-empty, 1146 characters, Complexity: Intermediate

7. Rendered HTML Preview

The Rendered Output mode for a "CARD" snippet — displays the actual HTML output inside a WebView:

Shows a card with "Hi, ASHISH", "This is SnipFlow App", and a gradient "Code Snippets with Animation ✨" button
Toggle between Code View and Rendered Output with chips
Same action bar: Copy · SnapCode · Share
AI Explanation section visible below

8. Full-Screen Preview

Full-screen immersive preview of the rendered HTML card:

The card output fills the entire screen on a dark background
Zoom controls (+/−) as floating action buttons at the bottom-right
Top bar with Copy and Exit fullscreen actions
Great for studying or presenting code output on device

9. SnapCode — Code-to-Image Export

The SnapCode screen for generating shareable code images:

IDE-style preview card with traffic light dots (red/yellow/green), dark background, monospaced code text
Theme selector chips: Dark IDE · Monokai · Solarized · Ocean (horizontal scroll)
"Generate & Share as Image" primary button — creates a PNG bitmap with line numbers + header
"Export as Text / Copy" — exports snippet metadata and code as text
"Share Raw Code" — shares the raw code string via Android share sheet

10. SnapCode — Share Sheet

Android's native share sheet triggered from SnapCode:

Shows the generated code image thumbnail with message "Check out this code snippet: HTML & CSS"
Share targets: Quick Share, Print, Drive, Maps, Messages, and more
The image is saved to Pictures/CodeSnippets/ and shared as a PNG with read permission

11. Add New Snippet

The New Snippet creation form with clean Material 3 cards:

Snippet Details section: Title field, Description (optional)
Categorization section: Language dropdown (25+ languages including multi-language combos like HTML+CSS+JS), Tags (comma separated)
Code Editor section: Monospace text area with line counter ("1 lines"), placeholder "Paste or type your code here..."
Save action in the toolbar — validates that title or code is not blank
Same screen doubles as Edit Snippet when navigated with a snippet ID

12. About SnipFlow

The About SnipFlow screen showing:

Large app icon (terminal symbol on purple container)
"SnipFlow" heading + "Version 1.0.0"
Description: "SnipFlow is your ultimate companion for organizing, visualizing, and sharing code snippets on the go."
Feature highlights with icons:
- 💻 Smart Organization — Categorize snippets with tags and languages
- ℹ️ AI Explanations — Understand complex code with Gemini AI-powered summaries
- 🖥️ Code Visualization — Syntax highlighting and high-quality image generation
Footer: "Developed with ❤️ by Ashish"

13. My Profile

The My Profile screen showing:

Gradient-ringed avatar with initial letter "A" and a 📷 camera badge for image picker
User info: Ashishcherian15 · ashishcherian15@gmail.com
Stats card with 4 metrics: 3 Snippets · 3 Favorites · 1 Collection · 2 Languages
Account Management section with:
- Sign Out button (outlined)
- Delete Account button (red outlined, with confirmation dialog)
Top-right ✏️ Edit icon toggles inline editing for name + email

14. Settings

The Settings screen with persisted preferences:

Appearance section:
- Theme: System Default / Light / Dark (radio buttons, currently System Default)
Editor section:
- Font Size slider (10px–24px, currently 23px)
- Show Line Numbers toggle (currently ON)
About section:
- Version: 1.0.0
- Build: Kotlin + Jetpack Compose
- Database: Room (SQLite)
- AI Engine: Gemini AI
- Syntax: highlight.js

🌟 Feature Summary

Feature	Description
📚 Snippet Library	Create, edit, delete & favorite code snippets
🔍 Smart Search	Filter by title, language, or tags in real time
📂 Collections	Organize snippets into named groups
🤖 AI Explanation	Gemini AI analysis with smart local fallback
🖼️ SnapCode Export	Generate IDE-style code images & share as PNG
🌐 HTML Preview	Render HTML snippets live inside WebView
🔲 Full-Screen View	Immersive code/preview mode with zoom controls
👤 Profile	Avatar, stats dashboard, account management
⚙️ Settings	Theme (system/light/dark), font size, line numbers
📤 Share	Share raw code or exported images via Android share sheet
🔐 Login/Session	Persisted login state with SharedPreferences

🛠️ Tech Stack

Layer	Technology
Language	Kotlin (JVM 17)
UI Framework	Jetpack Compose + Material 3
Navigation	Navigation Compose
Database	Room (SQLite)
State Management	Kotlin Coroutines + StateFlow
AI Engine	Gemini Generative AI SDK
Image Loading	Coil Compose
Networking	Retrofit + Gson
IDE	Android Studio
Min SDK	26 (Android 8.0)
Target SDK	34 (Android 14)

🏗️ Architecture

┌─────────────────────────────────┐
│    UI Layer (Compose Screens)   │
│  9 screens · pure Kotlin · 0 XML│
└──────────────┬──────────────────┘
               ↓
┌──────────────────────────────────┐
│  ViewModel (State + Logic)       │
│  StateFlow · SharedPreferences   │
└──────────────┬───────────────────┘
               ↓
┌──────────────────────────────────┐
│  Repository                      │
│  Single source of truth          │
└───────┬──────────────┬───────────┘
        ↓              ↓
┌──────────────┐ ┌─────────────────┐
│  Room DAO    │ │  Gemini API     │
│  (SQLite)    │ │  (AI Explain)   │
└──────────────┘ └─────────────────┘

📦 Download

Install the latest APK from GitHub Releases:

👉 Download Latest Release

⚙️ Local Setup

Prerequisites

Android Studio (latest stable)
JDK 17
Android SDK (compileSdk 34)

Clone & Run

git clone https://github.com/AshishCherian15/SnipFlow-Snippet-Code-Organizer-Andriod-App.git
cd SnipFlow-Snippet-Code-Organizer-Andriod-App
./gradlew assembleDebug

Gemini AI Key (Optional)

Open app/src/main/java/com/example/codesnippetorganizer/data/remote/GeminiApi.kt and replace:

private val apiKey = "YOUR_GEMINI_API_KEY"

with your key from Google AI Studio.

Without a key, SnipFlow still works — it uses a built-in intelligent local code analysis fallback that detects patterns, keywords, and structure for 10+ languages.

🔐 Permissions

Permission	Purpose
`INTERNET`	Gemini AI explanations
`READ_MEDIA_IMAGES`	Profile image picker
`READ/WRITE_EXTERNAL_STORAGE`	SnapCode image save (legacy devices)

🎓 Context

This project was built as a side project during the MindMatrix Internship program.

The complete front-end UI was developed as part of the MindMatrix Frontend UI task — 9 fully composable screens built entirely in Kotlin + Jetpack Compose with zero XML layouts.

Key highlights from the build:

✅ Splash screen with spring bounce animation
✅ Login screen with glassmorphism UI & AnimatedContent
✅ Dashboard with Modal Drawer, search, and filter chips
✅ Add/Edit Snippet with support for 25+ programming languages
✅ Snippet detail view with WebView-based syntax highlighting
✅ AI-powered code explanation using Gemini AI
✅ Collections with expandable cards
✅ Profile screen with gradient avatar & stats
✅ Navigation drawer with icons and structured sections

🔥 Biggest win: Not a single XML layout file — everything from UI to navigation and state management is built using pure composable Kotlin.

👨‍💻 Developer

Built with ❤️ by Ashish Cherian

Developed using Android Studio · Powered by Antigravity

GitHub · LinkedIn

📄 License

This project is open source. Add a LICENSE file to specify reuse terms.

Name		Name	Last commit message	Last commit date
.gradle		.gradle
.idea		.idea
app		app
build/reports/problems		build/reports/problems
gradle		gradle
screenshots		screenshots
README.md		README.md
build.gradle.kts		build.gradle.kts
build_assemble_clean.txt		build_assemble_clean.txt
build_assemble_log.txt		build_assemble_log.txt
build_assemble_log_utf8.txt		build_assemble_log_utf8.txt
build_log.txt		build_log.txt
build_log_2.txt		build_log_2.txt
build_log_2_utf8.txt		build_log_2_utf8.txt
build_log_utf8.txt		build_log_utf8.txt
build_output.txt		build_output.txt
build_output_2.txt		build_output_2.txt
build_output_3.txt		build_output_3.txt
build_output_4.txt		build_output_4.txt
build_output_5.txt		build_output_5.txt
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
local.properties		local.properties
settings.gradle.kts		settings.gradle.kts

Navigation Menu

Repository files navigation

🚀 SnipFlow — Smart Code Snippet Organizer

✨ Organize · Explain · Visualize · Share

🎬 Live Demo

📱 App Screens — Detailed Walkthrough

1. Home Screen — App Icon on Device

2. Splash Screen — Animated Code Logo

3. Splash Branding — SnipFlow Identity

4. Dashboard — My Library

5. Snippet Detail — Code View + AI Section

6. AI Explanation — Full Gemini Analysis

7. Rendered HTML Preview

8. Full-Screen Preview

9. SnapCode — Code-to-Image Export

10. SnapCode — Share Sheet

11. Add New Snippet

12. About SnipFlow

13. My Profile

14. Settings

🌟 Feature Summary

🛠️ Tech Stack

🏗️ Architecture

📦 Download

⚙️ Local Setup

Prerequisites

Clone & Run

Gemini AI Key (Optional)

🔐 Permissions

🎓 Context

👨‍💻 Developer

📄 License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🚀 SnipFlow — Smart Code Snippet Organizer

✨ Organize · Explain · Visualize · Share

🎬 Live Demo

📱 App Screens — Detailed Walkthrough

1. Home Screen — App Icon on Device

2. Splash Screen — Animated Code Logo

3. Splash Branding — SnipFlow Identity

4. Dashboard — My Library

5. Snippet Detail — Code View + AI Section

6. AI Explanation — Full Gemini Analysis

7. Rendered HTML Preview

8. Full-Screen Preview

9. SnapCode — Code-to-Image Export

10. SnapCode — Share Sheet

11. Add New Snippet

12. About SnipFlow

13. My Profile

14. Settings

🌟 Feature Summary

🛠️ Tech Stack

🏗️ Architecture

📦 Download

⚙️ Local Setup

Prerequisites

Clone & Run

Gemini AI Key (Optional)

🔐 Permissions

🎓 Context

👨‍💻 Developer

📄 License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages