Outline

User Interfaces

Splash View Authentication View Dashboard/Camera View Stories View Snaps View Chat View AddMe View Discover View Widgets Camera View Top Bar Camera View buttom bar Icon Buttons Camera Picture Picture View Top Bar Picture View buttom bar Snaps holder Each Snap Smilies Search bar Snaps nav bar Chat nav bar Chat footer bar Chat holder Chat input field Discover row Live row Recent Story holder Each story

// Note: Each Component should have its own folder that references global widgets

Data flow

Actions (All Action types & Action Dispatchers) Login Sign Up Fetch Data Navigate Switch Camera Activate Flash Disactivate Flash Snap Queue Close Queue Smilies Queue Text Queue Color Set time Download Image Download Image Add to Story Send Snap Drag Row Touch to view snap Update Search State Open Camera Roll Call Video Fetch messages Add message Next Snap End Snap User Interface

The SnapChat user interfaces encompass all code blocks that allow for user interaction with the core SnapChat application. SnapChat user interfaces are broken down into Views(Core components responsible for a multitude of tasks & features) & Widgets(smaller components responsible for a single or very few tasks).

Splash View

This is the view that appears on application load & holds a brief image of the company logo

Authentication View

This view is responsible for displaying & triggering actions to support all user sign ons & logins. This view hosts two smaller views(Login & Sign Up) & integrates with firebase(or a similar app) to verify users via emails or user names and log them into the core CaddySnack application. The app defaults to this view on “UnAuthenticated”

Actions Types

Login Sign Up Fetch User Data

Widgets

Login View Button Buttons(Login, switch view, Register)

Dashboard View

This view allows the user navigate to the Snaps & Stories view, holds a camera widget and 2 sets of top icon widgets & buttom icon widgets. The app defaults to this view on reload

Side Note: I want to save all actions for widget components.

Widgets:

Camera View Top Bar Camera View buttom bar Picture View Top Bar Picture View buttom bar Picture View Camera View

Playing Snap

This is view holds a touchable snap as a background image and a nav bar

Widgets

Touchable Snap Background Playing Snap Nav

Stories View

The stories view contains the search widget, a nav widget, a discover widget with global circle icons & a listview with User Group holders and each story widget.

Widget

Search bar Navigation bar Discover List Circle Icons User Group Holder Each Story

Snaps View

This view displays updates to the main database in realtime (ex: Is the snap read? Has the Snap been replied, etc). The view contains a navigator widget, a search bar and listview with each unique snap state as a rendered view.

Widgets:

Search bar Nav Bar Each Snap State

Friend Profile

This widget holds a unique user icon, a user friendship score, 3 titled button widgets, & a smilie

Widgets:

Titled Icon button Smilie User icon

Chat View

This view takes in User IDs as a property & displays updates to the chats database. The view contains a navigator widget, a bottom bar, a chat holder & a chat input form

Widgets:

Chat Input Navigator widget Chat Bottom bar Chat Holder

AddMe View

This view displays a unique user icon, user details & Icon buttons “Added Me”, “Add Friends”, “My Friends” & a navigation bar. Widgets:

User Icon Icon Buttons Navigation Bar

Discover View

This view displays a list of circle icons that link to individual company profiles.

Widgets:

Circle Icon Navigation bar

Widgets

Camera View Top Bar

The camera view top bar holds the snapchat logo, a switch camera icon and an activate flash icon. All icons are touchable and trigger actions

Actions

Navigate Switch Camera Activate/Deactivate flash

Camera View bottom bar

The camera view bottom bar holds the snap button, & 2 navigate buttons. All icons are touchable and trigger actions

Actions

Navigate Snap

Icon Buttons

Icon buttons take in action types, button name, button color and button sizes as properties. Icon buttons are global widgets

Props:

Action type Button Name Button Color Button Size

Icon Title Buttons

Icon buttons take in action types, button name, button color and button sizes as properties & renders an icon button with a title field. Icon buttons are global widgets

Props:

Action type Button Name Button Color Button Size

Camera View

The camera view holds an image generated by the camera. Camera views take snaps on touch

Actions

Snap

Picture View

The picture view holds an image captured by the camera.

Props:

Image url

Picture View Top Bar

The picture view top bar holds a close icon button, a simlies icon button, a text icon button & a colors icon button. This widget is responsible for passing button properties & actions.

Actions

Queue Close Queue Smilies Queue Texts Queue Colors

Picture View Bottom Bar

The picture view bottom bar holds a time button icon, a download button icon, add to story button & send animated button. This widget is responsible for passing button properties & actions.

Actions

Set Time Download Image Add to Story Send Snap

Snaps Holder

The snaps holder widget holds a list view component that renders the “Each Snap” widget &

Props:

Each Snap State(To be rendered in “Each Snaps” Widget)

Each Snap

The widget takes in snap state & user ids and renders a single touchable/draggable row view onto the screen

Actions

Drag Row Touch to view snap

Smilies

This widget holds a variety of image urls and takes in a name and a size values as properties

Props:

Name Size

Search Bar

This widget holds an text input feild and updates app state on field change

Actions

Update Search State

Snaps Nav Bar

This widget holds a the company name & left and right icon buttons.

Actions

Navigate

Chat top nav bar

This widget holds a the name of the friend being chatted too & left and right icon buttons.

Actions

Navigate

Chat bottom bar

This widget holds 5 icon buttons(Images From Camera Roll, Call, Snap, Video & Smile).

Actions

Navigate Open Camera Roll Call Video Smilie

Chat holder

This widget holds & renders received messages and sent messages as properties.

Actions

Fetch messages

Chat input field

This widget holds an input field, a smiley icon button and a send button

Actions

Add Message

Live row (Not Coded)

This widget holds listview of “Snap Circles”

Discover row

This widget holds listview of “Snap Circles”

Recent Story holder

This view holds & renders a listview of “Each Story” widgets.

Snap Circle

This is set sized touchable component that takes in image URL & snap details as properties and navigates to the playing snap component on touch.

Actions

Navigate

Props:

Image URL Snap Details ID

Each story

This renders a user image icon to the left and relevent story data to the right

User Icon

This renders a backend generated unique user icon per user. Icons do not change once generated

Touchable Snap Background

This widget renders the current playing snap in a touable view. Touch actions trigger the next snap.

Actions

Next Snap

Props

Snap Image/Video url

Playing Snap Nav

This widget contains a name field, a time stamp and a clockdown widget that triggers the “End snap” or “Next Snap” Action

Countdown Wheel

This widget counts down snap duration based on user settings and triggers the “Next Snap” or “End Snap” Action

Props:

Snap Duration

Actions

End Snap Next Snap

Data flow

SnapChat dataflow encompass all code blocks that allow for user actions & application feedback with the core SnapChat application. SnapChat’s data flow is broken down into Actions(Triggers in Views and widgets that updates app state), Reducers(functions & algorithms that execute actions ) & Stores(objects that hold application state & state manipulation).

Actions (All Action types & Action Dispatchers)

Actions are triggered by application views and widgets and are starting point in all data manipulation queues.

Login

This action is triggered by the login button and takes in a username and password as properties

Props:

Username User Password

Reducers

Authenticate

Sign Up

This action is triggered by the Sign Up button and takes in a unique username and password as properties

Props:

Username User Password

Reducers

Sign Up

Fetch Data

This action is triggered by mounting the dashboard view.

Reducers

Fetch Data

Navigate

This action is triggered by various navigator buttons

Reducers

Flux Navigator

Switch Camera

This action is triggered by the switch camera icon button on the dashboard view

Reducers

Switch Camera

Activate Flash

This action is triggered by the activate flash icon button on the dashboard view

Reducers

Activate Flash

Deactivate Flash

This action is triggered by the deactivate flash icon button on the dashboard view

Reducers

deactivate Flash

Snap

This action is triggered by the snap icon button on the dashboard view

Reducers

snap

Queue Close

This action is triggered by the queue close icon button on the dashboard view

Reducers

Queue Close

Queue Smilies

This action is triggered by the Queue Smilies icon button on the dashboard view

Reducers

Queue Smilies

Queue Text

This action is triggered by the queue text icon button on the dashboard view

Reducers

Queue text

Queue Color

This action is triggered by the queue color icon button on the dashboard view

Reducers

Queue color

Set time

This action is triggered by the set time icon button on the dashboard view

Reducers

Set time

Download Image

This action is triggered by the download Image icon button on the dashboard view

Reducers

Download Image

Add to Story

This action is triggered by the add to story icon button on the dashboard view

Reducers

Add to Story

Send Snap

This action is triggered by the send snap icon button on the dashboard view

Reducers

Send Snap

Drag Row

This action is triggered by the Drag Row button on the dashboard view

Reducers

Drag Row

Touch to view snap

This action is triggered by the each snap button

Reducers

View snap

Update Search State

This action is triggered by the search input view

Reducers

Update List

Open Camera Roll

This action is triggered by the open camera roll button

Reducers

Open Camera Roll

Call

This action is triggered by the Call icon button

Reducers

Call

Video

This action is triggered by the video button

Reducers

Queue Video Camera

Fetch messages

This action is triggered by message view mount

Reducers

Fetch messages

Add message

This action is triggered by the add message button

Reducers

Add message

Next Snap

This action is triggered by touching the active snap

Reducers

Next Snap

End Snap

This action is triggered by touching the active snap

Reducers

End Snap

Reducers

Reducers are triggered by actions and are functions & algorithms that execute actions & manipulate the state of the application. These functions take in a property and return a value to be added to the global app state(JSON).

SnapChat Reducers

Authenticate Sign Up Fetch Data Navigate Active Flash Deactivate Flash Snap Queue close Queue text Queue Color Set Time Download Image Add to Story Send Snap View Snap Update search Queue Camera Call Video Fetch Messages Add Message Next Snap End Snap

Authenticate

This reducer takes in username & password & initiates an API connection & returns an Authentication key on success or a error on failure

Props:

Username User Password

Return:

Auth key Error

Sign Up

This reducer takes in a variety of user details, initiates an API connection & returns a boolean & a description string (on failure)

Props:

User Details

Return:

Boolean Error Description

Fetch Data

This reducer takes in auth key, initiates an API connection & pulls relevant user data from the Database.

Props:

Auth key

Return

User Session Data

Navigate

This reducer takes in route ID and navigation type, routes to the app to a new scene & returns current route ID & & title

Props:

Route ID Navigation Type

Return

Route ID Route Title

Toggle Flash

This reducer triggers the flash property

Return

Flash State

Snap

This reducer triggers the camera snap property

Return

Image Source

Queue Close

This reducer discards the state image source & returns the Dashboard view to the camera widget

Return

Dashboard View to Camera Widget

Queue Text

This reducer spawns a input field widget.

Queue Color

This reducer spawns a color picker widget and allows user to draw on the picture view.

Set Time

This reducer spawns a time selector widget and allows user to set any were from 1 to 5 seconds per snap.

Download Image

This reducer queues a download on the current image on screen.

Add to Story

This reducer allows users add image or short video content to their story database for 24 hours

Send Snap

This reducer allows users add an image or short story content to another user’s database.

View Snap

This reducer queues the “Snap View” component and loads assigned image/video content

Update Search

This reducer takes in string values from the search bar and filters through current component state content

Queue Camera

This reducer spawns the camera view

Call

This reducer takes in a phone number and calls the phone number using the device’s default telephone app.

Video

This reducer spawns a video camera

Fetch Messages

This reducer fetches relevant messages from the active users database.

Add Message

This reducer allows a user add a text message to another user’s database.

Next Snap

This reducer closes the current snap & opens another.

End Snap

This reducer closes the current snap and returns to parent view.