Awais Rasool

Awais Rasool

Back

App Lens

Full Stack DeveloperCompleted
Source CodeLive Demo
App Lens preview

Tech Stack

Frontend
React.js
TypeScript
Vite
Backend
Go
Swagger
Database
MongoDb
Mobile & Auth
OAuth
Cloud & DevOps
Docker

Overview

AppLens is a full-stack web application designed to help developers and designers create professional app store screenshots and promotional graphics for iOS and Android applications. With an intuitive visual editor, pre-designed templates, and powerful customization options, AppLens streamlines the process of producing polished, conversion-optimized store assets.

Problem Solved

Creating professional app store screenshots and promotional graphics is time-consuming and requires design expertise. Developers often struggle with consistent branding and visual presentation for their apps across different platforms. AppLens eliminates this bottleneck by providing a code-free, browser-based design tool specifically built for app store assets.

Solution

AppLens provides a visual editor where users can upload screenshots, apply templates, adjust layouts, add text overlays, and export ready-to-upload assets in the exact dimensions required by Apple App Store and Google Play Store. AI-powered enhancements suggest optimal layouts and color schemes based on app category and branding.

Workflow

  1. Authentication: Users sign in with Google OAuth for secure access
  2. Project Creation: Start from scratch or choose from 50+ pre-designed templates
  3. Asset Upload: Drag and drop screenshots, logos, and brand assets
  4. Visual Editing: Use the canvas editor to arrange elements, apply filters, and add annotations
  5. AI Enhancement: Let the AI suggest improvements to layout, contrast, and composition
  6. Collaboration: Invite team members to review and edit in real time
  7. Export: Download platform-specific packages ready for store submission

Technical Highlights

  • Frontend: React 18 with TypeScript, Vite for ultra-fast builds, and Tailwind CSS for styling
  • Backend: Go (Golang) for concurrent image processing with minimal memory footprint
  • Database: MongoDB for flexible project and asset storage
  • Authentication: Firebase OAuth with Google Sign-In
  • API Documentation: Swagger/OpenAPI for complete endpoint documentation
  • Deployment: Docker containers for consistent staging and production environments

Key Takeaways

Building AppLens reinforced the importance of optimizing image processing for the browser. Offloading heavy computations to Web Workers and using canvas-based pipelines significantly improved the user experience, keeping the UI responsive even with large image assets.

Features

Intuitive visual editor with drag-and-drop functionality

Pre-designed templates for iOS and Android app stores

AI-powered screenshot enhancement and auto-layout

Real-time preview across multiple device frames

Export in multiple resolutions and formats

Collaborative workspace for teams

Brand kit management for consistent styling

Responsive canvas with zoom and pan controls

Architecture

AppLens follows a modern decoupled architecture. The client is built with React and Vite for fast builds and HMR. The backend API is written in Go, providing high-performance image processing endpoints. MongoDB stores user projects and assets, while Docker containers ensure consistent deployments across environments. OAuth 2.0 with Google handles authentication, and Swagger documents the RESTful API.

API & System Flow

User authenticates via Google OAuth → Uploads screenshots or chooses templates → Frontend sends editing operations to Go backend → Backend processes images using canvas pipelines → Processed assets are stored in MongoDB with GridFS → Real-time collaboration updates are broadcast via WebSockets → Final screenshots are exported in platform-specific resolutions.

Challenges & Solutions

Solution

Implemented Web Workers for off-thread image processing and used canvas-based rendering with optimized algorithms for resize and filter operations.

Related Projects

Schema Builder

Schema Builder

Intelligent full-stack database schema designer that revolutionizes database modeling: visually design schemas with AI-powered chat assistance, create tables and relationships through an intuitive canvas, get instant SQL generation and real-time collaboration. Built with React TypeScript + Vite frontend, Go backend with MongoDB, Firebase authentication with Google OAuth, and AI-driven schema recommendations for seamless database architecture planning.

View Project
SchemaCraft

SchemaCraft

Revolutionary full-stack SaaS that transforms API development: create custom APIs instantly through visual schema design, get auto-generated CRUD endpoints with authentication, real-time collaboration, and comprehensive admin controls. Built with React TypeScript frontend, Go backend, deployed on AWS with automated CI/CD.

View Project
Funutrition

Funutrition

Developed Funutrition, an interactive kids' app designed by a dietitian to make learning about healthy eating fun. Features include educational games, healthy recipes, expert nutrition tips, and progress tracking. The app helps children build lifelong healthy habits while supporting parents with guidance and insights.

View Project