Transform Screenshots into Stunning App Store Visuals
Frontend:
Backend:
- Overview
- What is AppLens?
- Key Features
- Technology Stack
- Project Architecture
- Getting Started
- Installation
- Configuration
- Usage
- API Documentation
- Contributing
- License
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 creating stunning visuals for your mobile apps.
AppLens solves the common problem faced by mobile app developers: creating eye-catching, professional screenshots for app stores. Instead of spending hours in complex design tools, AppLens provides:
- Pre-designed Templates: Start with beautiful, platform-specific templates for iOS and Android
- Visual Canvas Editor: Drag-and-drop interface powered by Konva.js for intuitive editing
- Multi-slide Projects: Create complete screenshot sets with consistent styling
- Layer Management: Control text, images, shapes, and screenshots with precision
- Export Options: Generate multiple sizes for different devices in one click
- Cloud Storage: Save your projects and access them from anywhere
- Template System: Choose from various categories and platforms
- Mobile app developers publishing to App Store / Play Store
- Design teams creating marketing materials
- Indie developers who need professional visuals without design expertise
- Agencies managing multiple app projects
- Canvas-based editing with real-time preview using Konva.js
- Layer management with z-index control, locking, and visibility toggles
- Multi-element support: Text, images, shapes, and screenshot layers
- Transform controls: Position, resize, rotate elements freely
- Undo/Redo functionality for safe experimentation
- Element duplication for consistent designs
- Pre-designed templates for iOS and Android platforms
- Multiple categories (App, Game, Business, etc.)
- Template browsing with thumbnail previews
- One-click template instantiation into projects
- Customizable template configurations
- Create and manage multiple projects
- Save project state to cloud
- Auto-save functionality
- Project thumbnails for easy identification
- Template-based project initialization
- Generate multiple screenshot sizes simultaneously
- Platform-specific export presets (iPhone, iPad, Android devices)
- Batch export all slides in a project
- High-quality image output
- Download as ZIP for convenience
- Email/password authentication with secure hashing
- OAuth integration (Google, GitHub)
- JWT-based session management
- Protected routes and API endpoints
- Secure file upload validation
- AWS S3 integration for image storage
- Efficient file handling and CDN delivery
- Automatic image optimization
- Secure presigned URLs for uploads
- React 18.3 - Modern UI library with hooks
- TypeScript 5.8 - Type-safe development
- Vite 5.4 - Lightning-fast build tool and dev server
- React Router DOM 6.30 - Client-side routing
- TailwindCSS 3.4 - Utility-first CSS framework
- Radix UI - Accessible component primitives (dialogs, dropdowns, tooltips, etc.)
- Shadcn/ui - Beautiful, customizable component system
- Lucide React - Icon library
- Framer Motion - Animation library
- Zustand 5.0 - Lightweight state management
- TanStack React Query 5.83 - Server state management and caching
- Axios 1.13 - HTTP client for API requests
- Konva 10.0 - HTML5 canvas library for 2D rendering
- React Konva - React wrapper for Konva
- React Hook Form 7.61 - Performant form library
- Zod 3.25 - TypeScript-first schema validation
- @hookform/resolvers - Integration between RHF and Zod
- date-fns 3.6 - Modern date utility library
- file-saver 2.0 - Client-side file saving
- JSZip 3.10 - Create and download ZIP files
- clsx & tailwind-merge - Conditional CSS class handling
- class-variance-authority - Variant-based component styling
- Go 1.21 - High-performance compiled language
- Gin 1.9 - Fast HTTP web framework
- MongoDB - NoSQL document database
- mongo-driver 1.13 - Official MongoDB Go driver
- JWT (golang-jwt/jwt v5.2) - JSON Web Tokens for authentication
- crypto - Password hashing and encryption
- CORS middleware - Cross-origin resource sharing
- AWS SDK v2 - Amazon Web Services integration
- S3 - Object storage for images and assets
- godotenv 1.5 - Environment variable management
- google/uuid 1.5 - UUID generation
- Docker - Containerization
- Docker Compose - Multi-container orchestration
- Makefile - Build automation
- Component-Based Architecture: Modular, reusable React components
- State Management: Zustand stores for global state (auth, editor)
- Server State: React Query for API data caching and synchronization
- Form Handling: React Hook Form with Zod validation
- Protected Routes: Authentication-based route guards
- Canvas Rendering: Konva for high-performance 2D graphics
- Clean Architecture: Separation of concerns (handlers, services, repositories)
- Repository Pattern: Database abstraction layer
- Middleware Chain: Auth, CORS, logging
- RESTful API: Standard HTTP methods and status codes
- JWT Authentication: Stateless authentication tokens
- Service Layer: Business logic isolation
Frontend:
- Node.js 16+ or Bun
- npm, yarn, or pnpm
Backend:
- Go 1.21+
- MongoDB 4.4+
- AWS account (for S3 storage)
- Docker (optional)
git clone https://github.com/yourusername/shotify.git
cd shotifycd emerald-canvas-main
# Install dependencies
npm install
# or
yarn install
# or
bun install
# Copy environment file
cp .env.example .env
# Update .env with your backend API URL
# VITE_API_URL=http://localhost:8080/apicd backend
# Install Go dependencies
go mod download
# Copy environment file (create one based on your needs)
cp .env.example .envVITE_API_URL=http://localhost:8080/api# Server
PORT=8080
ENVIRONMENT=development
# Database
MONGO_URI=mongodb://localhost:27017
DATABASE_NAME=shotify
# JWT
JWT_SECRET=your-super-secret-jwt-key-change-this
# AWS S3
AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=your-access-key
AWS_SECRET_ACCESS_KEY=your-secret-key
S3_BUCKET_NAME=your-bucket-name
# OAuth (Optional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-secret
# Frontend URL (for CORS)
FRONTEND_URL=http://localhost:5173Using Docker:
docker run -d -p 27017:27017 --name mongodb mongo:latestUsing Docker Compose (in backend directory):
docker-compose up -dTerminal 1 - Start Backend:
cd backend
make run
# or
go run cmd/main.goTerminal 2 - Start Frontend:
cd emerald-canvas-main
npm run devOpen your browser at http://localhost:5173
Frontend:
cd emerald-canvas-main
npm run build
npm run preview # Preview production buildBackend:
cd backend
make build # Creates binary in bin/
./bin/shotifycd backend
docker-compose up --buildPOST /api/auth/register # Register new user
POST /api/auth/login # Login user
GET /api/auth/me # Get current user
POST /api/auth/refresh # Refresh JWT token
GET /api/oauth/google # Initiate Google OAuth
GET /api/oauth/github # Initiate GitHub OAuth
GET /api/oauth/callback # OAuth callback handler
GET /api/templates # List all templates
GET /api/templates/:id # Get template by ID
POST /api/templates # Create template (admin)
PUT /api/templates/:id # Update template (admin)
DELETE /api/templates/:id # Delete template (admin)
GET /api/projects # List user's projects
GET /api/projects/:id # Get project by ID
POST /api/projects # Create new project
PUT /api/projects/:id # Update project
DELETE /api/projects/:id # Delete project
POST /api/upload/image # Upload image to S3
GET /api/upload/presigned # Get presigned upload URL
- Choose Template: Browse templates by platform and category
- Create Project: Instantiate a project from a template
- Edit Canvas:
- Add/edit text layers (title, description, features)
- Upload screenshot images
- Add shapes and design elements
- Arrange layers with drag-and-drop
- Adjust colors, fonts, sizes
- Multiple Slides: Create a series of screenshots with consistent styling
- Export: Generate images for all required device sizes
- Download: Get a ZIP file with all your screenshots
- Layers Panel: View and manage all canvas elements
- Config Panel: Edit properties of selected elements
- Canvas: Visual preview and direct manipulation
- Toolbar: Save, undo, redo, export actions
- Slide Navigation: Switch between slides in your project
# Frontend
cd emerald-canvas-main
npm run lint
# Backend
cd backend
go test ./...See backend/Docs/DEPLOYMENT.md for detailed deployment instructions.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
For questions, issues, or contributions, please open an issue on GitHub.
Made with ❤️ by the AppLens Team
Transforming app screenshots into art since 2026