shiny-app

byParesh Patel

create a app that scans website url from their it should pick business branding like logo, colours, fonts, and services , also, it should scan entire website to figure our about business like their journey, products/services, and more. They using the same, user should be able to create business posts about their services/ products, and more. this will be used by those business which are small and have no budget to hire agency to create their posts and banners to post on several platforms.

LandingLoginPost Editor
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

System Requirements Document (SRD)

Project Name: shiny-app

1. Introduction

The shiny-app is an innovative solution designed to empower small businesses in India to create professional branding and marketing materials effortlessly. Developed for users like Paresh Patel, the app scans a business's website URL to extract branding elements such as logos, colors, fonts, and services. It then leverages AI to generate industry-specific templates and allows users to create custom posts and banners for various platforms. This tool is tailored for businesses with limited budgets, enabling them to compete effectively in the digital space without hiring expensive agencies.

2. System Overview

The shiny-app is a web-based application that utilizes advanced AI and machine learning technologies to simplify branding and marketing for small businesses. By scanning a website URL, the app identifies key branding elements and business information, such as the company’s journey, products, and services. Using this data, the app provides two primary functionalities:

  1. AI-Generated Templates: Automatically creates industry-specific post templates based on extracted branding and business details.
  2. Custom Prompt-Based Creation: Allows users to input prompts to generate unique images and posts using AI, while adhering to the extracted branding.

The app is designed to be intuitive and user-friendly, ensuring accessibility for users with minimal technical expertise.

Page 2 of 5

3. Functional Requirements

Story Points:

  • As a User, I should be able to input a website URL for scanning and extracting branding elements like logo, colors, fonts, and services.
  • As a User, I should be able to view the extracted branding elements and business information in a structured format.
  • As a User, I should be able to generate industry-specific post templates using AI based on the extracted branding.
  • As a User, I should be able to input a custom prompt to generate AI-created images and posts for my business.
  • As a User, I should be able to edit and customize the branding elements after extraction for further personalization.
  • As a User, I should be able to download or share the generated posts directly to social media platforms.
  • As a User, I should be able to save my branding and post templates for future use.

4. User Personas

1. Small Business Owner

  • Description: Entrepreneurs running small businesses with limited budgets for branding and marketing.
  • Goals: Create professional-looking posts and banners without hiring agencies.
  • Pain Points: Lack of technical expertise, limited time, and budget constraints.

2. Freelance Marketer

  • Description: Independent marketers assisting small businesses with branding and social media management.
  • Goals: Quickly generate posts tailored to client branding.
  • Pain Points: Need for efficient tools to streamline content creation.

5. Visuals Colors and Theme

Page 3 of 5

Color Palette:

The shiny-app will feature a vibrant yet professional color scheme that reflects creativity and accessibility:

  • Background: #F5F5F5 (Soft Gray)
  • Surface: #FFFFFF (Pure White)
  • Text: #333333 (Dark Charcoal)
  • Accent: #FF6F61 (Warm Coral)
  • Muted Tones: #B0BEC5 (Cool Steel Blue)

6. Signature Design Concept

Interactive Branding Canvas

The homepage of shiny-app will feature an Interactive Branding Canvas. Upon entering a website URL, users will see a dynamic visualization of their branding elements.

  • Animation: Logos, colors, and fonts extracted from the website will "float" into place on a canvas, creating a visually engaging experience.
  • Interaction: Users can drag and drop elements to customize their branding directly on the canvas.
  • Micro-Interactions: Hovering over elements will display tooltips with additional details (e.g., font name, color hex code).
  • AI Integration: A sidebar will suggest post templates and image ideas based on the branding.
  • Transitions: Smooth transitions between sections, with subtle color shifts matching the extracted palette.

This concept ensures the app makes a memorable first impression while emphasizing its core functionality.

Page 4 of 5

7. Non-Functional Requirements

  • Performance: The app should process website scans and generate templates within 5 seconds.
  • Scalability: Support up to 10,000 concurrent users.
  • Security: Ensure data privacy and secure handling of user inputs and extracted branding elements.
  • Localization: Default settings tailored for Indian businesses, including INR currency and IST timezone.

8. Tech Stack

Frontend:

  • React for Web

Backend:

  • Python
  • FastAPI

Database:

  • MySQL (with Alembic for migrations)

AI Models:

  • GPT 5.4 for user-friendly responses
  • Google Nano Banana for image generation
Page 5 of 5

AI Tools:

  • Litellm for LLM Routing
  • Langchain

Orchestration:

  • Docker for local orchestration
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

Assumptions:

  • Users will have access to the website URL of their business.
  • Small businesses in India are the primary target audience.
  • The app will primarily be used on desktop devices.

Constraints:

  • Limited budget for hosting and infrastructure.
  • AI-generated images must adhere to branding guidelines extracted from the website.

10. Glossary

  • Branding Elements: Visual and textual components that define a business’s identity, such as logos, colors, and fonts.
  • AI-Generated Templates: Pre-designed post layouts created by AI based on industry and branding data.
  • Prompt-Based Creation: User-defined input for generating custom images and posts using AI.
  • Interactive Branding Canvas: A dynamic interface for visualizing and customizing branding elements.
Landing design preview
Landing: View App Info
Login: Sign In
Dashboard: View Client Projects
Scanner: Input Client URL
Branding Canvas: Review Elements
Branding Canvas: Edit Elements
Templates: Browse AI Templates
Templates: Select Template
Post Editor: Customize Post
Prompt Studio: Write Custom Prompt
Post Editor: Download or Share
Saved Posts: Save Template
Saved Posts: Manage Saved Posts