amber-information

byhello

Make a website where i put a instagram account and it gives all the information about the account and all information should be accurate and perfect..

LandingSignupLogin
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 3

Amber-Information

Introduction

The Amber-Information project aims to create a website that retrieves contact information from Instagram accounts. This document outlines the system requirements for the project, focusing on the specific functionality and design elements needed to achieve the desired outcomes.

System Overview

Amber-Information is designed to allow users to input an Instagram account and retrieve contact information such as phone numbers and email addresses. The system will focus on providing accurate and precise data, while adhering to legal and ethical guidelines regarding data privacy.

Functional Requirements

  • As a User, I should be able to input an Instagram account to retrieve contact information.
  • As a User, I should receive accurate and precise contact information, including phone numbers and email addresses.

User Personas

  • User: Individuals seeking to retrieve contact information from Instagram accounts for communication purposes.
Page 2 of 3

Visuals Colors and Theme

  • primary: #1A237E (deep indigo)
  • primary_light: #534BAE (light indigo)
  • secondary: #FF6F00 (vibrant amber)
  • accent: #D50000 (bright red)
  • highlight: #FFD600 (golden yellow)
  • bg: #F5F5F5 (light grey)
  • surface: rgba(255, 255, 255, 0.9) (white with slight transparency)
  • text: #212121 (dark grey)
  • text_muted: #757575 (medium grey)
  • border: rgba(0, 0, 0, 0.1) (light black)

Signature Design Concept

The homepage of Amber-Information will feature an interactive "Data Stream" concept. Users will see a dynamic flow of data particles representing Instagram accounts. By clicking on a particle, the user will initiate a zoom-in animation that reveals detailed contact information in a sleek, card-like interface. The particles will subtly change colors as they move, creating a visually engaging experience. This concept will be implemented using framer-motion for smooth animations and gsap for scroll-triggered effects.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth effect as users scroll. This will be achieved through decorative layers that move at different speeds, enhancing the storytelling aspect of the website. Internal pages will adopt a "static" model to ensure clarity and focus on data presentation.

Page 3 of 3

Non-Functional Requirements

  • The system must comply with Instagram's privacy policies and legal guidelines.
  • The website should load within 3 seconds on standard broadband connections.
  • The user interface must be responsive and accessible on both desktop and mobile devices.

Tech Stack

  • Frontend: React for Web
  • Backend: Python, FastAPI
  • Database: MongoDB
  • AI Models: None specified
  • Local Orchestration: Docker, docker-compose
  • Server-side Orchestration: Kubernetes

Assumptions and Constraints

  • The system will only retrieve publicly available contact information.
  • Users must have the necessary permissions to access the Instagram accounts they query.
  • The website will not store any retrieved contact information beyond the session duration.

Glossary

  • Instagram Account: A user profile on the Instagram social media platform.
  • Contact Information: Data such as phone numbers and email addresses associated with an Instagram account.
  • Parallax: A scrolling technique that creates an illusion of depth by moving background and foreground elements at different speeds.
Landing design preview
Landing: View Overview
Landing: Explore Features
Login: Sign In
Signup: Create Account
Dashboard: View History
Search: Input Account
Search: Submit Query
Results: View Contact Info
Results: Copy Details
Results: New Search
Settings: Update Profile