Stack

Minimum Viable Product

Stack is a slack-inspired chat web app built on rails and react with a flux architecture. It is a full-stack messaging app that allows many users to chat together in real time. The minimum viable product for this app will have the following features

• New account creation, login, and guest/demo login
• Real time chat messaging
• Channel creation and administration
• Hosting on Heroku with a custom domain name
• CSS styling that is satisfactorily visually appealing

Product Goals and Priorities

Stack will allow users to do the following:

• Create an account (MVP)
• Log in / Log out, including as a Guest/Demo User (MVP)
• Read and write chat messages (MVP)
• Edit user profiles (MVP)
• Create chat channels (MVP)
• Search
• Code Snippets

Bonus Features

Users Can:

• Upload Images and Documents (In progress)
• Have visual feedback while their chat partner is typing, similar to Facebook chat or iMessage
• Create links to specific chat items
• View other users by clicking on their username
• Opt to post anonymously in public channels

Design Docs

• View Wireframes
• React Components
• Flux Cycles
• API endpoints
• DB schema

Implementation Timeline

Phase 1: Backend setup and User Authentication (1 day)

Objective: Functioning rails project with Authentication

• Setup new Rails project with Flux architecture skeleton
• setup Webpack & Flux scaffold
• create User model
• user signup/signin pages
• authentication
• redirect to placeholder index

Phase 2: Chat (2 days)

Objective: Implement real time chat within Rails/React

• create Message model
• seed the database with a small amount of test data (users, messages)
• CRUD API for messages ('MessageController')
• setup APIUtil to interact with the API
• test out API interaction in the console.
• create MessageView, Message, ChatBox components
• implement Pusher websocket listeners on MessageView component
• add MessagesController#index functionality to return messages after given timestamp
• style Chat and children components
• infinite scroll upwards
• display edited timestamp
• Day separators

Phase 3: Channel integration with chat and users (1.5 days)

Objective: Users can interact with global channels

• Integrate channel id within messages model
• setup React Router
• implement Channel component, will be alongside Chat component
  • ChannelView
  • ChannelIndexItem
• Create/Destroy Channels
• Delete/Edit Messages
• Message timestamps
• Join/Leave channels
• Invite to private channels
• Highlight channels with new messages

Phase 4: Initial Styling (1 days)

Objective: Complete initial styling, bringing unified look and color to all pages. I plan to use bootstrap to style the app.

• create a basic style guide
• Style and flesh out splash page
• position elements on the page
• add basic colors & styles

Phase 5: Guest Accounts & Bug Fixing(.5 days)

Objective: Fully flesh out the guest account. Make sure initial user experience is smooth and bug free.

• Decide on and implement UX for guest accounts
• Provide appropriate default settings for guest account
• Do polishing of user experience so MVP experience is bug free and smooth.

Phase 6: Seed Data (0.5 days)

objective: Provide seed data for both bots and conversations.

• Add seed data to conversations to flesh out their contents
• Implement multiple channels with different behavior to simulate various interactions.

TODO

• fix multiple GET requests for messages by only attaching websocket listener after initial fetchMessages succeeds
• sanity check incoming messages in MessageStore
• remove extraneous console logs
• separate pusher keys for prod and dev (Figaro)